Atom电子 – 检测开发工具准备就绪
这个问题涉及到基于Chromium / Node.js（ Atom Electron ， Node Webkit等）的应用程序，而不是基于Chrome浏览器的应用程序。
在debugging使用Chromium和Node.js的程序的启动代码时，Dev Tools被调用的时间与实际启动时间（包括执行中断点的能力）之间存在显着的延迟。 这意味着，为了debugging应用程序的引导逻辑，在开发工具被调用后立即执行，插入或存储的断点不会触发此引导代码。
我发现唯一的解决方法是使用setTimeout(continueBootLogic(), <time>)添加一个adhoc超时setTimeout(continueBootLogic(), <time>)以推迟启动我的启动逻辑，直到我假设开发工具已完全加载。
电子MainWindow.on('devtools-opened', function() {...})存在一个事件，当开发工具打开但断点引擎启动之前触发。 使用这个事件可以让我更接近实际的准备时间，但是我仍然需要一个糟糕的超时等待更多的时间。
有没有人find一种方法来精确检测开发工具是否准备好开始在代码中检测和执行断点？
有了这个将大大有助于在Electron和nw.js中debugging启动代码，这样我就可以花更多的时间玩弄新的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>
把所有的文件放在同一个文件夹下运行，有电子安装运行electron . 与package.json位于同一个文件夹中。
调整testing，在renderer.html中的iWaitTimeout。
我的逻辑工作将超时设置为100毫秒。 这可以挤在我的系统上，但它的计算机和负载依赖。 相当混乱的解决schemeIMO。
会有像devtools-breakpoint-ready或类似的事件发生的事件真棒。 上面的逻辑可能会被优化一下。 我昨天刚开始使用Electron。 Node Webkit也是同样的问题。
你可以使用这个来检测何时开启工具：
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(); }); });