前後端分享之Chrome開發者工具

注:FireBug已經停止開發合併進Firefox的內置開發者工具中;Chrome版本爲 78.0.3904.87

在chrome中打開開發者工具:
1、點擊右上⻆菜單->更多工具-> 開發者工具
2、在windows系統中默認快捷鍵 「F12」，在MacOS中默認快捷鍵 爲「Command+Option+I」
3、在⻚面上右鍵，點擊「檢查」

Element面板:
Element面板有兩大部分組成:
如圖，左側的爲DOM樹，右側的爲當前所選DOM節點的詳細信息，包括:樣式，最 終計算的樣式結果，事件列表，屬性列表等等。

節點選擇:
點擊面板左上⻆的 圖標後，鼠標移 動到⻚面中的某個元素就會顯示該元素的盒 模型和基礎佈局信息，點擊選中後會顯示該 元素的DOM節點位置、樣式等詳細信息，你 可以在這個面板中對它進行修改。
你也可以在DOM樹中點選對應的DOM 節點，瀏覽器會在⻚面中高亮顯示它所在的 位置，可以實時的編輯，添加，刪除節點。


Styles:
這塊區域主要功能是顯示和調整元素的樣式。
有時我們需要在查看樣式的時候看一下鼠標懸停或者選中時候的樣式，那麼我們需要先 選中想要查看的元素，然後在Styles面板中點擊 它會展開一個面板

通常情況下在面板中勾選對應的狀態即可讓所選的元素顯示對應的樣式:

1. :hover選中此項讓所選的元素顯示鼠標懸停時的樣式
2. :active選中此項讓所選的元素顯示被用戶激活的樣式(用戶按下按鍵但是還未鬆開時) 3. :focus選中此項讓所選的元素顯示獲得焦點時的樣式

我們可以在屬性上勾選或者取消勾選來控制他是否生效，如果它有一道刪除線，代表最終
計算的時候它因爲優先級等問題沒有實際生效，也可以雙擊直接編輯它的屬性或者數值。

Filter輸入框可以在當前所選DOM節點的所有樣式中進行篩選:

Computed:
該面板可以用來查看當前所選DOM節點其樣式的最終計算結果，即最終呈現在⻚面上 的樣式列表。你也可以通過它來定位到最終在這個節點上生效的樣式的來源。

Console面板:
console面板可以查看瀏覽器和代碼中輸出的各種信息，有log,warn,error等各種級別 的信息。但是如果我們刷新了當前⻚面，上一次⻚面訪問的console中的信息就會丟失，此 時點擊 按鈕在面板中勾選Preserve log 選項即可保留之前的信息，點擊左上⻆的 按鈕可以清空當前的console


在Filter輸入框中輸入內容可以對當前console中的內容進行篩選，它右側的Deafult levels 下拉菜單中可以篩選顯示哪些級別的信息。
Info: Warnings: Errors:

Network面板:
Network面板用來記錄在DevTools打開時⻚面的網絡活動日誌，網絡日誌列表中的每 一行代表一個資源。默認情況下，資源按時間順序列出。列表最下面的的資源是最後請求 的資源。

工具欄:
點擊 按鈕來開關日誌記錄功能，當按鈕亮起時會開始記錄網絡日誌。
點擊 按鈕來清空當前記錄的日誌。
點擊 按鈕來顯示或隱藏篩選欄。
勾選Preserve log選項來保留⻚面的網絡日誌，防止在⻚面刷新和跳轉時日誌被清 空。
篩選欄: 篩選欄中的Filter輸入框用於篩選日誌中的內容。與Console面板中的篩選功能類似。 篩選欄中的 用於篩選顯示對應的資源類型。

網絡日誌列表:
日誌列表中記錄了所有網絡活動的信息，他的表格除了默認展示的字段之外還有一些
隱藏的字段，我們可以通過在表頭的任意位置右鍵來勾選顯示它們。點擊某一列的表頭可
以依據該列排序顯示。

除了衆所周知的點擊可以查看詳情，對列表中的某一項進行右鍵點擊，我們會發現一 些快捷操作，比如:清空瀏覽器緩存，清空cookies，便利的複製功能如複製地址，複製請 求頭，複製響應頭，複製對應的cURL命令，重新請求等功能。

Application面板中的Storage:
在Network面板中我們知道了如何快速清空cookie，那如果我們要快速的編輯cookie 以及localStorage、sessionStorage的內容要怎麼辦呢，此時我們要來看Application面板 中的Storage部分。
點擊面板中的cookie，選擇一個cookie來源，右側就會顯示其所對應的cookie內容， 我們可以直接點擊對他進行編輯，也可以點擊 清空全部，點擊 刪除你當前選中的那 一條數據。

