electron 如何在电子版中包含Chrome DevTools?

z4iuyo4d  于 2023-03-16  发布在  Electron
关注(0)|答案(9)|浏览(178)

我仍然是新的电子,我目前正在遵循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

任何帮助都将不胜感激。谢谢!

vvppvyoh

vvppvyoh1#

也许我误解了,但是你可以用ctrl + shift + I来调出开发工具。
或者,如果你想通过编程来完成它,我的方法是在main.js文件中包含下面几行代码,然后传递给electron。

var app = require('app');
var BrowserWindows = require('browser-window');
    
app.on('ready', function(){
    mainWindow = new BrowserWindow({width:800, height:600});
    mainWindow.webContents.openDevTools();
}

我相信你的部分问题可能是你没有等待应用程序准备好,然后才尝试用它做一些事情。

ufj5ltwl

ufj5ltwl2#

因此,在您完成以下要求之后:

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

我希望这对你有帮助。我也是新来的电子!
如果您还需要对底层浏览器引擎进行一些配置,请参阅the docs

qmelpv7a

qmelpv7a3#

你可以像这样打开开发工具:

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

afdcj2ne4#

为了能够通过击键打开开发工具,我在index.html中添加了以下代码:

<script>
    // for electron
    if (typeof require !== 'undefined') {
        const currentWebContents = require('electron').remote.getCurrentWebContents();
        document.addEventListener('keyup', ({ key, ctrlKey, shiftKey, metaKey, altKey }) => {
            if (
                key === 'F12' ||
                (ctrlKey && shiftKey && key === 'I') ||
                (metaKey && altKey && key === 'i')
            ) {
                currentWebContents.openDevTools();
            }
        });
    }
</script>

请注意,这允许生产电子应用程序的任何用户使用常用键盘快捷键访问开发工具(功能:F12或ctrl + shift + i(在PC上),cmd + option + i(在Mac上))。
有一件事对我来说起作用,那就是把它传递给BrowserWindow构造函数:

webPreferences: {
    devTools: true
}
np8igboo

np8igboo5#

很有可能,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"
m1m5dgzv

m1m5dgzv6#

应用程序的名称是包含所有应用程序树的文件夹的名称。因此,要执行,你必须写,例如,如果你的文件夹名为Electron;

electron Electron

总是在提示路径,你的文件夹所在.希望这有帮助.
(抱歉,我的英语有点生疏)

oxcyiej7

oxcyiej77#

以下是适用于Electron〉= 1.2.1版本的解决方案
1-在应用程序文件夹中

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

2-打开你的电子应用程序,点击(查看/切换开发者工具)。在控制台选项卡中插入以下代码并按回车键

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

3-重新加载/刷新你的电子应用页面,你会看到react dev工具出现。
4-成交!

请参见下面的屏幕截图

kd3sttzy

kd3sttzy8#

我知道这可能不是如何安装devtools,但我发现alert是重新布线的electron的webviews。这意味着,任何时候你都可以拍摄这个看到简单的风格。

alert('123')

对于复杂的东西,我相信webview也有一个executeJavascript函数,也许你可以在那里运行console.log

bkhjykvo

bkhjykvo9#

使用mainWindow.removeMenu()时,按F12打开DevTools

ctrl + shift + i仅在未删除电子菜单时有效。当您使用mainWindow.removeMenu()删除菜单时,您可以将其添加到主进程代码中,以便仍然能够使用F12打开devtools。要使用F12关闭devTools,您必须首先单击电子应用程序,以便devtools窗口失去焦点。

myBrowserWindow.webContents.on('before-input-event', (_, input) => {
    if (input.type === 'keyDown' && input.key === 'F12') {
      myBrowserWindow.webContents.isDevToolsOpened()
        ? myBrowserWindow.webContents.closeDevTools()
        : myBrowserWindow.webContents.openDevTools({ mode: 'left' });
    }
  });

如果您不需要更改devTools open mode,您可以通过将其替换为以下内容来简化if的内部部分:

myBrowserWindow.webContents.toggleDevTools();

对于mode: 'detach',再次按f12将不会关闭分离的窗口,因此您可以将if的内部替换为:

myBrowserWindow.webContents.openDevTools({ mode: 'detach' });

资料来源https://www.electronjs.org/docs/latest/tutorial/keyboard-shortcuts#intercepting-events-in-the-main-process

相关问题