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

Question

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

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

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

Electron MainWindow.on('devtools-opened', function() {...})存在一个现有事件MainWindow.on('devtools-opened', function() {...})在开发工具打开时但在断点引擎启动之前触发。 使用此事件可以使我更及时地接近实际的准备时间，但是我仍然需要超时来等待更多时间。

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

有了这个功能，将大大有助于调试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>

将所有文件放在同一文件夹中，要运行，请先安装electronic并运行electron . 与package.json在同一文件夹中。

要调整测试，请在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 个解决方案

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