大前端学习第四课:vocode调试技巧

751 阅读1分钟

今天主要分享我刚刚学到的两个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的语法,这个配置项用排配置执行参数的。

这个时候,就可以啦。

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