网站开发 瀑布结构,大闸蟹公司宣传册设计样本,哪有宝安网站推广,网页设计属于什么行业Electron 是一个基于 Node.js 和 Chromium 的开源框架#xff0c;用于构建桌面应用#xff0c;开发者可以使用 web 技术(HTML#xff0c;JavaScript 和 CSS)完成整个应用的开发。许多知名桌面应用基于 Electron 实现#xff0c;如 VSCode#xff0c;Slack 和 GitHub Deskt…Electron 是一个基于 Node.js 和 Chromium 的开源框架用于构建桌面应用开发者可以使用 web 技术(HTMLJavaScript 和 CSS)完成整个应用的开发。许多知名桌面应用基于 Electron 实现如 VSCodeSlack 和 GitHub Desktop 等。本文将介绍调试 Electron 应用的一些常用方法。开发环境调试Electron 应用进程分为主进程和渲染进程其底层实现分别对应于 Node.js 和 Chromium。所以调试 Electron 应用的方式也基本等价于这两者的结合目前社区提供的方案已经比较完善了。调试主进程Electron 主进程是一个 Node.js 进程。Node.js 在 8 之后引入了 --inspect 参数用于调试同样也适用于 Electron 主进程./node_modules/.bin/electron . --inspect默认会监听 9229 端口应用启动后在 Chrome 浏览器(或其他基于 Chromium 开发的浏览器)中打开 chrome://inspect 即可看到对应的调试会话点击会话链接即可打开 devtools 进行调试。另外可以在命令行参数中指定端口号实现同时调试多个应用中的多个进程而不产生冲突./node_modules/.bin/electron . --inspect1234调试渲染进程仅从调试的角度来看Electron 的渲染进程可以简单地理解为是 Chromium 的一个窗口。所以基本和 Chrome 浏览器中的调试网页方式是一致的即 focus 到当前窗口后使用 CtrlShiftI(macOS 下是 CmdOptionI)快捷键即可打开 devtools。使用上也是一致的。快捷键的方式在某些特殊情况下可能无法达到预期效果比如窗口是隐藏的无法 focus 到窗口。此时可以在代码中使用 Electron 提供的 JavaScript API 来打开 devtoolsconst mainWindow new BrowserWindow()mainWindow.loadURL(file://path/of/index.html)mainWindow.webContents.openDevTools()上述演示代码会在加载 HTML 文件之后执行打开 devtools 的操作。在实际使用中将其放置到需要的位置即可。在 VSCode 中调试上述方法均会打开 devtools 界面所有的调试操作均在 devtools 中进行。对于某些操作比如代码断点调试可以进一步与编辑器或 IDE 相结合提升开发体验。以下将简要介绍如何在 VSCode 进行调试。以 Electron 官方的模板 electron-quick-start 为例首先需要为 VSCode 安装一个扩展Debugger for Chrome(用于调试渲染进程)。克隆代码仓库到本地并安装依赖git clone https://github.com/electron/electron-quick-start.gitcd electron-quick-startnpm install然后在仓库中添加文件 .vscode/launch.json内容如下{version: 0.2.0,configurations: [{type: node,request: launch,name: Main,runtimeExecutable: ${workspaceFolder}/node_modules/.bin/electron,runtimeArgs: [--remote-debugging-port9222, .],windows: {runtimeExecutable: ${workspaceFolder}/node_modules/.bin/electron.cmd}},{name: Renderer,type: chrome,request: attach,port: 9222,webRoot: ${workspaceFolder}}],compounds: [{name: All,configurations: [Main, Renderer]}]}然后在 VSCode 左侧选择 debug 面板启动 All 这一项开始调试此时就可以在 main.js 或 renderer.js 文件中添加断点了配置文件中的一些要点解释如下configurations 中的两项分别对应主进程和渲染进程。compounds 中指定了一个组合会话 All选择 All 将会同时启动这两个会话。Renderer 配置中的 webRoot 参数直接使用了 ${workspaceFolder}是因为在这个工程中HTML 引用的静态资源位于根目录下。实际使用的时候需要更新到对应的路径才会生效。实际开发中可能会有编译的流程比如使用 TypeScript 配合打包工具 Webpack最终生成的代码与源代码并不在一个路径下。这种情况下需要产出 source map 来建立映射关系。生产环境调试生产环境的情况比开发环境要复杂一些。一般来说我们希望有一个入口可以打开 devtools以便在出现问题的时候能够方便调试而另一方面这个入口与产品本身无关我们希望它对用户隐藏。一个比较常见的方案是指定一套私有的快捷键监听对应事件并在回调中调用 JavaScript API 来打开 devtools并将快捷键设置为复杂的组合以降低用户误触的概率。快捷键方案确实有一定可行性不过并没有从根本上解决这个问题。所以这里推荐使用 Debugtron 进行调试。Debugtron 是一个调试生产环境 Electron 应用的工具无需在客户端集成任何代码。它本身也基于 Electron 构建支持多个平台。下载最新版本安装并打开 Debugtron 后会检测并展示所有已安装的 Electron 应用点击图标后会进入调试环节。以 Electron Fiddle 为例点击图标启动后面板左侧会显示可调试的会话列表包括主进程和渲染进程可以根据标签来区分。右侧会显示主进程启动的日志在左侧的会话列表中选择一项点击后会弹出对应的 devtools可以在其中看到错误日志并定位问题和开发环境完全一致。同时也支持调试多个应用启动多个应用后可以在 tab 区切换。总结Electron 的调试方案已经比较完善在开发环节主进程和渲染进程都能够很方便地打开 devtools 进行调试而且这个工作流还可以深度集成到 VSCode 中提升开发体验。对于生产环境的情况可以使用 Debugtron 进行调试无需在客户端集成额外的代码即可获得与开发环境基本一致的功能。
