瀏覽器devtool的一些基礎用法
我們來聊聊關於瀏覽器devtool的一些比較基礎的使用技巧
導言
作為一個web前端，你的工作可以離開VSCode，Webstorm，畢竟你熟悉的情況下，可以直接記事本擼程式碼。但是，肯定離不開控制檯，瀏覽器有瀏覽器的控制檯，開發工具也有開發工具的控制檯。上面提供了很多功能，如下：
- 預覽頁面實時DOM樹和CSS樹的【元素】
- 執行JavaScript的【控制檯】
- 概覽當前頁面資源的【原始碼】
- 檢視當前頁面儲存快取等內容的【應用】
- 概覽頁面的所有請求的【網路】
……等等
devtool有很多功能，暫先介紹一些基礎的，使用頻率較高的功能。通過這些功能，不僅可以提高我們的工作效率，也可以幫助定位一些問題。
元素
在元素下面區域中，我們可以看到，左側有實時的DOM樹資料，右側則是一些CSS相關內容和DOM樹節點的補充資料。
左側的DOM樹區域你可以任意修改這裡的內容，或增加、或刪除element。有些朋友在編輯元素的時候習慣雙擊然後再編輯，但是這樣會有一個問題，容易失去焦點。此時不妨嘗試下在目標元素上摁下滑鼠右鍵，這個時候你會看到右鍵選單頂部會有那麼幾個功能： 編輯屬性、 新增屬性、 編輯為HTML。
點選編輯屬性 效果是： 會把你右鍵點選時所hover的屬性更改為可編輯狀態。
點選新增屬性 效果是： 會在開始標籤末尾出現一個空白編輯區，在此處可以輸入要新增的屬性
以上兩個操作主要是針對屬性的操作，比如新增一個data-set自定義屬性、新增一個id或者class什麼的。要是想編輯當前元素及其後代元素的一些東西，此時再通過編輯屬性和新增屬性操作就比較繁瑣了，此時第三個按鈕就派上用場了
點選編輯為HTML
元素編輯完成，我們要獲取元素了，這個時候該怎麼辦呢？
有兩個方法：
-
新增屬性id，然後控制檯裡通過
const ele = document.getElementById('xx'),當然class也可以，但是在不確定預設class是否只有一個的時候，只能新增一個很特別的class再獲取了 -
左鍵單擊要獲取的元素，在控制檯裡可通過
$0變數來獲取剛剛點選過的元素, 當然還有$1$2$3什麼的，會獲取到之前點選的元素，比如你先點選div再點選span，那麼此時，獲取到的$0就是span元素物件，而$1就是div元素物件了，如果只點擊div，那麼獲取到的$0就是div元素物件了。在此基礎上可以進行DOM操作或者繫結事件。$0.addEventListener('click', onClick)。
控制檯
控制檯是我們用的最多的一個功能了，在此處看到程式碼裡console.log的結果，也可以臨時寫段簡單的程式碼進行除錯。接下來介紹幾個控制檯的功能/變數：
-
控制檯邊欄
在控制檯內容區域左上角有個按鈕，點選之後可以顯示控制檯邊欄，控制檯邊欄為何物？簡單點講就是把控制檯的輸出資訊進行一個分類，正常輸出、錯誤資訊和警告資訊等，分類之後我們可以更快速、集中地獲取需要的資訊
2.控制檯變數
在介紹元素的時候，提到了$0,現在介紹一個新的變數$_,$_變數是為何物？可獲取最近一次執行語句的返回結果，上個圖
我們首先定義了個函式getName,之後執行該函式，返回了結果，除了通過給返回結果賦值到某個變數上，瀏覽器還可以自動把結果賦值到$_上，通過$_獲取到剛剛的結果，注意一點，一定要有返回的表示式才行，定義變數的時候是沒有返回結果的，此時獲取到的是undefined
還有一個變數temp1，當然temp1是個例子，肯定還有temp2、temp3之類的，這個變數temp\d儲存的是我們儲存為全域性變數的值，上圖：
在第四行文字上右鍵，底部有個儲存為全域性變數，點選之後，temp1變數就會指向當前選擇的內容，再儲存另一個值的時候，就會建立一個temp2，以此類推。
網路
網路區域在聯調階段或者定位問題是一定會用到的，這裡可以檢視頁面的所有資源、非資源類請求。瀏覽器開發商還為我們提供了很多工具用來提高效率，上圖：
在圖中，我框了5個地方，我來一一解說這幾個小功能：
-
保留日誌 當我們重新整理頁面或者頁面自動跳轉時，預設情況下，請求會自動清空之前的請求列表，再以跳轉後的頁面的html請求開始顯示請求列表。當我們需要追蹤跳轉前後的請求或者想手動清空請求列表的時候，開啟這個功能即可
-
禁用快取 可讓瀏覽器在獲取靜態資源的時候設定為不快取
-
限制 在這裡可以模擬一些網路情況，有正常情況，還有快速4G，慢速的3G，還有離線。通過模擬不同的網速可以在效能優化的時候進行資料獲取和分析
-
型別過濾 可以通過請求型別進行篩選，方便你不用在一堆請求裡找那個你要尋找的請求了
-
篩選器 當你明確自己要尋找的請求時，可以在這裡輸入請求的特徵，比如登入介面：userlogin，下方的請求列表就會只顯示符合條件的請求。溫馨提醒： 使用之後別忘記清空