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. 在页面上点击对应的操作,即可看到页面已经进入断点状态

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值