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

vue如何debugger相关推荐

vue项目debugger调试看不到源码
在搭建vue项目时,在vue文件里面输入debugger后,在浏览器点击操作发现可以进入断点,但显示的是已经压缩好的代码,无法看到源码. 在网上查了好多文件都说添加 devtool: "so ...
Vue - 允许浏览器进行debugger调试
打开项目的vue.config.js,修改configureWebpack,添加 devtool: '#eval-source-map', 完整配置代码 configureWebpack: {name ...
工作145:vue里面取消console和debugger
开发过程中,经常需要使用console.log.console.info.alert等操作来输出内容,测试代码,而在生产环境之中,这些打印的东西最好是不要显示.特别是用户名.密码相关. 一个个去删除. ...
vue打包后过滤console.log和debugger
vue-cli搭建的项目在build下的webpack.prod.conf.js下添加如下代码 new webpack.optimize.UglifyJsPlugin({compress: {war ...
vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
[Vue.js进阶]从源码角度剖析vue-router（三）
前言在上篇中主要叙述了 vue-router 中生成 $route 对象的时机,路由懒加载的原理,以及异步路由之前执行的一系列路由守卫在本篇中会讲述: 异步路由解析成功后执行的一系列路由守卫 vu ...
mysql vue 菜谱_vue+ java 实现多级菜单递归效果
效果如图: 大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可.有两个需要关注的点: 1.官方事例的数据结构是一个对象里面包含着集合,而不是一 ...
前端代码规范(es6,eslint,vue)
2019独角兽企业重金招聘Python工程师标准>>> 前端开发规范一.HTML 1.语义化标签 HTML5 提供了很多语义化元素,更好地帮助描述内容.希望你能从这些丰富的标签库中 ...
RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
vue.js环境安装
1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所有就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...

vue如何debugger

vue如何debugger相关推荐

最新文章

热门文章