2

此问题与基于 Chromium/Node.js（Atom Electron、Node Webkit等）的应用程序有关，与基于 Chrome 浏览器的应用程序无关。

在调试使用 Chromium 和 Node.js 的程序的启动代码时，在调用 Dev Tools 和它实际完全启动之间存在显着延迟，包括执行断点的能力。这意味着为了调试应用程序的启动逻辑，在调用开发工具后立即发生，插入或存储的断点不会为此启动代码触发。

我发现的唯一解决方法是添加一个临时超时setTimeout(continueBootLogic(), <time>)，用于将启动逻辑的启动推迟到我假设开发工具已完全加载之后。

MainWindow.on('devtools-opened', function() {...})当开发工具打开但断点引擎启动之前，Electron fires 中存在一个现有事件。使用这个事件让我更接近实际的准备时刻，但我仍然需要一个糟糕的超时来等待更多。

有没有人找到一种方法来精确而优雅地检测开发工具何时准备好开始检测和执行代码中的断点？

拥有这将极大地帮助调试 Electron 和 nw.js 中的启动代码，这样我就可以花更多的时间来玩新的 API。

这是一个示例电子程序：

包.json：

{
  "name"    : "DevToolsWait",
  "version" : "0.2.0",
  "main"    : "main.js"
}

主.js：

'use strict'
const electron = require('electron')

console.log('Electron version: '+process.versions['electron'])

electron.app.on('ready', ()=>{
  var bw = new electron.BrowserWindow({width: 800, height: 600});

  // Load renderer.html
  bw.loadURL('file://' + __dirname + '/renderer.html');

  // Open the devtools.
  bw.webContents.openDevTools();


  // Handle devtools opened event
  bw.webContents.on('devtools-opened', ()=>{
    console.log("devtools-opened event called!")
    setImmediate(()=>{
        console.log("dev tools is now open (not sure if breakpoints work yet)!")
        // Send IPC call to main process that devtools is open
        bw.webContents.send('devtools-opened');
    });
  });


});

索引.html：

<!DOCTYPE html>
<html>
  <head>
    <title>DevToolsWait Test!</title>
  </head>
  <body>

    <script>
        // Set this to 0 to get no timeout. 100ms seems to work on Linux with 1.2.1
        // Had to set as long as 1000ms to get it to work with older versions
        const iWaitTimeout = 100

        const electron = require('electron');


        // listen for Dev Tools opening event
        // Still have to wait a bit for break point engine to run
        electron.ipcRenderer.on('devtools-opened', function(){
            console.log('devtools-opened ipc called')
            // Start main logic

            if(iWaitTimeout==0){
                console.log('booting without timeout')
                bootGUI()

            } else {
                console.log('booting with timeout')
                setTimeout(bootGUI, 100)

            }

        });

        // Renderer process bootstrap logic
        function bootGUI(){
            console.log('bootGUI called')

            // Inserting ad-hoc debugger call. This should fire no matter what
            debugger;

            // ... doing other stuff

            if(iWaitTimeout===0){
                window.document.body.innerHTML+="If you see this message before debugger command line stops the code in the DevTools, then it failed. DevTools loaded event fired before the debugger is ready to handle breakpoints :(<br><br> Otherwise, woohoo!"
            } else {
                window.document.body.innerHTML+="If you see this message before debugger breaks, Then the timeout test failed. Maybe you should tweak the timeout to be a little longer to allow dev tools debugger time to warm up. see line with setTimeout(...) in renderer.html"
            }

        }



    </script>
  </body>
</html>

将所有文件放在同一个文件夹中并运行，安装电子并electron .在与 package.json 相同的文件夹中运行。

为了调整测试，renderer.html 中的 iWaitTimeout。

我在逻辑方面的工作将超时设置为 100 毫秒。这可以在我的系统上压缩，但它可能取决于计算机和负载。相当混乱的解决方案 IMO。

像 devtools-breakpoint-ready 或类似的东西触发事件会很棒。上面的逻辑可能会稍微优化一下。我昨晚刚开始使用 Electron。Node Webkit 也有同样的问题。

4

1 回答 1

3

您可以使用以下方法检测开发工具何时打开：

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();
    });
});
于 2016-06-14T14:10:45.723 回答