方式1:vue-devtools插件

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。

使用步骤

1、 到github下载:https://github.com/vuejs/vue-devtools

2、 在vue-devtools目录下安装依赖包

cd vue-devtools
cnpm install

3、 扩展Chrome插件

Chrome浏览器 > 更多程序 > 拓展程序

4、 vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了。

使用debugger和sourcemap调试Vue组件(重点)

针对vue-cli webpack官方脚手架,打开build/webpack.dev.conf.js文件,找到下面这句:

devtool: '#cheap-module-eval-source-map',

新版本也可在config/index.js中找到,注意是在开发环境里(dev),

修改为:

devtool: '#eval-source-map',

好了,一不小心要改的配置已经改完了~

使用:

现在是具体调试了。假设我们想调试App.vue这个组件,可以在想要调试的代码前添加debugger方法。

vue -- 项目调试的更多相关文章

  1. VueJs(15)--- Webstorm+Chrome 调试Vue项目

    Webstorm+Chrome 调试Vue项目 前言 在项目开发中,Debug模式是非常有必要的,后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要 ...

  2. VsCode调试vue项目

    VsCode调试vue项目 VsCode如何调试vue项目,VsCode需要安装插件以及配置launch.json文件. 找到"扩展"或者按快捷键"Ctrl+Shift+ ...

  3. webstrom Debug 调试vue项目

    第一种,使用vue插件 下载插件:https://chrome.google.com/web... 这样直接run一个vue项目,你就会看见插件标亮了 打开调试模式,你就会看见最后有个vue标记,打开 ...

  4. vue-devtools vue开发调试神器

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插 ...

  5. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  6. 如何快速把 Vue 项目升级到 webpack3

    由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...

  7. 手把手教你用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  8. cordova+vue 项目打包成Android(apk)应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...

  9. 简简单单的Vue4(vue-cie@3.x,vue’Debug[调试],vue‘sHttp)

    既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...

随机推荐

  1. NodeJs实现图片上传

    关于formidable NodeJs实现图片上传,此处主要用了插件:formidable github上关于formidable的资料如下: https://github.com/felixge/n ...

  2. php: 0跟字符串做比较永远是true。 php大bug。

    php: 0跟字符串做比较永远是true. php大bug. 如: $a = 0; if( $a == 'excel') { echo "yes"; }else{ echo &qu ...

  3. SWFObject是什么

    一:简介: SWFObject是一个用于在HTML中方便插入Adobe Flash媒体资源(*.swf文件)的独立.敏捷的JavaScript模块.该模块中的JavaScript脚本能够自动检测PC. ...

  4. appium-环境搭建(二)

    接着上一篇 1.基本的python环境 2.安装node.js,32位还是64位根据自己的系统来选择 3.安装.net framwork4.5 4.安装appium 安装完成后,运行appium.ex ...

  5. Linux下MySQL的数据文件存放在哪里的

    mysql> show variables like '%dir%';+-----------------------------------------+------------------- ...

  6. Java进阶08 GUI

    GUI(Graphical User Interface)提供了图形化的界面,允许用户以图形的方式与系统进行互动.在GUI推广之前,用户通常要以文本命令的方式来控制计算机.GUI直观的将计算机的功能呈 ...

  7. YNOI2016 这是我自己的发明

    看到这个标题立刻想到:. “绝地科学家,八倍不屏息啊,八百里外把头打啊...” 首先我们发现如果只考虑第二个操作,这棵树就是假的,我们可以直接莫队解决 如果考虑换根的话...可以把一个操作换成小于等于 ...

  8. ACM学习历程—Rotate(HDU 2014 Anshan网赛)(几何)

    Problem Description Noting is more interesting than rotation! Your little sister likes to rotate thi ...

  9. bzoj 4031: 小Z的房间 矩阵树定理

    bzoj 4031: 小Z的房间 矩阵树定理 题目: 你突然有了一个大房子,房子里面有一些房间.事实上,你的房子可以看做是一个包含n*m个格子的格状矩形,每个格子是一个房间或者是一个柱子.在一开始的时 ...

  10. javascript:function 函数声明和函数表达式 详解

    函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...