新しいコマンド エディタで Chrome Devtools Protocol（CDP）コマンドを効率的に作成 | Blog | Chrome for Developers
Chrome DevTools Protocol（CDP）は、実行中の Chrome ブラウザとデベロッパーが通信できるようにするリモート デバッグ プロトコル（API）です。Chrome DevTools は CDP を使用して、ブラウザの状態の検査、動作の制御、デバッグ情報の収集を支援します。CDP を使用する Chrome 拡張機能を作成することもできます。 たとえば、次の CDP コマンドは、指定された styleSheetId のスタイルシートの、location で指定された位置に、指定された ruleText の新しいルールを挿入します。 { command: 'CSS.addRule', parameters: { styleSheetId: '2', ruleText:'Example', location: { startLine: 1, startColumn: 1,
コーディング エージェントが Chrome DevTools MCP を使用してブラウザ セッションをデバッグできるようにする | Blog | Chrome for Developers
公開日: 2025 年 12 月 11 日 多くのユーザーから要望のあった Chrome DevTools MCP サーバーの機能強化をリリースしました。コーディング エージェントがアクティブなブラウザ セッションに直接接続できるようになりました。 この機能強化により、コーディング エージェントは次のことができるようになります。 既存のブラウザ セッションを再利用する: ログインが必要な問題の修正をコーディング エージェントに依頼する場合を考えてみましょう。コーディング エージェントは、追加のログインを必要とせずに、現在のブラウジング セッションに直接アクセスできるようになりました。 アクティブなデバッグ セッションにアクセスする: コーディング エージェントが DevTools UI でアクティブなデバッグ セッションにアクセスできるようになりました。たとえば、Chrome DevToo
ネイティブ メッセージング | Chrome Extensions | Chrome for Developers
拡張機能は、他のメッセージ パス API に似た API を使用して、ネイティブ アプリケーションとメッセージを交換できます。この機能をサポートするネイティブ アプリケーションは、拡張機能と通信できるネイティブ メッセージング ホストを登録する必要があります。Chrome はホストを別のプロセスで起動し、標準入力ストリームと標準出力ストリームを使用してホストと通信します。 ネイティブ メッセージング ホスト ネイティブ メッセージ ホストを登録するには、ネイティブ メッセージ ホストの構成を定義するファイルをアプリケーションが保存する必要があります。 ファイルの例を次に示します。 { "name": "com.my_company.my_application", "description": "My Application", "path": "C:\\Program Files\\My
WebMCP は早期プレビュー版でご利用いただけます | Blog | Chrome for Developers
公開日: 2026 年 2 月 10 日 エージェント型ウェブの進化に伴い、AI エージェントがウェブサイトとやり取りする方法において、ウェブサイトが積極的な役割を果たすよう支援したいと考えています。WebMCP は、構造化されたツールを公開するための標準的な方法を提供し、AI エージェントがサイト上でより高速かつ信頼性の高い正確なアクションを実行できるようにすることを目的としています。 これらのツールを定義することで、エージェントがサイトとやり取りする方法と場所を指定できます。たとえば、フライトの予約、サポート チケットの送信、複雑なデータのナビゲーションなどです。この直接通信チャネルにより、曖昧さが解消され、より迅速で堅牢なエージェント ワークフローが可能になります。 エージェント型ウェブの構造化されたインタラクション WebMCP は、ブラウザ エージェントがユーザーに代わってアクシ
<geolocation> HTML 要素の導入 | Blog | Chrome for Developers
公開日: 2026 年 1 月 13 日 Chrome 144 以降では、新しい <geolocation> HTML 要素を使用できます。この要素は、サイトがユーザーの位置情報をリクエストする方法の大きな変化を表しています。スクリプトでトリガーされる権限プロンプトから、宣言的でユーザー アクション指向のエクスペリエンスに移行します。これにより、権限の状態とエラーの処理に必要なボイラープレート コードが削減され、ユーザーの意図をより強く示すシグナルが提供されるため、ブラウザの介入（サイレント ブロックなど）を回避できます。 このリリースは、広範な実環境でのテストと、ウェブ標準コミュニティとの厳格な議論の結果です。この要素の有用性を理解するには、その開発の経緯と、その設計を推進したデータを検証することが重要です。 汎用 <permission> から特定の <geolocation> <ge
Prompt API | AI on Chrome | Chrome for Developers
Prompt API を使用すると、ブラウザで Gemini Nano に自然言語リクエストを送信できます。 Prompt API の使用方法は多岐にわたります。たとえば、次のようなビルドが可能です。 AI を活用した検索: ウェブページのコンテンツに基づいて質問に回答します。 パーソナライズされたニュース フィード: 記事をカテゴリで動的に分類し、ユーザーがそのコンテンツをフィルタリングできるようにするフィードを構築します。 カスタム コンテンツ フィルタ。ニュース記事を分析し、ユーザー定義のトピックに基づいてコンテンツを自動的にぼかしたり非表示にしたりします。 カレンダーの予定の作成。ウェブページからイベントの詳細を自動的に抽出する Chrome 拡張機能を開発し、ユーザーが数ステップでカレンダーの予定を作成できるようにします。 シームレスな連絡先の抽出。ウェブサイトから連絡先情報を抽
Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers
Published: September 23, 2025 We're launching today a public preview for the new Chrome DevTools Model Context Protocol (MCP) server, bringing the power of Chrome DevTools to AI coding assistants. Coding agents face a fundamental problem: they are not able to see what the code they generate actually does when it runs in the browser. They're effectively programming with a blindfold on. The Chrome D
最新のウェブブラウザの詳細（パート 1） | Blog | Chrome for Developers
CPU、GPU、メモリ、マルチプロセス アーキテクチャ この 4 部構成のブログシリーズでは、Google Chrome ブラウザの内部を、大まかなアーキテクチャからレンダリング パイプラインの詳細まで見ていきます。ブラウザがコードを機能するウェブサイトに変換する仕組みや、パフォーマンスの向上のために特定のテクニックが推奨される理由がわからない場合は、このシリーズがおすすめです。 このシリーズのパート 1 では、コア コンピューティングの用語と Chrome のマルチプロセス アーキテクチャについて説明します。 コンピュータの中核となるのは CPU と GPU です。 ブラウザが実行されている環境を理解するには、いくつかのコンピュータ パーツとその機能について理解する必要があります。 CPU 図 1: 4 つの CPU コアは、各デスクに座ってタスクを処理するオフィス ワーカーを表します
CSS scroll-state() | Blog | Chrome for Developers
Published: Jan 15, 2025 Chrome 133 builds upon container queries by introducing scroll state container queries. The browser managed state for sticky positioning, scroll snap points, and scrollable elements can now be queried and adapted to from CSS. Overview Before scroll state queries, you’d need to use JavaScript to understand if an element was stuck, snapped, or scrollable. Now there's a more p
CSS text-box-trim | Blog | Chrome for Developers
text-box: trim-both cap alphabetic; This property lets you control the space above and below text, for example <h1>, <button> and <p>. Every font produces a different amount of this block directional space which contributes to the element's size. This chaotic space contribution is not easily measured, and has been impossible to control, until now. The font knows, now CSS knows, too. Try it on Code
キャプチャしたタブをスクロールしてズームする | Web Platform | Chrome for Developers
ウェブ プラットフォームでは、Screen Capture API を使用して、タブ、ウィンドウ、画面を共有できます。ウェブアプリが getDisplayMedia() を呼び出すと、Chrome はユーザーにタブ、ウィンドウ、画面を MediaStreamTrack 動画としてウェブアプリと共有するよう求めます。 getDisplayMedia() を使用する多くのウェブアプリでは、キャプチャされたサーフェスの動画プレビューがユーザーに表示されます。たとえば、ビデオ会議アプリでは、この動画をリモート ユーザーにストリーミングしながら、ローカルの HTMLVideoElement にもレンダリングすることがよくあります。これにより、ローカル ユーザーは共有している内容のプレビューを常に確認できます。HTMLVideoElement このドキュメントでは、Chrome の新しい Captur
新しい HTML <permission>> 要素のオリジン トライアル | Blog | Chrome for Developers
ウェブアプリで位置情報へのアクセスなどの強力な機能を使用する権限をリクエストするには、いくつかの命令型メソッドがあります。これらの方法には多くの課題があるため、Chrome 権限チームは、新しい宣言型の方法（専用の HTML <permission> 要素）をテストしています。この要素は Chrome 126 からオリジン トライアルで使用されており、最終的には標準化される予定です。 権限をリクエストする命令型メソッド ウェブアプリが高度な機能にアクセスする必要がある場合は、権限をリクエストする必要があります。たとえば、Google マップが Geolocation API を使用してユーザーの位置情報を必要とする場合は、ブラウザからユーザーにプロンプトが表示されます。多くの場合、その決定を保存するオプションも表示されます。これは、権限仕様で明確に定義されたコンセプトです。 初回使用時に暗
Understand errors and warnings better with console insights | Chrome DevTools | Chrome for Developers
Ask Gemini to provide insights right in the DevTools Console, so you can better understand errors and warnings. See also How your data is used and Known issues. Requirements To use the console insights feature, make sure that you: Are at least 18 years old and are in one of the supported locations. Are using the latest version of Chrome. Are signed into Chrome with your Google Account. Have Englis
WebAssembly Garbage Collection (WasmGC) now enabled by default in Chrome | Blog | Chrome for Developers
a: (refcount=3, is_ref=0)string '419796578' (length=9) a: (refcount=2, is_ref=0)string '419796578' (length=9) a: (refcount=1, is_ref=0)string '419796578' (length=9) a: (refcount=0, is_ref=0)null There are other challenges with garbage collection, like detecting cycles, but for this article, having a basic level of understanding of reference counting is enough. Programming languages are implemented
Animate elements on scroll with Scroll-driven animations | CSS and UI | Chrome for Developers
Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Examples of this are effects such as parallax background images or reading indicators which move as you scroll. A reading indicator atop a document
Easier ArrayBuffer to String conversion with the Encoding API | Blog | Chrome for Developers
Over two years ago, Renato Mangini described a method for converting between raw ArrayBuffers and the corresponding string representation of that data. At the end of the post, Renato mentioned that an official standardized API to handle the conversion was in the process of being drafted. The specification has now matured, and both Firefox and Google Chrome have added native support for the TextDec
How to convert ArrayBuffer to and from String | Blog | Chrome for Developers
ArrayBuffers are used to transport raw data and several new APIs rely on them, including WebSockets, Web Intents 2](https://www.html5rocks.com/en/tutorials/file/xhr2/) and WebWorkers. However, because they recently landed in the JavaScript world, sometimes they are misinterpreted or misused. Semantically, an ArrayBuffer is simply an array of bytes viewed through a specific mask. This mask, an inst
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Changes to remote debugging switches to improve security | Blog | Chrome for Developers
What's new in DevTools, Chrome 125 | Blog | Chrome for Developers
Chrome Headless mode | Chromium | Chrome for Developers