Vue进阶（幺陆柒）：Vue 项目调试技能_vue项目调试 需要重新run么

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

+ [五、拓展阅读](#_40)

---

一、前言

在Vue项目开发过程中，当遇到应用逻辑出现错误，但又无法准确定位的时候，知晓Vue项目调试技巧至关重要。

同后台项目开发一样，可以在JS实现的应用逻辑中设置断点，并进行单步、进入方法内、跳出方法等调试，从而准确定位问题根源。

本文主要讲解针对JetBrains系列WebStorm下Vue项目进行调试的2种方法：debugger和Vue-devtools。

二、debugger

debugger是谷歌浏览器提供的调试语句，其主要是通过停止JS的执行，相当于设置断点。它的使用方法很简单， 只需要在我们的JS语句中， 插入一行debugger; 即可。

在JS代码编写的过程中，我们都会通过浏览器的调试模式（F12）来检查代码逻辑是否正确，大多数我们都是通过设置断点来进行调试。

应用debugger调试Vue项目，需要在项目中需要的位置写debugger,项目运行后，打开浏览器按F12，在chrome sources页签中就会直接进入断点，至此可以进行单步、跳步调试了。

三、Vue-devtools

该调试工具为针对Chrome浏览器而设计的开源调试工具（Github地址），可以自行将该项目下载下来然后编译，并将生成后的chrome插件安装至chrome中，步骤如下：
找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中，完成安装。

然后运行本地项目用谷歌浏览器打开就可以调试了，如下图所示。

四、延伸阅读

1. 应用devtools调试工具，还需要在vue项目中man.js配置：

	Vue.config.devtools = true;


### 最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/2f95ce57cc61374167fe30f48b5796de.webp?x-oss-process=image/format,png)

4bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-JZuKjo8b-1715844434444)]