DevTools エクステンション

簡単にデバッグをするために、ElectronはChrome DevTools Extensionに基本的な対応しています。

DevToolsエクステンションのために、ソースコードをダウンローし、BrowserWindow.addDevToolsExtension APIを使って読み込みます。読み込んだエクステンションは維持されているので、ウィンドウを作成するとき、毎回APIをコールする必要はありません。

NOTE: React DevTools は動作しません。issue https://github.com/atom/electron/issues/915 でフォローしています

例えば、React DevTools Extensionを使うために、最初にソースコードをダウンロードする必要があります。

$ cd /some-directory
$ git clone --recursive https://github.com/facebook/react-devtools.git

エクステンションをビルドするために、react-devtools/shells/chrome/Readme.mdを参照してください。

複数のウィンドウで、DevToolsを開くために、Electronでエクステンションをロードし、DevToolsコンソールで次のコードを実行します。

const BrowserWindow = require('electron').remote.BrowserWindow;
BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome');

エクステンションをアンロードするために、名前とBrowserWindow.removeDevToolsExtension APIをコールすると、次回DevToolsを開いた時にはロードされません。

BrowserWindow.removeDevToolsExtension('React Developer Tools');

DevTools エクステンションのフォーマット

理想的には、Chromeブラウザー用に書かれたすべてのDevToolsエクステンションをElectronがロードできることですが、それらはプレーンディレクトリにある必要があります。crx エクステンションパッケージは、ディレクトリに解凍できる方法がなければ、Electronはロードする方法はありません。

バックグラウンドページ

今のところ、ElectronはChromエクステンションのバックグラウンドページ機能に対応していません。そのため、Electronでは、この機能に依存するDevToolsエクステンションは動作しません。

chrome.* APIs

いくつかのChromeエクステンションは、chrome.* APIsを使用しており、ElectronでそれらのAPIを実装するための努力をしていますが、すべては実装されていません。

すべては実装されていないchrome.* APIについて考えると、もしDevToolsエクステンションが chrome.devtools.* 以外のAPIを使用していると、エクステンションは動作しない可能性が非常に高いです。