Atom Electron-检测开发工具准备就绪

Question

This issue relates to Chromium/Node.js ( Atom Electron , Node Webkit , etc) based apps and not Chrome browser based apps. 此问题与基于Chromium / Node.js（ Atom Electron ， Node Webkit等）的应用有关，而不与基于Chrome浏览器的应用有关。

When debugging the boot code of a program that uses Chromium and Node.js, there is a significant delay between the time that Dev Tools is invoked and it actually starts up fully, including the ability to execute break points. 在调试使用Chromium和Node.js的程序的启动代码时，在调用开发工具与实际完全启动之间存在相当长的延迟，包括执行断点的能力。 This means that in order to debug boot logic of an app, which occurs immediately after Dev Tools is invoked, inserted or stored breakpoints don't fire for this boot code. 这意味着，为了调试应用程序的启动逻辑（在调用开发工具，插入或存储断点后立即发生），不会为此启动代码触发。

The only workaround I have found is to add an adhoc timeout using setTimeout(continueBootLogic(), <time>) to defer starting of my boot logic for a until after I assume that Dev Tools is fully loaded. 我发现的唯一解决方法是使用setTimeout(continueBootLogic(), <time>)添加临时超时setTimeout(continueBootLogic(), <time>)将启动逻辑的启动推迟到我假设Dev Tools已完全加载之后。

There is an existing event in Electron MainWindow.on('devtools-opened', function() {...}) fires when dev tools opens but before the break point engine has booted. Electron MainWindow.on('devtools-opened', function() {...})存在一个现有事件MainWindow.on('devtools-opened', function() {...})在开发工具打开时但在断点引擎启动之前触发。 Using this event gets me closer in time to the actual ready moment but I still need a crummy timeout to wait a bit more. 使用此事件可以使我更及时地接近实际的准备时间，但是我仍然需要超时来等待更多时间。

Has anybody found a way to precisely and elegantly detect when dev tools is ready to start detecting and executing break points in the code? 有没有人找到一种方法来精确，优雅地检测开发工具何时准备开始检测和执行代码中的断点？

Having this would greatly help efforts to debug boot code in Electron and nw.js so I can spend more time playing around with new APIs. 有了这个功能，将大大有助于调试Electron和nw.js中的启动代码，因此我可以花更多的时间来试用新的API。

Here is a sample Electron program: 这是一个示例电子程序：

package.json: 的package.json：

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

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: 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>

Put all files in the same folder and To run, have electron installed and run electron . 将所有文件放在同一文件夹中，要运行，请先安装electronic并运行electron . in the same folder as package.json. 与package.json在同一文件夹中。

To tweak the tests, iWaitTimeout in renderer.html. 要调整测试，请在renderer.html中使用iWaitTimeout。

My work around logic sets timeout to 100 milliseconds. 我的逻辑工作将超时设置为100毫秒。 This can be squeezed on my system but its likely computer and load dependent. 可以在我的系统上进行压缩，但可能取决于计算机和负载。 Pretty messy solution IMO. 相当混乱的解决方案IMO。

Would be awesome to have an event fire like devtools-breakpoint-ready or something similar. 发生像devtools-breakpoint-ready或类似的东西会引起火灾。 The logic above can likely be optimized a bit. 上面的逻辑可能会有所优化。 I just started using Electron last night. 我昨晚刚开始使用Electron。 Same issue is with Node Webkit. Node Webkit也存在同样的问题。

Answer 1

you can detect when dev tool is opened using this: 您可以使用以下命令检测何时打开开发工具：

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 个解决方案

解决方案1
2 2016-06-14 14:10:45

Atom Electron-检测开发工具准备就绪

问题描述

1 个解决方案

解决方案1 2 2016-06-14 14:10:45

解决方案1
2 2016-06-14 14:10:45