为什么要安装Vue DevTools？它是怎么来的？
做为一个刚起步学习Vue开发的大叔，首先从教程上得知要安装这个extension，目的为了我们更好的调度Vue代码！纳尼！！这玩意儿怎么调试？从哪里操作？到底怎么玩？我是新人，是小白，我会告诉你我走的路，但对于大神来说，可能存在误人子弟的情形！！所以希望高手请多多指教（在此跪谢~），和小白一起互鉴！
我们在浏览器（Google Chrome）中预览开发效果时，请按F12键，我们选择“Console”标签，会出现如下图所示的界面。
企业微信截图_c19ff2fd-ace2-4baa-9047-b7f486cfca57.png
我们可直接点击提示的Github来获取最新源码！
诸多教程会告诉你直接下载源码，但实事证明，你可能就被欺骗的那个，因为下图就是最好说服你的理由！！！！！
cbda8f8b-a942-4cf9-93fc-3043b31b5257.png
678525c7-d4f6-4141-a787-26d08cebbbe6.png
以为跟着教程准没错，但如果按教程来，绝对会让一个小白会哭爹骂娘的，只怪我们太年轻了~注意了，注意了，注意了，下面是正确的姿势：
7fa6a4c1-1eb8-4d19-87d7-885528491c14.png
或是直接用命令行：
git clone -b add-remote-devtools https://github.com/vuejs/vue-devtools
下载完成之后cd到目录“vue-devtools”，使用以下命令行：
npm install
注意：用cnpm install也可以，具体区别可以度娘~有时候可能没有权限操作会报错，请在命令前面加“ sudo”，输入电脑登入密码即可继续；
修改manifest.json文件
->"persistent":false改成true
8403eb1b-6535-42c2-86e7-6810688667c0.png
51878fa9-220b-4cd5-b344-ed3b52219069.png
编译
npm run build
编译成功后
9e819f56-aacb-4231-bb5f-5b2b0def0452.png
设置extension
->浏览器右上角 -> 更多工具L ->扩展程序（E）;
->浏览器输入地址：chrome://extensions/
或是将文件（vue-devtools-dev -> shells -> chrome）直接拖进去即可。
0bcf21b1-9349-4842-a732-f7471d2b309a.png
搞定！！！（具体调试的操作后面补上，嘿嘿~）
e5db8740-de08-4ddb-9efb-f47df1335666.png
网友评论