react除錯工具react -devtools的安裝
前言
react-devtools是什麼？
react-devtools是一款由 facebook 開發的有用的 Chrome瀏覽器擴充套件。通過它我們可以檢視應用程式的 React 元件分層結構，而不是更加神祕的瀏覽器 DOM 表示。
安裝React Devtools有兩種方法：
方法一：chrome商店上直接下載（前提是該電腦已經翻牆）。
react-devtools可以從chrome商店直接下載安裝，不過需要翻牆才能下載，由於安裝很簡單，而其大多數人都沒有翻牆，所以這裡就不細說了。
方法二：官網下載原始碼，在chrome中載入已解壓的擴充套件程式。
具體步驟：
1.在github上下載react-devtools的壓縮包，github下載地址：
2.解壓後，進入react-devtools-master工程 執行cnpm install, 下載依賴
3.執行npm run build，編譯源程式。
4.開啟資料夾shells —> chrome下的manifest.json，將premissions的值改為true。
5.開啟chrome瀏覽器，點選1——>點選2——>點選3，進入擴充套件程式頁面
6.匯入安裝包
方法1）：點選1——>點選2——>點選3
方法2）：直接將chrome資料夾拖進擴充套件程式頁面裡。
7.安裝完成
8.使用除錯工具
8.1執行一個vue專案
8.2在chrome上開啟7.1中執行的vue專案，如下，開啟控制檯，點選末尾的Vue即可進入除錯。
前言
vue-devtools是什麼？
vue-devtools是一款基於chrome瀏覽器的外掛，用於vue應用的除錯，這款vue除錯神器可以極大地提高我們的除錯效率。幫助我們快速的除錯開發vue應用。
為什麼要安裝該外掛?
因為vue是進行資料驅動的，僅僅從chrome瀏覽器的控制檯進行element檢視，是看不到資料的動向的。
安裝Vue Devtools有兩種方法：
方法一：chrome商店上直接下載（前提是該電腦已經翻牆）。
vue-devtools可以從chrome商店直接下載安裝，不過需要翻牆才能下載，由於安裝很簡單，而其大多數人都沒有翻牆，所以這裡就不細說了。
官網下載原始碼，在chrome中載入已解壓的擴充套件程式。
具體步驟：
1.在github上下載vue-devtools的壓縮包，github下載地址：https://github.com/vuejs/vue-devtools。點選1——>點選2——>點選3，下載壓縮包 
2.解壓
進入vue-devtools-master工程 執行cnpm install, 下載依賴
3.執行npm run build，編譯源程式。
4.開啟資料夾shells —> chrome下的manifest.json，將premissions的值改為true。
5.開啟chrome瀏覽器，點選1——>點選2——>點選3，進入擴充套件程式頁面
6.匯入安裝包
方法1）：點選1——>點選2——>點選3
方法2）：直接將chrome資料夾拖進擴充套件程式頁面裡。
7.安裝完成
8.使用除錯工具
8.1執行一個vue專案
8.2在chrome上開啟7.1中執行的vue專案，如下，開啟控制檯，點選末尾的Vue即可進入除錯。