詳解如何在vscode里面調(diào)試js和node.js的方法步驟

在開發(fā)的過(guò)程中，幾乎不可能一次性就能寫出毫無(wú)破綻的程序，斷點(diǎn)調(diào)試代碼是一個(gè)普遍的需求。

作為前端開發(fā)工程師，以往我們開發(fā)的JavaScript程序都運(yùn)行在瀏覽器端，利用Chrome提供的開發(fā)者工具就可以方便的進(jìn)行源碼斷點(diǎn)調(diào)試。其步驟有四，詳情不表，粗略概括如下：

1.打開Chrome開發(fā)者工具；
2.點(diǎn)擊進(jìn)入Sources標(biāo)簽頁(yè)，在頁(yè)面的左側(cè)就能看到JS代碼的目錄；
3.找到需要設(shè)置斷點(diǎn)的源文件，在需要中斷的哪行代碼左側(cè)單擊鼠標(biāo)左鍵，就可以設(shè)置斷點(diǎn)，如果你的代碼是uglify過(guò)的，則需導(dǎo)入相應(yīng)的source-map來(lái)映射源碼。
4.刷新頁(yè)面（如果設(shè)置斷點(diǎn)的位置是一個(gè)事件處理函數(shù)，則直接觸發(fā)這個(gè)事件即可），代碼運(yùn)行到斷點(diǎn)處的時(shí)候，程序就會(huì)掛起，這時(shí)候用鼠標(biāo)hover就可以查看當(dāng)前各個(gè)變量的數(shù)值，并以此判斷程序是否正常運(yùn)行了。

但是，當(dāng)我們用JavaScript開發(fā)運(yùn)行在服務(wù)端的Node.js程序時(shí)，Chrome開發(fā)者工具暫時(shí)派不上用場(chǎng)了。雖然也有辦法實(shí)現(xiàn)在Chrome上調(diào)試，不過(guò)這不是今天我們討論的范圍。

還有，說(shuō)用console.log的那位同學(xué)，請(qǐng)你先不要說(shuō)話…

實(shí)際上，許多IDE都集成了Debug的功能，包括較新版本的WebStorm就對(duì)Node.js調(diào)試支持得很好。

但是很多開發(fā)人員會(huì)覺(jué)得IDE太重，有沒(méi)有更輕量級(jí)一些的工具來(lái)實(shí)現(xiàn)斷點(diǎn)調(diào)試呢？今天就要給大家安利一下在VScode上進(jìn)行斷點(diǎn)調(diào)試的方法。

一般大家調(diào)試都是在瀏覽器端調(diào)試js的，不過(guò)有些時(shí)候也想和后臺(tái)一樣在代碼工具里面調(diào)試js或者node.js，下面介紹下怎樣在vscode里面走斷點(diǎn)。

1，用來(lái)調(diào)試js

一：在左側(cè)擴(kuò)展中搜索Debugger for Chrome并點(diǎn)擊安裝：

二：在自己的html工程目錄下面點(diǎn)擊f5,或者在左側(cè)選擇調(diào)試按鈕

，在上方

，選擇下拉按鈕，會(huì)有一個(gè)添加，選擇chrome

3：之后會(huì)出現(xiàn)laungh.json的配置文件在自己的項(xiàng)目目錄下面

4：不過(guò)對(duì)于不同的代碼文件要調(diào)試的話，每次都需要修改一下配置文件

{
  "version": "0.2.0",
  "configurations": [{
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch index.html (disable sourcemaps)",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": false,
      "file": "${workspaceRoot}/jsTest/test1/test1.html" #每次需要修改這里的文件地址
    }
  ]
}

5：到這里就可以進(jìn)行調(diào)試了，在

中選擇 Launch index.html (disable sourcemaps) 調(diào)試項(xiàng)，按f5調(diào)試，會(huì)出現(xiàn),同時(shí)打開goole瀏覽器，點(diǎn)擊

，即可進(jìn)入調(diào)試階段

2，用來(lái)調(diào)試node.js

