跳转至

vue-devtools

1. 介绍

  vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

https://github.com/vuejs/vue-devtools

2. 安装方式

2.1 在线安装

  vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。

2.2 离线安装

  • 找到vue-devtools的github项目，并将其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
详细操作过
root@leco:~/cmz# git clone https://github.com/vuejs/vue-devtools
正克隆到 'vue-devtools'...
remote: Enumerating objects: 115, done.
remote: Counting objects: 100% (115/115), done.
remote: Compressing objects: 100% (66/66), done.
remote: Total 7600 (delta 55), reused 96 (delta 48), pack-reused 7485
接收对象中: 100% (7600/7600), 7.64 MiB | 34.00 KiB/s, 完成.
处理 delta 中: 100% (4930/4930), 完成.
检查连接... 完成。

root@leco:~/cmz# tar zcvf vue-devtools.tgz vue-devtools/
root@leco:~/cmz# sz vue-devtools.tgz

我是在Linux下在线导入到windows机器上的

  • 安装项目所需要的npm包
npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install
详细操作过
Microsoft Windows [版本 10.0.17134.858]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\cmz\Desktop\vue-devtools\vue-devtools>npm install
npm WARN deprecated os-homedir@2.0.0: This is not needed anymore. Use `require('os').homedir()` instead.
npm WARN deprecated joi@13.7.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated hoek@5.0.4: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.

> core-js@2.6.9 postinstall C:\Users\cmz\Desktop\vue-devtools\vue-devtools\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> cypress@3.3.2 postinstall C:\Users\cmz\Desktop\vue-devtools\vue-devtools\node_modules\cypress
> node index.js --exec install

Installing Cypress (version: 3.3.2)

 |  Downloading Cypress
    Unzipping Cypress
 √  Downloaded Cypress
 √  Unzipped Cypress
 √  Finished Installation C:\Users\cmz\AppData\Local\Cypress\Cache\3.3.2

You can now open Cypress by running: node_modules\.bin\cypress open

https://on.cypress.io/installing-cypress

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1030 packages from 542 contributors and audited 10343 packages in 1384.266s
found 0 vulnerabilities
  • 编译项目文件
npm run build
详细操作过
C:\Users\cmz\Desktop\vue-devtools\vue-devtools>npm run build

> vue-devtools@5.1.1 build C:\Users\cmz\Desktop\vue-devtools\vue-devtools
> cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules

 98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 23681ms                                                                         16:13:48
                                                                                    Hash: b999d67c35a677c4fc63
Version: webpack 4.35.2
Time: 23681ms
Built at: 2019-07-08 16:13:48
                 Asset      Size  Chunks                    Chunk Names
            backend.js   396 KiB       0  [emitted]  [big]  backend
         background.js  2.59 KiB       1  [emitted]         background
           detector.js  4.31 KiB       2  [emitted]         detector
devtools-background.js  2.22 KiB       4  [emitted]         devtools-background
           devtools.js  1.09 MiB       3  [emitted]  [big]  devtools
               hook.js  28.3 KiB       5  [emitted]         hook
              proxy.js   1.3 KiB       6  [emitted]         proxy
Entrypoint hook = hook.js
Entrypoint devtools [big] = devtools.js
Entrypoint background = background.js
Entrypoint devtools-background = devtools-background.js
Entrypoint backend [big] = backend.js
Entrypoint proxy = proxy.js
Entrypoint detector = detector.js
  • 添加至chrome游览器

  浏览器输入地址chrome://extensions/进入扩展程序页面，点击加载已解压的扩展程序按钮，选择vue-devtools>shells下的chrome文件夹。

如果看不见加载已解压的扩展程序…按钮，则需要勾选开发者模式。

vue-devtools vue-devtools vue-devtools vue-devtools