什麼是Storage:
Storage提供了特定域名下在本地存儲數據的功能，可以通過api添加、修改或刪除存 儲的數據項。 Storage 的數據量大小在瀏覽器上是有限制的，不同瀏覽器大小會有區別， 在主流瀏覽器中，一般大小限制約爲 5M。
localStorage與sessionStorage的區別:
它們在生命週期上有區別，sessionStorage與session類似，sessionStorage中存儲 的數據會在⻚面會話結束時會被清除。而localStorage中存儲的數據會一直存在，除非被 手動清除。

如何編輯localStorage、sessionStorage:
與cookie編輯一樣，點擊對應的選項，在下方選擇一個域名，右側就會顯示該域名下 存儲的內容，我們可以直接點擊對他進行編輯，也可以點擊 清空全部，點擊 刪除你 當前選中的那一條數據。

模擬設備:
點擊工具左上⻆的 圖標可以打開模擬設備的工具欄 打開後我們就可以在裏面調試各種移動設備和不同屏幕 大小下的⻚面


我們可以在左側的菜單中選擇預設的移動 設備，也可以選擇Edit去編輯屏幕參數、UA 等信息來模擬想要調試的設備。
點擊 可以旋轉屏幕來預覽和調試橫屏 等情況下的⻚面。

開發者工具中除了默認展示的這些面板外還有很多功 能可以使用，在右上⻆ 的菜單中選擇More tools 菜單，裏面還有許多默認沒有打開的面板，比如 Sensors(傳感器)和Network Conditions(網絡條 件)

Sensors面板:
Sensors面板主要用於模擬設備傳感器的數 據。
Geolocation:用於模擬設備地理位置座標， 在輸入框中調整想要模擬的經緯度，或者在菜單 中選擇預設的一些城市的座標來達到模擬位置的 效果。
Orientation:用於模擬設備加速度計(設備方 向)的數據。可以在下拉菜單中選擇預設的幾種 方向，或者在下方輸入框中輸入響應的值，也可 以在右側的圖片中拖曳手機模型來模擬設備方 向。

Network Conditions面板:
該面板可以用於模擬用戶網絡條件，包含三個功能: Caching: 勾選Disable cache可以禁用網絡緩存 Network throttling: 可以模擬用戶所處的網絡環境 User agent: 可以模擬用戶的user agent 前兩個功能在Network面板中也有

Network throttling: 用於模擬用戶網絡狀態，本質就是對當前網絡進行限速，並且可以添加延遲時間。在
下拉菜單中有預設的幾種限速配置，選擇Add… 會打開一個設置⻚面，在裏面我們可以添 加自定義的限速配置，輸入配置名，下載速度，上傳速度，延遲等信息點擊Add後就保存 進了配置列表中，之後在下拉菜單中就可以看到我們的自定義限速配置，選中對應的限速 配置就會立刻應用該配置。

User Agent:
User Agent中文名爲用戶代理，簡稱UA，它是一個特殊字符串，使得服務器能夠識別 客戶使用的操作系統及版本、CPU 類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、 瀏覽器插件等等。User Agent是可以自由修改的。
一般情況下，瀏覽器在網絡活動時會攜帶它自身的UA。在web應用中，UA一般用於給 特定設備或瀏覽器顯示指定的內容或⻚面。記錄並統計用戶的設備信息等。
各類瀏覽器的User Agent的常規格式如下:
Mozilla/ () ()

我們來看一個桌面版的Firefox的UA:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:70.0) Gecko/20100101 Firefox/70.0
▸ Mozilla/5.0 用來表示與 Mozilla 兼容，由於歷史原因，現代瀏覽器的UA幾乎 都有它。
▸ Macintosh; Intel Mac OS X 10.15; 用來說明瀏覽器所運行的原生系統平臺 (例如 Windows、Mac、Linux 或 Android)，以及是否運行在手機上。在這串 UA中表明該瀏覽器運行在Intel平臺的蘋果電腦上，並且MacOS系統版本爲 10.15。
▸ rv:70.0 表示 Gecko 的發佈版本號是70.0。
▸ Gecko/geckotrail 表示該瀏覽器基於 Gecko 渲染引擎。在桌面瀏覽器
中， geckotrail 固定替換爲 “20100101” 。所以顯示爲Gecko/20100101。 ▸ Firefox/70.0 表示該瀏覽器是 Firefox，並且提供了版本號信息爲70.0。
chrome開發者工具的基礎使用
Network Conditions面板中的User agent可以用來修改UA字符串，達到模擬特定設備訪問 的效果:

默認會勾選 Select automatically 即自動選擇，會使用瀏覽器默認的UA，取消勾選後，你 可以在下方的輸入框中輸入自己想要的UA或者在菜單中選擇預設的一系列UA來達到自定 義UA的效果。

作者簡介：張程 技術研究

更多文章請關注微信公衆號：zachary分解獅 (frankly0423)