02.electron筆記:electron調試


調試渲染進程

調試渲染進程使用 Chrome 開發者工具,打開方式:

  • Ctr+Shift+I

  • 使用代碼打開:

       // Open the DevTools.
       mainWindow.webContents.openDevTools()
    

可能的問題:

  • 開發者工具提示:
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ security-warnings.ts:180

在main.js 中添加

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

調試主進程

Node Inspector

(略)

Visual Studio Code 中調試主進程

1 創建Build
在VSC中頂部菜單欄中選擇"終端\配置任務",在彈出框中,選擇“npm:start”,這時,VSC自動生成 tasks.json文件:

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm",
			"script": "start",
			"problemMatcher": [],
			"label": "npm: start",
			"detail": "electron ."
		}
	]
}

2 創建 launch任務
在VSC左側Debug欄,點擊‘創建launch.json’文件,在彈出框中選擇‘Node.js’,這時,VSC自動生成launch.json文件:

{
    // 使用 IntelliSense 了解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啟動程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\main.js"
        }
    ]
}

把上面的文件清空。

修改為:

{
  // 使用 IntelliSense 了解相關屬性。 
  // 懸停以查看現有屬性的描述。
  // 欲了解更多信息,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "啟動程序",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },

      "args": ["."]
    }
  ]
}

或者

自動生成:

{
    // 使用 IntelliSense 了解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron Main",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "program": "${workspaceFolder}/main.js",
            "skipFiles": [
                "<node_internals>/**"
            ]
        }
    ]
}

3 調試主進程(main.js)

​ 在主進程(main.js)中打一個斷點,然后按F5,即可運行調試了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM