你是不是更我一样安装过 debugger for chrome
但是却不知道使用呢?
原来我是这么认为的:
我在做项目时,需要实现一个比较复杂的算法函数,我不敢保证我一次性写的完美,我先在桌面新建一个 index.html
然后在浏览器 debugger
一下。
那么 debugger for chrome
是不是可以满足我在vscode 中 直接 F5 然后帮我启动一个 server 以 index.html
的形式引用了我的 index.js
呢?以致于我后续不用每次都新建一个 html 文件,只要再当前 js 文件下 F5 就可以实现debuger。
然而,debugger for chrome
并不是这么给你用的~
安装完成 debugger for chrome
后需要配置 launch.json
,至于 launch.json
不知道在哪里找的,自己去面壁去(https://code.visualstudio.com/docs/editor/debugging#_launch-configurations)。
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
配置完成后,我使用 vite 创建了一个 vue3 的demo,启动项目后,我在 vscode 的 Home.vue 组件打了一个 debugger,如图:
你可以点击调用堆栈进入源码调试,比如我进入 useStore 函数看看代码是怎么走的。
个人见解:
debugger for chrome
没有很大用处,这种调试直接在浏览器的调试中也可以做到