1. 首頁 > 生活 > >

chrome瀏覽器調試快捷鍵 谷歌瀏覽器如何打開調試模式

小知識



文章插圖
chrome瀏覽器調試快捷鍵 谷歌瀏覽器如何打開調試模式

文章插圖
最近打算寫一寫Chrome教程文檔 ， 不知道大家最感興趣的是什么內容呢？
1.如何打開
無論是在Windows還是Mac ， 都可以使用（FN）+F12鍵打開Chrome的Network面板 。
2.面板組成
如圖所示 ， Chrome的Network面板主要由5個部分組成 ， 包括控制器、過濾器、概覽、請求列表、概要 ， 下面簡單介紹下這5個部分的作用 。
控制器：控制面板的外觀與功能
過濾器：過濾請求列表中顯示的資源
按住Command（Mac）或Ctrl（Window/Linux） ， 然后點擊過濾器可以同時選擇多個過濾器 。
概覽：顯示HTTP請求、響應的時間軸 。
請求列表：默認時間排序 ， 可選擇顯示列 。
概要：請求總數、總數據量、總花費時間等 。
image-20190522114020527
3.控制器
image-20190523101125138
模擬慢速網絡
image-20190523102954487
還可以自定義 ， 點擊Add…
image-20190523103103402
4.過濾器
如何對請求進行過濾呢？
4.1按字符串
1.鍵入png到過濾文本框 。僅顯示包含文本的文件png 。在這種情況下 ， 與過濾器匹配的唯一文件是PNG圖像 。
image-20190524112336773
2.類型/.*.[cj]s+$/ 。DevTools過濾掉任何資源 ， 其文件名不以a j或c后跟1個或多個s字符結尾 。
image-20190524112320315
3.類型-main.css 。DevTools過濾掉了main.css 。如果任何其他文件與模式匹配 ， 它們也將被過濾掉 。
image-20190524112259664
4.2按類型
image-20190523102734525
XHR、JS、CSS、Img、Media、Font、Doc、WS（WebSocket）、Manifest或Other（此處為列出的任何其他類型）多個類型 ， 按住Command（Mac）或Ctrl（Windows、Linux）按時間過濾：概覽面板 ， 拖動滾動條隱藏Data URLs：CSS圖片等小文件以 BASE64 格式嵌入HTML中 ， 以減少HTTP請求數 。
4.3屬性過濾
下面演示使用Filter過濾器 ， 如圖所示：
image-20190523114458965
domain:僅顯示來自指定域的資源 。您可以使用通配符字符（*）納入多個域has-response-header：顯示包含指定HTTP響應標頭的資源is：使用 is:running 可以查找 WebSocket 資源 ， is:from-cache 可查找緩存讀出的資源Larget-than：顯示大于指定大小的資源（以字節為單位） 。將值設為1000等同于設置為1kmethod：顯示通過指定 HTTP 方法類型檢索的資源mime-type：顯示指定 MIME 類型的資源mixed-content：顯示所有混合內容資源（mixed-content:all）,或者僅顯示當前顯示的資源（mixed-content:displayed）scheme：顯示通過未保護HTTP（scheme:http）或受保護 HTTPS（scheme:https）檢索的資源 。set-cookie-domain：顯示具有 Set-Cookie 標頭并且 Domain 屬性與指定值匹配的資源 。set-cookie-name：顯示具有 Set-Cookie 標頭并且名稱與指定值匹配的資源 。set-cookie-value：顯示具有 Set-Cookie 標頭并且值與指定值匹配的資源 。status-code：僅顯示 HTTP 狀態代碼與指定代碼匹配的資源 。
多屬性間通過空格實現 AND 操作 。
5.請求列表的排序
時間排序 ， 默認按列排序按活動時間排序Start Time：發出的第一個請求位于頂部Response Time：開始下載的第一個請求位于頂部End Time：完成的第一個請求位于頂部Total Duration：連接設置時間和請求/響應時間最短的請求位于頂部Latency：等待最短響應時間的請求位于頂部
6.請求列表
image-20190523142032553
簡單介紹下每列的含義：
Name：資源的名稱
Status：HTTP狀態代碼
Type：請求的資源的MIME類型
Initiator：發起請求的對象或進程 。它可能有以下幾種值：
Parser（解析器）：Chrome的 HTML 解析器發起了請求（鼠標懸停顯示JS腳本）Redirect（重定向）：HTTP重定向啟動了請求Script（腳本）：腳本啟動了請求Other（其他）：一些其他進程或動作發起請求 ， 例如用戶點擊鏈接跳轉到頁面或在地址欄中輸入網址 。
Size：服務器返回的響應大小（包括頭部和包體） ， 可顯示解壓后大小
Time：總持續時間 ， 從請求的開始到接受響應中的最后一個字節
Waterfall：各請求相關活動的直觀分析圖
鼠標右鍵單擊 ， 添加其他列：
image-20190523144119290
還可以自定義header頭：
image-20190523144534008
7.預覽請求內容
如圖所示 ， 在請求列表點擊以下
image-20190523145421841
功能包括：
查看頭部 ， 包括請求頭、響應頭 。查看Cookie預覽響應正文：查看圖像用查看響應正文時間詳細分布導出數據為HAR格式查看未壓縮的資源大?。篣se Large Request Rows瀏覽器加載時間（概覽、概要、請求列表）DOMContentLoaded 事件的顏色設置為藍色 ， 而load事件設置為紅色將請求數據復制到剪貼板Copy Link Address：將請求的網址復制到剪貼板Copy Response：將響應包體復制到剪貼板Copy as cURL：以 cURL 命令形式復制請求Copy All as cURL：以一系列 cURL 命令形式復制所有請求Copy All as HAR：以 HAR 數據形式復制所有請求查看請求上下游：按住 shift 鍵懸停請求上 ， 綠色是上游 ， 紅色是下游 。
下面演示如何查看請求上下游 ， 首先按住 shift 鍵 ， 其次移動鼠標到不同請求 ， 如圖所示：
image-20190523154602391
image-20190523155233126
8.瀏覽器加載時間
觸發流程：
解析 HTML 結構加載外部腳本和樣式表文件解析并執行腳本代碼 // 部分腳本會阻塞頁面的加載DOM 樹構建完成 // DOMContentLoaded 事件加載圖片等外部文件頁面加載完畢 // load事件
9.請求時間詳細分布
點擊請求列表后 ， 找到Timing ， 看到如圖所示的字段
image-20190523162127459
Queueing：瀏覽器在以下情況下對請求排隊
存在更高優先級的請求此源已打開六個 TCP 連接 ， 達到限值 ， 僅適用于 HTTP/1.0 和 HTTP/1.1瀏覽器正在短暫分配磁盤緩存中的空間
Stalled：請求可能會因 Queueing 中描述的任何原因而停止
DNS Lookup：瀏覽器正在解析請求額IP地址
Proxy Negotiation：瀏覽器正在與代理服務器協商請求
Request sent：正在發送請求
ServiceWorker Preparation：瀏覽器正在啟動Service Worker
Request to ServiceWorker：正在將請求發送到Service Worker
Waiting（TTFB）：瀏覽器正在等待響應的第一個字節 。TTFB表示Time To First Byte（至第一字節的時間） 。此時間包括1次往返延遲時間及服務器準備響應所用的時間
Content Download：瀏覽器正在接收響應
Receiving Push：瀏覽器正在通過 HTTP/2 服務器推送接收此響應的數據
Reading Push：瀏覽器正在讀取之前收到的本地數據
10.阻止請求
當某些資源不可用時 ， 頁面的外觀和行為如何？它完全失敗了 ， 還是仍然有些功能？阻止要求查找：
1.按Control+ Shift+ P或 Command+ Shift+ P（Mac）打開命令菜單 。
image-20190524112405392
2.鍵入block ， 選擇“ 顯示請求阻止” ， 然后按Enter 。
image-20190524112456854
3.單擊添加模式 。
4.類型main.css 。
image-20190524112514524
5.單擊添加 。
6.重新加載頁面 。正如預期的那樣 ， 頁面的樣式有點混亂 ， 因為它的主樣式表已被阻止 。請注意main.css網絡日志中的行 。紅色文本表示資源已被阻止 。
image-20190524112542980
main.css已被封鎖
【chrome瀏覽器調試快捷鍵 谷歌瀏覽器如何打開調試模式】7.取消選中啟用請求阻止復選框 。