技術/Chrome/DevToolsの拡張

• [ Prev ]
• [ Next ]
• [ 技術 ]

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

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

拡張できる内容としては次の三箇所。

1. DevToolsに独自のパネルを追加 : devtools.panels API
2. デバッグ対象のウインドウに独自のJSコードを追加したり、JSを実行させる : devtools.inspectedWindow API
3. ネットワーク通信の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とも関連しているので、併せてそちらのドキュメントも確認するとよさげ。

• 技術/Chrome/Remote Debugging Protocol

• [ Prev ]
• [ Next ]
• [ 技術 ]