Vue提升写代码效率：快速通过DOM元素打开对应的Vue文件

在Vue项目的编写中，你是否遇到接手别人项目后根本找不到一个界面对应的文件的尴尬？我们通常是使用浏览器自带的Console进行调试，但是Console里面呈现的DOM树已经是被编译后的，你根本无法得知该DOM元素是位于Vue项目中的哪个文件，只能全凭猜测，或者根据界面路由进行查找，但其实还有更加方便的方式，那就是Vue.js devtools工具。

第一步：浏览器中安装Vue.js devtools工具,下载地扯：Vue Devtools_6.5.0_chrome扩展插件最新版下载_极简插件用于调试Vue.js应用程序的Chrome和Firefox DevTools扩展。Chrome devtools扩展用于调试Vue.js应用程序。https://chrome.zzzmh.cn/info/nhdogjmejiglipccpnnnanhbledajbpd

,我用的是google浏览器，郊果如下：

第二步：可以开始调试vue项目

 

 当然Vue.js devtools的功能还不止这些，它还可以监控vuex的状态变化，查看组件属性等等功能，总之是一个开发Vue项目的利器！提高写代码效率你才有更多的时间划水，你有更多时间划水你才能去学习更多新的东西，你学习了新的东西你才能更好的跳槽涨工资！可以愉快的写代码了。