3-配置主进程调试electron 在vscode下的断点调试与了解内容安全 <meta http-equiv="Con

electron 在vscode下的断点调试与了解内容安全

index.html 中加入meta的content内容

<meta http-equiv="Content-Security-Policy" content="default-src 'self';script-src 'self'"/>
- self 是自己的本地的
- 如果想用别的域名
  - <meta http-equiv="Content-Security-Policy" content="default-src 'self' xxx.com;script-src 'self'"/>
保存代码片段

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 避免 控制台报警告 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';script-src 'self'"/>
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

// 窗口管理 BrowserWindow -> 创建并控制浏览器窗口。
const { BrowserWindow, app } = require("electron");
const path = require('path');

app.whenReady().then(() => {
    // 主进程
    const mainWindow = new BrowserWindow({//配置窗口
        width: 300,
        height: 300,
        alwaysOnTop: true,//z-index在可视的桌面的最上层
        x: 700,//软件位置 x
        y: 100,//软件位置 y
    });

    mainWindow.loadFile(path.resolve(__dirname, 'index.html'))
})

在vscode里快速创建 launch.json文件
https://blog.csdn.net/weixin_40024174/article/details/122240887不会配置的查一下
配置如下

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron: Main",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "runtimeArgs": [
                "--remote-debugging-port=9223",
                "."
            ],
            "windows": {
                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            }
        },
        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "webRoot": "${workspaceFolder}",
            "timeout": 30000
        }
    ],
    "compounds": [
        {
            "name": "Electron: All",
            "configurations": [
                "Electron: Main",
                "Electron: Renderer"
            ]
        }
    ]
}

可以看到vscode里面的如下

调试

先开主线程
在开渲染线程