Как включить Chrome DevTools в Electron?

Я все еще новичок в Electron, который я сейчас наблюдаю здесь.

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

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

Ответ 1

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

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

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

Ответ 2

Итак, после того, как вы потребовали следующее:

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!

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

Ответ 3

вы можете открыть инструмент 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();
    });
});

Ответ 4

Скорее всего, 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"

Ответ 5

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

электрон Электрон

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

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

Ответ 6

Вот решение для Electron> = 1.2.1 версия

1- В папке вашего приложения

npm install --save-dev electron-react-devtools

2- Откройте свое электронное приложение, нажмите (просмотреть/переключить инструменты разработчика). На вкладке консоли введите следующий код и нажмите , введите:

 require('electron-react-devtools').install()

3- Перезагрузите/обновите страницу своего электронного приложения, и вы увидите, как появляются инструменты реагирования.

4- Готово!

Смотрите скриншоты ниже