3. VUE調試工具

3.1 調試工具安裝

1. 到GitHub下載工具安裝壓縮包，解壓到響應的文件夾。
   
   
2. 到解壓的vue-devtools文件目錄下安裝依賴包。
   
3. 修改manifest.json文件，該文件在vue-devtools文件的 \packages\shell-chrome 下。
   
   把 "persistent": false 改為 "persistent": true 。

  "background": { 
   
    "scripts": [
      "build/background.js"
    ],
    "persistent": false
  }

Jetbrains全家桶1年46，售后保障穩定

4. 編譯代碼 npm run build。結果報錯：'webpack' 不是內部或外部命令，也不是可運行的程序 或批處理文件，哭泣泣。
   
   按照網上建議全局安裝webpack，npm install webpack -g
   
   重新編譯，中間要求安裝webpack-cli，選擇yes，之后還是出現了報錯：
   
   接著我按著報錯信息去搜索了Error: Cannot find module ‘webpack-cli/package.json’這個問題，嘗試了npm install webpack-cli -g、npm run build，還是報錯：
   
   又看到了另一種解釋，看到了大佬分析出了原因：

The error was due to you installing webpack globally and trying to install the webpack-cli locally. I face the same problem.，大佬還給出了解決辦法：npm rm -g webpack-cli And in the project npm i -D webpack-cli，That did it for me。

按照大佬的提示照做嘗試了命令：npm rm -g webpack-cli 、npm i -D webpack-cli 、npm run build ，還是報錯：Error: Cannot find module ‘webpack-cli/package.json’


我在想我是不是輸錯命令了，于是重新嘗試了 npm i -g webpack-cli （原來的命令是npm i -D webpack-cli ）、npm run build，接著報錯：

看了以下，全局安裝webpack-cli，重新編譯會報錯：[webpack-cli] Unknown argument: –hide-modules，不全局安裝而是采用如下命令安裝 npm i -D webpack-cli ，重新編譯會報錯：Error: Cannot find module ‘webpack-cli/package.json’

刪除了全局和非全局的，重新試了以下，還是不行。

a week later …

花了幾天的時候學了一下git，采用https://www.cnblogs.com/chenhuichao/p/11039427.html鏈接的方法試了一下，還是不行。于是，我覺得可能是我前面的一些操作導致多下載了一些npm包，于是我把node卸載了，并且還把C盤下的用戶目錄下的AppData目錄下的Roaming目錄下的npm文件和npm-cache文件統統刪除。之后重新安裝了node。

接著我在D盤新建了vue-devtools文件夾，在該文件夾中打開了 git命令行程序，即 Git Bash Here。注意下圖的vue-devtools文件夾中的vue-devtools文件夾和.git倉庫文件是后來進行 git操作后得到的，一開始D盤下的vue-devtools文件夾中沒有任何內容。

打開 git命令行程序后，輸入初始化 git倉庫 命令 git init，之后就變成如下摸樣：

之后到github下載vue-devtools安裝包，這里我采用了git 的克隆方式，也就是在git命令行程序中輸入如下圖命令，然后 enter 鍵，等待安裝包下載完成。

下載完成后，我的文件目錄成了這個樣子（也就是前面提到的），多了vue-devtools文件夾和.git文件夾。

接著我打開了 powershell，將當前工作目錄切換到 D:\vue-devtools\vue-devtools 下，輸入命令 git checkout master。這個命令讓工作環境切換到了master環境下。因為在我們克隆完vue-devtools安裝包后，D:\vue-devtools\vue-devtools 目錄下默認進入的是dev環境，（這個我在 git命令行程序 中核實過了，但是當時沒有截圖，sorry~）而我們后續操作都要master環境下進行，所以要先切換到master環境。

上述操作完成后，接下來在vue-devtools目錄下安裝依賴包，在power shell 中輸入 npm install 命令。

依賴包下載完后執行 npm run build，編譯打包成功后會在shells下生成chrome文件夾。（終于沒有報錯了）此文件夾就是用來放入chrome的擴展程序。

打開Chrome瀏覽器 >選擇更多工具>擴展程序 >打開開發者模式
點擊加載已解壓的擴展程序, 找到剛才生成的chrome文件夾，選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖

然后發現插件報錯，感覺內心瞬間縮緊。然后查看了一下具體是什么錯誤。

于是我想到我可能忘記了一個步驟，那就是修改manifest.json文件，把”persistent”: false改成了”persistent”: true，具體如下：

  "background": { 
   
    "scripts": ["build/background.js"],
    "persistent": true
  },

我心存僥幸的按了F12鍵看看有沒有出現VUE，然而并沒有出現VUE。我尋思著前面安裝的時候也沒有出現錯誤啊，于是在網上搜索了Unchecked runtime.lastError: Cannot find menu item with id vue-inspect-instance這個錯誤，發現也有很多人遇到這個問題，例如：https://segmentfault.com/q/1010000013530379?utm_source=sf-similar-question

還有這個https://segmentfault.com/q/1010000024436264

于是我先嘗試跑一個帶vue框架的html文件，然后F12鍵，然后就出現VUE了。我也不知道為啥，生活就是這么奇特~

總結

以上是生活随笔為你收集整理的VUE调试工具(Vue.js)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。