1. 代码中写debugger

如果是简单的代码调试，想看到的值很少，就直接使用原生的debugger语句调试或使用console.log打印在控制台，这个适用于比较简单的调试。

2. Vue.js devtools

在浏览器安装扩展 Vue Devtools，然后F12控制台会多出一个tab，CSDN文章编辑页面就是Vue写的，点击选择组件就可以查看组件的data属性值、vuex等信息：

3. VScode + Chrome

1.vscode 安装 Debugger for Chrome插件
2.配置vue.config.js
```
// configureWebpack 里添加
devtool: 'source-map'
```
这个主要是在调试的时候能看到源码，而不是被webpack打包后的代码。

3.配置vscode
点击vscode左侧工具栏的debug按钮，点击这个小齿轮显示配置文件：

配置url，url为npm run serve后的地址【注意端口号】：

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

4.在vscode编辑器打断点

在文件行号左边点一下，出现红点就表示打上断点了，接下来点击debug的【run】按钮会自动打开浏览器，并且在你打断点的地方停下来，此时浏览器和vscode是同步进入debug状态的，都可以调试。

Tips: 调试方法有很多，适合的才是最好的。

Vue 项目调试总结相关推荐

在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools Vue-Devtools 插件是一个 Vue 项目的调试插件 Microsoft Edge 浏览器是 ...
浏览器下载安装vue js devtools调试vue项目
下载vue js devtools插件的方式: 推荐网址: 1.https://www.extfans.com/ 2.百度下载谷歌浏览器助手插件,直接进入谷歌网上应用商店进行下载 3.https:// ...
vue项目移动H5的页面调试
移动H5的页面调试 1.eruda 直接在html中外链引入初始化;然后重新运行项目即可看到 <script src="//cdn.bootcdn.net/ajax/libs/erud ...
安卓手机模拟器调试--vue项目在线调试（HBuilder X, 配合模拟器--夜神模拟器）及打包
1.下载HBuilder X 下载地址 -- https://www.dcloud.io/ 2.打开HBuilder 建一个项目 3. 打包自己的Vue项目,vue-cli2 在目录下的config文 ...
配置VS Code 使其支持vue项目断点调试
转载原文作者:肥仔快乐水原文链接:https://juejin.im/post/6844904144457695245 起因每个应用,不论大小,都需要理解程序是如何运行失败的.当我们写的程序 ...
微信PC版访问本地vue项目页面调试及访问空白问题
1.安装微信旧版本2.6 链接:https://pan.baidu.com/s/15no5HCjxydYBa4YB_nvo1g 提取码:pntg 2. 微信引入devtool包第 1 步:查看微信 ...
vue项目debug调试
背景首先我是一名辣鸡后端工程师: 来看vue项目的时候,内心一直在纠结到底为何没法debug好麻烦哦用习惯了jetbrain的idea开发java,vscode实在用的不顺手,所以本文章将采用je ...
vue项目debugger调试看不到源码
在搭建vue项目时,在vue文件里面输入debugger后,在浏览器点击操作发现可以进入断点,但显示的是已经压缩好的代码,无法看到源码. 在网上查了好多文件都说添加 devtool: "so ...
使用 nginx 同域名下部署多个 vue 项目，并使用反向代理
花了 3 天时间,趁着我还没有忘记,先记录下来效果目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出 ...

Vue 项目调试总结

文章目录

1. 代码中写debugger

2. Vue.js devtools

3. VScode + Chrome

Vue 项目调试总结相关推荐

最新文章

热门文章