chrome安裝vue-devtools遇到的常見問題及解決方法

采用vue框架進行前端開發，常常采用chrome、firefox瀏覽器，並搭配vue-devtools，提高開發效率。
環境搭建過程中，常常遇到以下問題（以chrome為例）

1. vue-devtools如何獲取？crx文件還是github獲取源代碼自己編譯？
2. chrome提示：chrome 無法從該網站添加應用、擴展程序和用戶腳本
3. vue-devtools安裝成功，但chrome插件欄vue圖標為灰色

下面依次解決上面常見的三個問題。

1 獲取vue-devtools

2 chrome 無法從該網站添加應用、擴展程序和用戶腳本

安裝vue-devtools，提示chrome 無法從該網站添加應用、擴展程序和用戶腳本，該問題需要設置chrome的flags。

1. 新建一個標簽頁，在地址欄輸入：chrome://flags/#extensions-on-chrome-urls並按回車鍵

2. 如圖設置，修改為enable
   

3. 重啟chrome，問題解決

3 安裝成功，vue插件圖標為灰色

安裝成功后，插件為灰色，如圖：

1. 打開擴張程序，如圖所示，點擊詳情。
   

2. 在詳情頁中，使能允許訪問文件地址開關
   

3. 重啟瀏覽器，問題解決