採用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 無法從該網站新增應用、擴充套件程式和使用者指令碼

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

2. 如圖設定，修改為enable
   

3. 重啟chrome，問題解決

3 安裝成功，vue外掛圖示為灰色

安裝成功後，外掛為灰色，如圖：

1. 開啟擴張程式，如圖所示，點選詳情。
   

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

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