vue debug 二种方法

console.log多了比较烦，用debug就比较清晰了。

可以快速履清代码运行的先后顺序，验证自己的想法是否正确，可以清楚的了解到变量的内容，不用在console.log了。

一，vue devtools

1，chrome应用商店安装vue devtools扩展，并打开vue devtolls扩展
2，启动vue，npm run dev
3，chrome中访问vue网址，打开开发者工具，导行会多出vue，如下图

vue devtools

vue devtools，对于数据展示，是非常清楚的。

二，vscode debug

1，修改.vscode/launch.json

查看复制打印?

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "sourceMaps": true,
      "name": "assa vue debug",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

2，启动vue项目，npm run dev

3，点击vscode debug中的绿色三角启动debug，chrome访问网址就可以debug了

vscode debug vue

总结

以上所述是小编给大家介绍的vue debug 二种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • webstrom Debug 调试vue项目的方法步骤

    第一种,使用vue插件 1.下载插件:https://www.jb51.net/softs/588080.html 这样直接run一个vue项目,你就会看见插件标亮了 打开调试模式,你就会看见最后有个vue标记,打开能看见当前vue页面渲染相关数据 第二种,使用webstrom调试下载插件 下载地址:https://www.jb51.net/softs/171905.html 打开webstrom Debugger, 记住端口号 打开刚才安装的插件,选项,填入刚才看见的端口号 添加一个debug

  • 关于Vue在ie10下空白页的debug小结

    发现问题 前几天写的一段Vue,在ie下一片空白,f12显示script1003: expected : .于是就有了这篇文章... 解决过程 baidu.google之,说是json最后一项有多余的逗号,例如 { a: 5, b: 4, // 最后一项不能有逗号 } 检索修正所有js文件不表,然而情况依旧... 没办法了,祭出无敌睿智debug技巧: 全文注释掉,再一行一行解掉注释,终于定位到bug位置: 一个自定义右键菜单的插件(v-contextmenu)有问题... 继续先前的睿智deb

  • vue debug 二种方法

    console.log多了比较烦,用debug就比较清晰了. 可以快速履清代码运行的先后顺序,验证自己的想法是否正确,可以清楚的了解到变量的内容,不用在console.log了. 一,vue devtools 1,chrome应用商店安装vue devtools扩展,并打开vue devtolls扩展 2,启动vue,npm run dev 3,chrome中访问vue网址,打开开发者工具,导行会多出vue,如下图 vue devtools vue devtools,对于数据展示,是非常清楚的.

  • vue传值方式的十二种方法总结

    vue传值方式的十二种方法总结

    目录 一.父传子传递 二.子传父传递 三.兄弟组件通信(bus总线) 四.ref/refs(父子组件通信) 五.Vuex通信 六.$parent 七.sessionStorage传值 八.路由传值 九.祖传孙 $attrs 十.孙传祖使用$listeners 十一.promise传参 十二.全局变量 一.父传子传递 (1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量 (2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props: ["属性

  • java发送url请求获取返回值的二种方法

    下面提供二种方法会使用java发送url请求,并获取服务器返回的值 第一种方法: 复制代码 代码如下: import org.apache.http.HttpEntity;import org.apache.http.HttpResponse;import org.apache.http.NameValuePair;import org.apache.http.client.HttpClient;import org.apache.http.client.entity.UrlEncodedFor

  • Vue使用三种方法刷新页面

    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面.如:用户登录成功.增加.删除.更新等. 原始方法: location.reload(); vue自带的路由跳转: this.$router.go(0); 用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好. 所以,我们选择第三种方式: 首先在App里面写下如下代码: <template> <div id="app"> <rout

  • java获取当前日期和时间的二种方法分享

    有两种方法:方法一:用java.util.Date类来实现,并结合java.text.DateFormat类来实现时间的格式化,看下面代码: 复制代码 代码如下: import java.util.*;import java.text.*;//以下默认时间日期显示方式都是汉语语言方式//一般语言就默认汉语就可以了,时间日期的格式默认为MEDIUM风格,比如:2008-6-16 20:54:53//以下显示的日期时间都是再Date类的基础上的来的,还可以利用Calendar类来实现见类TestDa

  • CentOS下对shell脚本加密的二种方法

    第一种方法(gzexe): 这种加密方式不是非常保险的方法,但是能够满足一般的加密用途,可以隐蔽脚本中的密码等信息. 它是使用系统自带的gzexe程序,它不但加密,同时压缩文件. 使用方法: 复制代码 代码如下: gzexe file.sh 它会把原来没有加密的文件备份为 file.sh~ ,同时 file.sh 即被变成加密文件: 第二种方法(shc): 使用 shc 对 Linux shell 脚本加密. shc是一个专业的加密shell脚本的工具.它的作用是把shell脚本转换为一个可执行

  • IIS7.5使用web.config设置伪静态的二种方法

    近几天公司里开发的项目有几个运行在IIS7.5上,由于全站采用的是伪静态,因此从网上找到两两种方法来实现.这两种方法各有优势:第一种比较灵活,只要把文件拷到根目录下,即可直接显示所有伪静态页面(适用于此伪静态规则的所有项目,如ThinkPHP),无需更改代码:第二种适合有子目录时的伪静态,比如一个网站下有多个子网站且都要使用伪静态,那么就考虑使用第二种方法了,第一种会报错误.两种方法,自己根据情况使用吧(当然,并不是适用所有项目,可以根据项目的伪静态规则自行调整).以下是代码: 第一种方法:we

  • oracle数据库导出和oracle导入数据的二种方法(oracle导入导出数据)

    oracle数据库导出和oracle导入数据的二种方法(oracle导入导出数据)

    方法一:利用PL/SQL Developer工具导出:菜单栏---->Tools---->Export Tables,如下图,设置相关参数即可: 方法二:利用cmd的操作命令导出,详情如下:1:G:\Oracle\product\10.1.0\Client_1\NETWORK\ADMIN目录下有个tnsname.ora文件,内容如下: 复制代码 代码如下: CMSTAR =  (DESCRIPTION =    (ADDRESS_LIST =      (ADDRESS = (PROTOCOL

  • Java使用默认浏览器打开指定URL的方法（二种方法）

    直接看代码:方法一: 复制代码 代码如下: Runtime.getRuntime().exec("rundll32 url.dll,FileProtocolHandler http://www.jb51.net"); 方法二: 复制代码 代码如下: //判断当前系统是否支持Java AWT Desktop扩展        if(java.awt.Desktop.isDesktopSupported()){            try{                //创建一个UR

  • oracle误删数据表还原的二种方法(oracle还原)

    一.如果是刚刚删除,那么有两方法: 首先用show parameter undo;命令查看当时的数据库参数undo_retention设置. 显示如下: 复制代码 代码如下: undo_management   string   AUTO undo_retention  integer 10800 undo_suppress_errors  boolean  FALSE undo_tablespace   string   UNDOTBS1 undo_retention(保持力),10800单位

随机推荐