V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wwwwzf
V2EX  ›  Vue.js

精准调试-vue 调试工具 vue-devtools 安装及完整使用教程

  •  
  •   wwwwzf ·
    zoomla · 2020-02-15 08:52:13 +08:00 · 3868 次点击
    这是一个创建于 1503 天前的主题,其中的信息可能已经有所发展或是发生改变。

    *这是 Zoomla!逐浪 CMS 开发团队的作品,用于集成 zoomla studio 系列开发工具笔记。 * 本文主要介绍 vue 的调试工具 vue-devtools 的安装和使用

    工欲善其事, 必先利其器, 快快一起来用 vue-devtools 来调试开发你的 vue 项目吧

    如果你能连上 googlg Chrome 应用商店,那么一切好说,你只要输访问下面网址: https://chrome.google.com/webstore/category/extensions?h1=zh

    然后输入:vue devtools,就能搜索到应用,然后下载了,如下图所示:

    囿于国内环境无法连接国际版 google.com 服务,那么只好亲自动手来处理了。

    #手动部署 Vue DevTools 项目的官方主页位于 GitHub 上。你可以找到安装说明,帮助解决一些问题等等。目前该扩展在 Chrome 和 Firefox 中得到支持,同样 Safari 也得到了支持。如果你想从安装扩展开始,请不要忘了重新加载你的网页。

    ** 第一步:到 github 下载:** git clone https://github.com/vuejs/vue-devtools

    ** 第二步:在 vue-devtools 目录下安装依赖包 **

    		cd vue-devtools
    		cnpm install
    		
    

    ** 第三步:修改 manifest.json 文件 **

    把"persistent":false 改成 true

    ** 第四步:编译代码 **

    运行 npm 命令编译:

    		npm run build
    

    ** 第五步:安装扩展 Chrome 插件 ** 进入扩展 Chrome 插件 Chrome 浏览器 > 更多程序 > 拓展程序

    点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

    ** 第六步:vue-devtools 使用 **

    vue 项目, 打开 f12, 选择 vue 就可以使用了.

    vue 是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

    温情提示: 1.vue 必须引入开发版, 使用 min 压缩版是不能使用 devtools 进行调试的 2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

    调试工具使用指引

    从一个应用说起

    让我从一个超级简单的 Vue 应用程序开始带大家去熟悉 Vue 的 DevTools。

    正如你所看到的,我有一个输入字段绑定到一个叫做 name 的模型,然后是一个列表,它遍历一个 cat 数组。首先你可能会注意到你的开发工具是“宣布”自己的扩展类型 - 以防你忘了注意右边的标签。

    点击 Vue 选项卡将显示特定于 Vue 的选项。首先是组件。在我的应用程序中,我只有一个 Root 应用程序,当您单击它时,它会右侧显示可用的数据。

    这是“live”,所以如果我输入字段,它会立即反映在 dev tools 视图中。更好的是,您可以直接在 devtools 中进行编辑。将鼠标悬停在项目上将使您可以编辑控件:

    DevTools 扩展到数组-有完全移除或添加 items 的选项。要添加 item,您需要输入有效的 JSON,扩展名将在您输入时提供实时反馈。

    DevTools 扩展也可以处理 computed 属性:

    我在代码上在 computed 属性添加 oldcats 函数,将 cats 的数据遍历输出一个 age>10 的结果,DevTools 扩展会将这个结果显示出来。

    你不能编辑这些值(因为这是 computed 的!),但是如果你在数据数组中编辑一个比 10 更大的值,它将立即显示在下面的 computed 列表中。

    Nice !可能在 computed 中查看相关函数的数据还没令你感到兴奋的话,那么远程数据源呢?

    我使用 Star Wars API 作为我的数据源。项目一旦运行,我可以看到 devtools 扩展中的远程数据,甚至可以编辑它。

    自定义组件( Components )

    那么自定义组件呢?这里是我定义了一个 cat 组件的脚本。坦白地说,Vue 并没有在默认情况下使用它,这是一个严重的错误。

    现在看看 devtools 如何认识新的组件:

    注意它是如何拾取发送给它的属性的。现在我要跳过 Vuex 选项卡,直接进入 Events。GitHub 仓库中的自述文件不会告诉您一点是“Events”选项卡仅适用于组件所定制的自定义事件。所以当我使用了一个简单的 @ click =“doSomethingYo”测试,它并没有呈现,一开始我认为它在渲染的时候被破坏了其实并不是的。在上面的代码示例中,您可以看到我有一个 click 事件,但是点击它没有发生任何事情。我不得不修改代码来触发出新的事件。

    有了这个,你现在可以看到记录的 events。有趣的是,devtools 扩展会让你知道哪一个事件被解雇了:

    点击标签,然后 event 让你检查是什么触发了它和其他额外的信息。

    使用 Vuex

    现在让我们看看 Vuex。2017 年 12 月,Raymond Camden 的博客上发布了一个示例应用程序,它利用 Vuex 构建了一个简单的股票游戏。这就是 Vue DevTools 的真正意义所在。您可以深入了解存储中的数据以及运行的突变列表。

    左边的是“live”,在股票应用中非常酷,因为它有一个“心跳”,每隔几秒就会发生一次突变。点击它们可以提供有关特定突变的详细信息。

    更酷的是你可以通过一个特定的突变来拒绝或回滚你的存储状态。

    您还可以使用导出 /导入命令来保存 /恢复您的 Vuex 状态。这对于调试问题是非常有用的。

    7 条回复    2022-05-17 09:50:18 +08:00
    noreplay
        1
    noreplay  
       2020-02-15 09:00:35 +08:00 via Android
    这个还能写这么多,怎么有一种来到简书的感觉。
    GodMotherLao
        2
    GodMotherLao  
       2020-02-15 09:20:18 +08:00
    看完全文了,弱弱问一句,机器翻译的吗?看到后面,如此生硬。也没有声明来源
    xiaoyouqiang
        3
    xiaoyouqiang  
       2020-02-15 09:47:46 +08:00
    不错
    hyy1995
        4
    hyy1995  
       2020-02-15 09:49:51 +08:00
    看到写了这么长,我还特意确定了一下是不是我用的那个调试工具。。。
    iMusic
        5
    iMusic  
       2020-02-15 09:56:10 +08:00
    前半部分换成教大家怎么 FQ 比较简单
    wwwwzf
        6
    wwwwzf  
    OP
       2020-02-17 10:25:49 +08:00
    @GodMotherLao 后面部份没写好,有引用第三方源,以后改正,请海涵,感谢指导。
    wolfan
        7
    wolfan  
       2022-05-17 09:50:18 +08:00
    edge 怎么就是用不上呐。。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2674 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 00:03 · PVG 08:03 · LAX 17:03 · JFK 20:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.