淺談VSCode中怎么調(diào)試Electron應(yīng)用的主進(jìn)程代碼

VSCode中怎么調(diào)試Electron應(yīng)用的主進(jìn)程代碼？下面本篇文章就來(lái)給大家介紹一下VSCode 調(diào)試方法，希望對(duì)大家有所幫助！

在開發(fā) Electron 應(yīng)用的時(shí)候，為了提高工作效率，我們需要借助于調(diào)試工具，及時(shí)發(fā)現(xiàn)并解決問(wèn)題。

VSCode 作為當(dāng)下最流行的代碼編輯器，我絕大部分的代碼都是在它上面開發(fā)的，Electron 應(yīng)用也不例外。今天，我來(lái)分享一下怎么在 VSCode 上調(diào)試 Electron 應(yīng)用的主進(jìn)程代碼。【推薦學(xué)習(xí)：《vscode入門教程》】

本文所述步驟是基于已經(jīng)熟悉或知曉 VSCode 調(diào)試方法的，請(qǐng)按需食用！

搭建環(huán)境

本文所使用的項(xiàng)目是 electron-quick-start （https://github.com/electron/electron-quick-start#/）。

$ git clone https://github.com/electron/electron-quick-start $ cd ./electron-quick-start $ npm install

經(jīng)過(guò)以上步驟就搭建好了基本 Electron 應(yīng)用開發(fā)環(huán)境。查看 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"   } }

我們可以在終端運(yùn)行 npm run start 來(lái)查看運(yùn)行結(jié)果：

可以看到，環(huán)境搭建已經(jīng)大功告成！接下來(lái)進(jìn)入開發(fā)調(diào)試環(huán)節(jié)。

調(diào)試配置

使用 VSCode 打開 ，做如下操作：

生成如下配置的 lauch.json 文件：

{     // 使用 IntelliSense 了解相關(guān)屬性。      // 懸停以查看現(xiàn)有屬性的描述。     // 欲了解