Question

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

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

我发现的唯一解决方法是使用setTimeout(continueBootLogic(), <time>)添加adhoc超时，以便在我假设Dev Tools已满载之后推迟启动我的启动逻辑。

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

有没有人找到一种方法来精确而优雅地检测dev工具何时可以开始检测并执行代码中的断点？

这有助于在Electron和nw.js中调试启动代码，这样我就可以花更多的时间来使用新的API。

以下是电子程序示例：

的package.json：

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

main.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');
    });
  });


});

的index.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>

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

调整renderer.html中的测试iWaitTimeout。

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

像devtools-breakpoint-ready或者类似的事件一样会引发事件真是太棒了。上面的逻辑可能会稍微优化一下。我刚刚开始使用Electron昨晚。 Node Webkit也存在同样的问题。

Answer 1

您可以使用以下方法检测开启工具的时间：

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

Atom Electron - 检测开发工具准备

1 个答案: