Vue調試工具vue-devtools安裝使用

1、安裝vue-devtools

在本地文件夾中建個Vue的目錄，然后使用Git下載vue-devtools工具。

命令如下

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

 

 2、在vue-devtools目錄中安裝依賴包

cd vue-devtools
cnpm install

3、修改packages文件夾中的shell文件→Chrome→manifest.json文件，把"persistent":false改成true。具體目錄如下

 

 

4、把manifest.json中的"persistent":false改成true。保存

 

 5、然后用谷歌添加擴展程序，更多工具→擴展工具。點開就能看到

 

 6、找到vue-devtools中的Chrome目錄，選擇就行。vue的工具坑比較多一個個填吧

 

 7、上面這個提示顯示我們的路徑不對，所以我們找回剛剛的那個manifest.json的文件。作者看了js的文件應該沒什么問題，就是啟動的main里面沒配置

 

 8、里面有幾個路徑需要修改的，Chrome文件下沒有build這個路徑，改為src。可以直接拷代碼保存就行。

{
  "name": "Vue.js devtools",
  "version": "5.3.3",
  "version_name": "5.3.3",
  "description": "Chrome and Firefox DevTools extension for debugging Vue.js applications.",
  "manifest_version": 2,
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "browser_action": {
    "default_icon": {
      "16": "icons/16-gray.png",
      "48": "icons/48-gray.png",
      "128": "icons/128-gray.png"
    },
    "default_title": "Vue Devtools",
    "default_popup": "popups/not-found.html"
  },
  "web_accessible_resources": [
    "devtools.html",
    "devtools-background.html",
    "src/backend.js"
  ],
  "devtools_page": "devtools-background.html",

  "background": {
    "scripts": [
      "src/background.js"
    ],
    "persistent": true
  },
  "permissions": [
    "http://*/*",
    "https://*/*",
    "file:///*",
    "contextMenus",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "src/hook.js"
      ],
      "run_at": "document_start"
    },
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "src/detector.js"
      ],
      "run_at": "document_idle"
    }
  ]
}

9、然后我們重新添加擴展vue，就成功了

 10、等等，還有重要的幾個操作沒完。通過cmd進入vue-devtools的目錄安裝依賴，使用如下命令

npm install

11、最后在輸入如下命令

npm run build