大前端学习第四课：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的语法，这个配置项用排配置执行参数的。

这个时候，就能够啦。

今天分享就到这结束了。谢谢。