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即可進入除錯。