Как включить Chrome DevTools в электронном?

Question

Я до сих пор новичок в Electron, с которым я в настоящее время работаю here.

Я прочел это page относительно того, как включить 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 

Любая помощь была бы принята с благодарностью. Благодаря!

Answer 1

Скорее всего, Electron не может понять путь к папке приложения, которую вы предоставили. Вы должны указать относительный или абсолютный путь к каталогу приложений, который содержит package.json. Например, если package.json файл вашего приложения находится в /home/user/my_awesome_app/package.json то для того, чтобы запустить приложение, которое вы должны выполнить следующую команду:

electron /home/user/my_awesome_app 

отметить также, что main свойство в package.json файле указывает на точку входа для приложения. В вашем случае это должно быть так:

"main": "src/main.js" 

Answer 2

Название Aplication это имя папки, которая содержит все дерево вашего Aplication. Поэтому для выполнения вам нужно написать, если ваша папка называется Electron например;

электрон Electron

Всегда в строке в пути, который находится папка. Надеюсь, что эта помощь.

(Извините за мой английский, немного ржавый возможно)

Answer 3

Таким образом, после того, как вы необходимо следующее:

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!

Если вам также необходимо выполнить некоторые настройки для основного браузера, пожалуйста, обратитесь к the docs.

Answer 4

Возможно, я недопонимаю, но вы можете просто сделать ctrl + shift + I, чтобы потянуть инструменты dev.

Или, если вы хотите сделать это программно, то, как я это делаю, это следующие строки в моем файле 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(); 
} 

Я считаю, что часть вашей проблемы может быть, что вы не ждете приложение, чтобы быть готовым, прежде чем пытаться делать вещи с ним.

Answer 5

вы можете открыть Dev инструмента, как это:

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(); 
    }); 
}); 

Answer 6

Откройте электронное приложение, нажмите на (вид/переключении инструментов для разработчиков).