この問題は、Chrome ブラウザー ベースのアプリではなく、Chromium/Node.js ( Atom Electron、Node Webkitなど) ベースのアプリに関連しています。
Chromium と Node.js を使用するプログラムのブート コードをデバッグする場合、Dev Tools が呼び出されてから、ブレーク ポイントを実行する機能を含め、実際に完全に起動するまでにかなりの遅延があります。これは、Dev Tools が呼び出された直後に発生するアプリのブート ロジックをデバッグするために、挿入または保存されたブレークポイントがこのブート コードに対して起動しないことを意味します。
私が見つけた唯一の回避策は、アドホック タイムアウトを追加してsetTimeout(continueBootLogic(), <time>)、Dev Tools が完全に読み込まれると想定した後まで、ブート ロジックの開始を延期することです。
MainWindow.on('devtools-opened', function() {...})開発ツールが開いたときにブレークポイントエンジンが起動する前に、Electron が起動する既存のイベントがあります。このイベントを使用すると、実際の準備ができた瞬間に近づくことができますが、もう少し待つにはまだ面倒なタイムアウトが必要です。
開発ツールがコード内のブレークポイントの検出と実行を開始する準備ができたことを正確かつエレガントに検出する方法を見つけた人はいますか?
これがあれば、Electron と nw.js でブート コードをデバッグする作業に大いに役立つため、新しい API をいじる時間を増やすことができます。
サンプルの Electron プログラムは次のとおりです。
パッケージ.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 をインストールしてelectron .、package.json と同じフォルダーで実行します。
テストを微調整するには、renderer.html の iWaitTimeout を使用します。
私の回避策のロジックでは、タイムアウトを 100 ミリ秒に設定しています。これは私のシステムでは圧迫される可能性がありますが、コンピューターと負荷に依存する可能性があります。かなり厄介なソリューションIMO。
devtools-breakpoint-ready などのようなイベントが発生すると素晴らしいでしょう。上記のロジックは、少し最適化できる可能性があります。昨夜、Electron を使い始めました。Node Webkit にも同じ問題があります。