GitHub

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

手动安装

  1. Clone this repo
  2. cd vue-devtools the newly created folder
  3. run yarn install
  4. then run yarn run build
  5. Open the Chrome extension page (currently under Menu > More Tools > Extensions)
  6. Check “developer mode” on the top-right corner
  7. Click the “load unpacked” button on the left, and choose the folder: vue-devtools/packages/shell-chrome/
  8. Alternatively to step 3, you can also use yarn dev:chrome to build & watch the unpacked extension

使用

调试 Vue 组件

  • 打开控制台，找到 Vue 页签，第一个为组件视图
  • 在组件视图
    • 输入组件名称，可以快速定位组件
    • 点击定位按钮，再点击页面上组件位置，即可查看组件信息：props、data「支持修改」、computed 等
  • 第二个为 Vuex 视图，可查看全局状态信息
  • 第三个为 Event 事件视图，可查看所有定义的事件
  • 第四个为 Routing 路由视图，包含历史路由和路由表信息
  • 第五个为性能视图
  • 第六个为设置

调试 js

打开控制台，Command + P 搜索 Vue或 js 文件，在需要调试的 js 代码位置添加断点