谷歌瀏覽器開發者工具標籤介紹

谷歌瀏覽器開發者工具標籤介紹：

一般在windows系統上瀏覽器開發者工具開啟都是按f12快捷鍵.

==>element標籤：該標籤使用來檢視頁面的html標籤元素的，能夠也就是檢視原始碼，我們可以看到布局，可以看到用到的樣式，還有用到的鏈結等等。

==>console標籤：這個就是乙個web控制台

==>sources標籤：這個是顯示資源檔案的

1.該選擇框使用來選擇資源的，當網頁被載入的時候向伺服器端請求出來的檔案包括.html .ccs .js這樣的檔案。

2.這個地方使用來除錯js**的地方，這個非常重要，看到行號上面有藍色的標籤，這個標籤就是斷電，當我們需要除錯程式的時候打乙個斷電，然後通過3這個工具欄進行除錯，那麼除錯過程就不詳細解釋，也就是打乙個斷電然後重新整理頁面程式會調到你打斷點的地方，然後通過4來檢視程式中變數的值什麼的。

3.中的標籤，第乙個是停止狀態的按鈕就是表示程式是否停止（在debug時），後面的是程式繼續跳過方法，跳過下乙個語句，調到上乙個語句。

==>network標籤：這個就是抓包常用的工具

那麼這個頁面就是用於抓包的頁面，我們需要分析頁面的請求，比如模擬登陸什麼的都需要去分析程式是怎麼在後台執行的，接下來就，我們可以看到headers（請求訊息頭） preview（預覽） response（響應） timing（求求時間）cookie這些東西

最上面還有乙個工具欄，有乙個紅色的圓點和靜止符號的按鈕，那麼這兩個按鈕，當為紅色按鈕的時候表示當前的請求不被清空（但是這裡的請求是不跳轉頁面的請求，當跳轉到新的頁面，那麼也會請求也會被清空），後面這個按鈕就是清空請求的。

下面還有一行工具欄，這個工具欄主要是用來選擇和過濾請求訊息的。

再下面可以看到時間線，這個就是記錄乙個請求開始到結束的時間。

注意：當你需要請求到另乙個頁面的時候都不清空你的請求的時候需要勾選上preserve log，同時讓紅色按鈕顯示紅色

==>performance標籤：這個就是我們上面講的請求時間

注意！！！後面的幾個標籤也不是很常用，我就不做過多的說明，現在簡單的了解這些基本的入門使用知識就基本夠用，我相信這些功能都用熟之後你也會知道其他的功能的。