ElectronにChrome DevToolsを含めるには？
私は現在、私が今フォローしているElectronにまだ慣れていません here 。
私はこれを読みました ページChrome DevTools を含める方法に関して、アプリケーションを簡単にデバッグできるようにします。私はドキュメントに従いましたが、electron <app-name>コマンドを実行するとエラーが返されます：The app provided is not a valid electron app, please read the docs on how to write one...
main.jsファイルのコードブロックは次のとおりです。
var app = require('app');
var BrowserWindow = require('browser-window');
// Add Chrome DevTools extension for debugging
require('remote').require('browser-window').addDevToolsExtension('../react-devtools')
それが私のプロジェクト構造の様子です：
- react-devtools
- src
-- index.html
-- main.js
- package.json
どんな助けも大歓迎です。ありがとう！
たぶん私は誤解していますが、あなたはただやることができます ctrl + shift + I 開発ツールをプルアップします。
または、プログラムで実行する場合は、electronに渡されるmain.jsファイルに次の行を含めます。
var app = require('app');
var BrowserWindows = require('browser-window');
app.on('ready', function(){
mainWindow = new BrowserWindow({width:800, height:600});
mainWindow.webContents.openDevTools();
}
私はあなたの問題の一部は、あなたがそれで何かをしようとする前にあなたがアプリの準備が整うのを待っていないことかもしれないと信じています。
そのため、以下が必要になった後：
var app = require('app');
次のコードを使用できます（アプリで使用しています）。
app.commandLine.appendSwitch('remote-debugging-port', '8315');
app.commandLine.appendSwitch('Host-rules', 'MAP * 127.0.0.1');
次のアドレスにアクセスすると、Chromeでアプリケーションをデバッグできます。
http://127.0.0.1:8315
これがお役に立てば幸いです。 Electronも初めてです！
基礎となるブラウザーエンジンに対しても構成を行う必要がある場合は、 ドキュメント を参照してください。
次のような開発ツールを開くことができます：
mainWindow = new BrowserWindow({ width: 1024, height: 768 });
mainWindow.loadURL('your url');
mainWindow.webContents.openDevTools();
mainWindow.webContents.on('devtools-opened', () => {
setImmediate(() => {
// do whatever you want to do after dev tool completely opened here
mainWindow.focus();
});
});
ほとんどの場合、Electronは指定されたアプリケーションフォルダーへのパスを理解できません。 package.jsonを保持するアプリケーションディレクトリへの相対パスまたは絶対パスを指定する必要があります。たとえば、アプリのpackage.jsonファイルが/home/user/my_awesome_app/package.jsonにある場合、アプリを起動するには、次のコマンドを発行する必要があります。
electron /home/user/my_awesome_app
また、package.jsonファイルのmainプロパティは、アプリケーションのエントリポイントを示していることに注意してください。あなたの場合、それは次のようでなければなりません：
"main": "src/main.js"
アプリケーションの名前は、アプリケーションのすべてのツリーを含むフォルダーの名前です。そのため、実行するためには、たとえば、フォルダーの名前がElectronである場合に記述する必要があります。
電子電子
フォルダーが置かれているパスで常にプロンプトを表示します。この助けを願っています。
（私の英語は申し訳ありませんが、少し錆びているかもしれません）
Electron> = 1.2.1バージョンのソリューションはこちら
1-アプリフォルダー内
npm install --save-dev electron-react-devtools
2- Electronアプリを開き、（開発者ツールの表示/切り替え）をクリックします。 consoleタブに次のコードを挿入し、hit enterを押します：
require('electron-react-devtools').install()
3- Electronアプリページをリロード/リフレッシュすると、react devツールが表示されます。
4-完了！
以下のスクリーンショットを参照してください
