chrome開發者工具

sunnyyou2011發表於2017-05-02

神器--chrome開發者工具

Google Chrome 共提供了8大組工具：

1。Elements：可以看到chrome渲染頁面所需要的HTML、CSS和DOM物件。也可以編輯這些內容更改頁面顯示效果。
2。Network：可以看到頁面向伺服器請求了哪些資源、資源的大小以及載入資源花費的時間，當然也能看到哪些資源不能成功載入。另外，還可以檢視HTTP請求頭，返回內容等。
3。Sources：主要用來除錯JS。
4。TimeLine：提供載入頁面時花費時間的完整分析。所有事件，從下載資源到處理JavaScript,計算CSS樣式等花費的時間都展示在TimeLine中；
5。Profiles(‘簡況，輪廓’)：分析web應用或者頁面的執行時間以及記憶體使用情況。
6。Resources: 對本地快取（IndexedDB、Web SQL、Cookie、應用程式快取、Web Storage）中的資料進行確認及編輯；
7。Audits（‘審計’）: 分析頁面載入的過程，進而提供減少頁面載入時間、提升響應速度的方案；
8。Console: 顯示各種警告與錯誤資訊，並且提供了shell用來和文件、開發者工具互動。

此外，開發者工具還提供了Emulation（‘模擬’）功能，做移動開發時特別有用。

1、Elements：

HTML中的每個元素都是一個DOM節點，所有的DOM節點組成了DOM樹。可以把HTML標籤看作DOM節點。

選中DOM物件之後右鍵即可以看到一些輔助的功能。

1，Add atrribute：在標籤中增加新的屬性；
2，Edit atrribute ：編輯標籤的屬性；
3，Force element state：有時候我們為頁面元素新增一些動態的樣式，比如當滑鼠懸停在元素上時的樣式，這種動態樣式很難除錯。我們可以使用Force Element State強制元素狀態，便於除錯。
    :active , :hover, :focus, :visited
4，Edit as HTML ：以HTML形式更改頁面元素；
5，Copy Css path ：複製css path ；
6，Copy XPath ：複製XPath；
     XPath 是一門在 XML 文件中查詢資訊的語言。XPath 用於在 XML 文件中通過元素和屬性進行導航。
7，Scroll into view ：將頁面滾動到節點處；
8，Break on ：設定斷點；
     Break on subtree modifications（子樹修改）, Break on attributes modifications（屬性修改）, Break on node removal（刪除節點）；

圖中區塊實時顯示當前選中標籤的CSS樣式、屬性等，一共有以下5小部分：

Styles: 顯示使用者定義的樣式，比如請求的default.css中的樣式，和通過Javasript生成的樣式，還有開發者工具新增的樣式；
Computed: 顯示開發者工具計算好的元素樣式；
Event Listeners: 顯示當前HTML DOM節點和其祖先節點的所有JavaScript事件監聽器，這裡的監聽指令碼可以來自Chrome的外掛。
DOM Breakpoints: 列出所有的DOM 斷點；
Properties: 超級全面地列出當前選中內容的屬性，不過基本很少用到。

Styles:

(1)+ : New Style Rule, 可以為當前標籤新增新的選擇器，新建立的樣式為inspector-stylesheet。此外，也可以直接在原有的樣式上增加、修改、禁用樣式屬性，如圖中標記2顯示。
(2)Toggle Element State,

Toggle Element State

(3)Toggle animation controls,

Toggle animation controls

2、Network

有時候我們的網頁載入的很慢，而相同網速下，其他網頁載入速度並不慢。這時候就得考慮優化網頁，優化前我們必須知道載入速度的瓶頸在哪裡，這個時候可以考慮使用Network工具。

Network

請求的每個資源在Network表格中顯示為一行，每個資源都有許多列的內容

。Name/Path：資源名稱以及URl路徑；
。Method：HTTP請求方法；
。Status/Text：HTTP 狀態碼/文字解釋；
。Type：請求資源的MIME型別；
。Initiator（‘發起人；啟動程式’）：解釋請求是怎麼發起的，有四種可能值：
1，Script ：請求是由script指令碼處理髮送的；
2，Parser：請求是由頁面的HTML解析時傳送的；
3，Redirect：請求是由頁面重定向傳送的；
4，Other：請求是由其他過程傳送的，比如頁面裡的link連結點選，
在地址輸入URL地址。
。Size/Content ：Size是響應頭部和響應體結合起來的大小，Content是請求內容解碼後的大小。
。Time/Latency（‘潛伏期，延遲，潛伏’）：Time是從請求開始到接收到最後一個位元組的總時長，Latency是從請求開始到接收到第一個位元組的時間；
。Timeline：顯示網路請求的視覺化瀑布流，滑鼠懸停在某一個時間線上，可以顯示整個請求各部分花費的時間。

以上是預設顯示的列，不過我們可以在瀑布流的頂部右鍵，這樣就可以選擇顯示或者隱藏更多的列比如Cache-Control, Connection, Cookies, Domain等。

右鍵點選

我們可以按照上面任意一項來給資源請求排序，只需要單擊相應的名字即可。Timeline排序比較複雜，單擊Timeline後，需要選擇根據Start Time、Response Time、End Time、Total Duration(‘持續的時間，期間’)、Latency中的一項來排序。

單擊排序-Timeline排序

小功能模組：

從左到右：
1，Record Network Log：紅色表示正在記錄資源請求資訊；
2，Clear：清空所有的資源請求資訊；
3，Capture（‘捕獲’） screenshots（‘截圖’）：捕捉螢幕截圖；
4，Filter: 過濾資源請求資訊；

5，Use small（large） resource raws：每一行顯示更少的內容；
6，Show（Hide）overview：顯示（隱藏）概況；

7，Perserve（‘保護，儲存，保持’） Log（記錄）：Do not clear log on page reload/navigation 再次記錄請求的資訊時不擦除之前的資源資訊；
8，Disable cache: 不允許快取的話，所有資源均重新載入。
9，No throttling（‘節流，限流，限制’）：

No throttling 下拉選單

選擇Filter 後出現過濾條件：

Filter 條件

當我們點選某一內容型別(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)後，只顯示該特定型別的資源。

在XHR請求中，可以在一個請求上右鍵選擇“Replay XHR”來重新執行一個XHR請求。

有時候我們需要把Network裡面內容傳給別人，這時候可以在資源請求行的空白處右鍵然後選擇Save as HAR with Content儲存為一個HAR檔案。然後可以在一些第三方工具網站，比如這裡重現網路請求資訊。
選定某一資源後，我們還可以Copy as cURL，也就是複製網路請求作為curl命令的引數。

此外，我們還可以檢視網路請求的請求頭，響應頭，已經返回的內容等資訊

資源的詳細內容有以下幾個：

。HTTP request and response headers
。Resource preview: 可行時進行資源預覽；
。HTTP response: 未處理過的資源內容；
。Cookie names and values: HTTP請求以及返回中傳輸的所有Cookies；
。WebSocket messages: 通過WebSocket傳送和接收到的資訊；
。Resource network timing: 圖形化顯示資源載入過程中各階段花費的時間。