#navi_header|技術|

ChromeのDevToolsに独自の機能を追加できる。

- Extending DevTools - Google Chrome
-- https://developer.chrome.com/extensions/devtools
- Integrating with DevTools - Google Chrome
-- https://developer.chrome.com/devtools/docs/integrating

拡張できる内容としては次の三箇所。
+ DevToolsに独自のパネルを追加 : devtools.panels API
+ デバッグ対象のウインドウに独自のJSコードを追加したり、JSを実行させる : devtools.inspectedWindow API
+ ネットワーク通信のHTTPデータにアクセスする : devtools.network API

以下、それぞれのリファレンスページ：
- chrome.devtools.panels - Google Chrome
-- https://developer.chrome.com/extensions/devtools_panels
- chrome.devtools.inspectedWindow - Google Chrome
-- https://developer.chrome.com/extensions/devtools_inspectedWindow#type-Resource
- chrome.devtools.network - Google Chrome
-- https://developer.chrome.com/extensions/devtools_network

APIとしては機能が絞られている。これらのAPIは主としてDevToolsの拡張ポイントを提供しているものなので、中身や、実際に何をしたいのかについては他のAPIを活用する必要がある。

以下に実際に公開されているDevToolsの拡張例が紹介されている。AngularJS, Ember.js, Grunt, CoffeeScript, Knockout.js, Rails など、FWやJSライブラリのデバッグを支援するためのDevTools拡張が公開されている。
- Sample DevTools Extensions - Google Chrome
-- https://developer.chrome.com/devtools/docs/sample-extensions

実際にDevTools拡張を作るとなると、以下の"devtools"キーワードで絞り込んだサンプル一覧から、いくつか参考にすることになりそう。
- Sample Extensions - Google Chrome
-- https://developer.chrome.com/extensions/samples#search:devtools

なお注意点として、"devtools" APIはデバッガ機能それ自体のAPIではない。ブレークポイントを設定するなど、より本格的なデバッガ機能を駆使したい場合は、以下のdebugger APIを使う。
- chrome.debugger - Google Chrome
-- https://developer.chrome.com/extensions/debugger

なおdebugger APIはRemote Debugging Protocolとも関連しているので、併せてそちらのドキュメントも確認するとよさげ。
- [[1365]]

#navi_footer|技術|