調(diào)試nodejs有很多方式，可以看這一篇 https://blog.risingstack.com/how-to-debug-nodej-js-with-the-best-tools-available/，

其中我最喜歡使用的還是V8 Inspector和vscode的方式。

在vscode中，點(diǎn)擊那個(gè)蜘蛛的按鈕

就能看出現(xiàn)debug的側(cè)欄，接下來(lái)添加配置

選擇環(huán)境

就能看到launch.json的文件了。

啟動(dòng)的時(shí)候，選擇相應(yīng)的配置，然后點(diǎn)擊指向右側(cè)的綠色三角

launch模式與attach模式

{
 "version": "0.2.0",
 "configurations": [
  {
   "type": "node",
   "request": "launch",
   "name": "Launch Program",
   "program": "${workspaceRoot}/index.js"
  },
  {
   "type": "node",
   "request": "attach",
   "name": "Attach to Port",
   "address": "localhost",
   "port": 5858
  }
 ]
}

當(dāng)request為launch時(shí)，就是launch模式了，這是程序是從vscode這里啟動(dòng)的，如果是在調(diào)試那將一直處于調(diào)試的模式。而attach模式，是連接已經(jīng)啟動(dòng)的服務(wù)。比如你已經(jīng)在外面將項(xiàng)目啟動(dòng)，突然需要調(diào)試，不需要關(guān)掉已經(jīng)啟動(dòng)的項(xiàng)目再去vscode中重新啟動(dòng)，只要以attach的模式啟動(dòng)，vscode可以連接到已經(jīng)啟動(dòng)的服務(wù)。當(dāng)調(diào)試結(jié)束了，斷開連接就好，明顯比launch更方便一點(diǎn)。

在debug中使用npm啟動(dòng)

很多時(shí)候我們將很長(zhǎng)的啟動(dòng)命令及配置寫在了package.json的scripts中，比如

"scripts": {
 "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
 "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},

我們希望讓vscode使用npm的方式啟動(dòng)并調(diào)試，這就需要如下的配置

{
 "name": "Launch via NPM",
 "type": "node",
 "request": "launch",
 "runtimeExecutable": "npm",
 "runtimeArgs": [
  "run-script", "dev"  //這里的dev就對(duì)應(yīng)package.json中的scripts中的dev
 ],
  "port": 9229  //這個(gè)端口是調(diào)試的端口，不是項(xiàng)目啟動(dòng)的端口
},

在debug中使用nodemon啟動(dòng)

僅僅使用npm啟動(dòng)，雖然在dev命令中使用了nodemon，程序也可以正常的重啟，可重啟了之后，調(diào)試就斷開了。所以需要讓vscode去使用nodemon啟動(dòng)項(xiàng)目。

{
 "type": "node",
 "request": "launch",
 "name": "nodemon",
 "runtimeExecutable": "nodemon",
 "args": ["${workspaceRoot}/bin/www"],
 "restart": true,
 "protocol": "inspector",  //相當(dāng)于--inspect了
 "sourceMaps": true,
 "console": "integratedTerminal",
 "internalConsoleOptions": "neverOpen",
 "runtimeArgs": [  //對(duì)應(yīng)nodemon --inspect之后除了啟動(dòng)文件之外的其他配置
  "--exec",
  "babel-node",
  "--presets",
  "env"
 ]
},

注意這里的runtimeArgs，如果這些配置是寫在package.json中的話，就是這樣的

nodemon --inspect --exec babel-node --presets env ./bin/www

這樣就很方便了，項(xiàng)目可以正常的重啟，每次重啟一樣會(huì)開啟調(diào)試功能。

可是，我們并不想時(shí)刻開啟調(diào)試功能怎么辦？

這就需要使用上面說(shuō)的attach模式了。

使用如下的命令正常的啟動(dòng)項(xiàng)目

nodemon --inspect --exec babel-node --presets env ./bin/www

當(dāng)我們想要調(diào)試的時(shí)候，在vscode的debug中運(yùn)行如下的配置

{
 "type": "node",
 "request": "attach",
 "name": "Attach to node",
 "restart": true,
 "port": 9229
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。