大前端學習第四課：vocode調試技巧

今天主要分享我剛剛學到的兩個vscode的調試技巧，來記錄一下。

目錄

1. webpack的調試
2. nodejs調試

webpack的調試

在此以前，我配置webpack一直用console.log();直到今天，我才發現這個神器。

npx node --inspect-brk ./node_modules/.bin/webpack --inline --progress

輸入這個命令後，會出現以下窗口：

而後，就是見證奇蹟的時刻了。

打開chrome瀏覽器。輸入以下地址。

chrome://inspect/#devices

點擊inspect.進入以下頁面：

是否是很眼熟？So，Happy起來吧。

nodejs調試

下面這個調試其實我以前是會用的，這裏記錄一下。（七月老師教的,哈哈,我是慕課七月和Brian老師的粉絲。）

{
      "type": "node",
      "request": "launch",
      "name": "nodemon",
      "runtimeExecutable": "nodemon",
      "program": "${workspaceFolder}/src/index.js",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "runtimeArgs": ["--exec", "babel-node"]
}
複製代碼

"runtimeExecutable": nodemon的位置，全局安裝直接寫nodemon就能夠了。

"runtimeArgs": 由於用了es6的語法，這個配置項用排配置執行參數的。

這個時候，就能夠啦。

今天分享就到這結束了。謝謝。