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