这篇文章将为大家详细讲解有关使用VSCode调试Electron主进程的步骤是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
搭建环境
本文所使用的项目是 electron-quick-start 。
$ git clone https://github.com/electron/electron-quick-start$ cd ./electron-quick-start$ npm install
经过以上步骤就搭建好了基本 Electron 应用开发环境。查看 package.json:
{ "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron ." }, "repository": "https://github.com/electron/electron-quick-start", "keywords": [ "Electron", "quick", "start", "tutorial", "demo" ], "author": "GitHub", "license": "CC0-1.0", "devDependencies": { "electron": "16.0.6" }}
我们可以在终端运行 npm run start 来查看运行结果:
可以看到,环境搭建已经大功告成!接下来进入开发调试环节。
文档
官网说明 使用 VSCode 进行主进程调试
点击vscode中的调试按钮,或者按F5
他会提示你进行配置,会产生一个lauch.json文件,如下图
或者直接新建也行
在当前项目下面新建
.vscode
文件夹在这个
.vscode
里面新建launch.json
文件在
launch.json
文件里面输入下面内容
在lauch.json输入如下内容
{ "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "args" : ["."], "outputCapture": "std" } ]}
调试
在主程序main.js
中打断点,然后按F5
进行调试,如下图
渲染进程
这就不用说了吧。。。。直接在chrome的控制台打断点~~~~~~~~~
vscode有什么用
Visual Studio Code 是一个运行于 OS X,Windows和 Linux 之上的,针对于编写现代 web 和云应用的跨平台编辑器,它为开发者们提供了对多种编程语言的内置支持,并且正如 Microsoft 在Build 大会的 keynote 中所指出的,这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。
关于使用VSCode调试Electron主进程的步骤是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。