Atom Electron-检测开发工具准备就绪 [英] Atom Electron - Detect Dev Tools ready
问题描述
此问题与Chromium / Node.js（ Atom Electron ，节点Webkit 等），而不是基于Chrome浏览器的应用。
This issue relates to Chromium/Node.js (Atom Electron, Node Webkit, etc) based apps and not Chrome browser based apps.
调试启动代码时对于使用Chromium和Node.js的程序而言，在调用开发工具与它完全完全启动之间存在相当长的延迟，包括执行断点的能力。这意味着，为了调试应用程序的启动逻辑（在调用开发工具，插入或存储断点后立即发生），不会为此启动代码触发。
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. 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.
我发现的唯一解决方法是使用 setTimeout（continueBootLogic（），< time>）添加临时超时，将启动逻辑的启动推迟到我假设之后Dev Tools已完全加载。
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.
Electron中有一个现有事件 MainWindow.on（'devtools-opened'，function（）{...}）在开发工具打开时但在断点引擎启动之前触发。使用此事件可以使我更及时地接近实际的准备时间，但我仍然需要超时来等待更多时间。
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. 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?
具有此功能将极大地帮助调试Electron和nw.js中的启动代码，因此我可以花更多的时间使用新的API。
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.
以下是一个示例电子程序：
Here is a sample Electron program:
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 c。
Put all files in the same folder and To run, have electron installed and run electron . in the same folder as package.json.
调整 测试，renderer.html中的iWaitTimeout。
To tweak the tests, iWaitTimeout in renderer.html.
围绕逻辑的工作将超时设置为100毫秒。可以在我的系统上进行压缩，但可能取决于计算机和负载。 IMO非常混乱。
My work around logic sets timeout to 100 milliseconds. This can be squeezed on my system but its likely computer and load dependent. Pretty messy solution IMO.
如果发生类似devtools-breakpoint-ready或类似事件的事件，那真是太棒了。上面的逻辑可能会有所优化。我昨晚才开始使用Electron。
Would be awesome to have an event fire like devtools-breakpoint-ready or something similar. The logic above can likely be optimized a bit. I just started using Electron last night. Same issue is with Node Webkit.
推荐答案
您可以使用以下方法检测何时打开开发工具：
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-检测开发工具准备就绪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
