vue如何debugger

vue官方提供了两种debugger的方式：1.使用 Vue Devtools 插件，该方式需要安装翻墙插件才可以； 2 在vscode软件上安装 Debugger for Chrome 插件进行调试。

以下是 Debugger for Chrome 插件的安装和使用方式

1. 打开vscode软件，点击左边的扩展插件，安装 Debugger for Chrome

2. 按住键盘上的ctrl + shift + d 快捷键，选择创建Chrome类型的一个launch.json文件

 3. 打开launch.json文件，输入如下代码，也可以去vue官网进行复制 VS Code 中调试 — Vue.js

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

解释下对应字段：

type  是你调试类型，现在我们使用Chrome浏览器调试，所以选择 Chrome

name  调试名称，随你起名字，这个可以随意

file  本地文件路径，调试本地文件（ workspaceRoot 是项目根目录），由于没有具体调试那个文件，案例中调试的是src下的所有文件

url  调试的地址

4  使用npm run dev 运行项目

 

5  项目运行好后回到vscode页面，按键盘上的F5，这时候即可看到浏览器会自动打开一个新的网页，地址就是刚刚输入的url地址。

 6.  回到vscode软件，在需要断点的地方鼠标左键点击一下，即可看到一个小圆圈，表示断点成功。

 

 7. 在页面上点击对应的操作，即可看到页面已经进入断点状态