vscode真的什么插件都可以实现一些意想不到的功能呀,
调试js 是我们 进阶的一个必要途径,
如何调试js 呢, 在Chrome中那就不用说了, 那在vscode中呢,
这就需要我们借助插件来实现了, 但是插件,我们还需要配置好,才能在本地调试, 跟后端的几乎没有差别的效果,
在vscode的 run点击下拉箭头, 选择add ,即可添加配置
-
配置如下:
- 一个需要在html中调试的,
- 一个直接调试js文件的
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch", // 可以是attach和launch
"name": "调试 Chrome", // 此项配置的名字,显示在调试页的配置选择下拉框中。
"url": "http://localhost:8088", // chrome 自动启动时打开的网址(你开发环境的部署地址)。
"webRoot": "${workspaceFolder}", // 静态文件所在的本机目录(正常情况下就是项目根目录)。
"sourceMaps": true
},
{
"name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开
"type": "chrome",
"request": "launch",
"url": "${file}",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "nodeLauch", //单独调试js,即可以直接运行js
"type": "node",
"request": "launch",
"program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"preLaunchTask": "",
"sourceMaps": false,
"outDir": null
}
]
}