debugger for chrome 使用

你是不是更我一样安装过 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 没有很大用处，这种调试直接在浏览器的调试中也可以做到