3 KiB
DevTools エクステンション
簡単にデバッグをするために、ElectronはChrome DevTools Extensionに基本的な対応しています。
DevToolsエクステンションのために、ソースコードをダウンローし、BrowserWindow.addDevToolsExtension APIを使って読み込みます。読み込んだエクステンションは維持されているので、ウィンドウを作成するとき、毎回APIをコールする必要はありません。
** NOTE: React DevTools は動作しません。issue https://github.com/electron/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を使用していると、エクステンションは動作しない可能性が非常に高いです。