一些大概率會用到的tips

整體面板

• run command 命令集Cmd + Shift + P
  
• store as global通過其來儲存為全局變量，變量名為 temp1 一直延續(xù)下去，就可以配合 copy 獲取變量名打印了，該功能對 HTML 元素同樣適用
• copy命令復(fù)制變量
• 編輯頁面上的任何文本,在控制臺輸入document.body.contentEditable="true"或者document.designMode = 'on'就可以實現(xiàn)對網(wǎng)頁的編輯了
• Shift+Esc：打開瀏覽器的任務(wù)管理器，（瀏覽器卡住崩潰時常用）

$ 符

這個 $ 和 jQuery 中的 $ 有部分相似之處，均可以作為選擇器來使用，

• $() 返回滿足指定 規(guī)則的第一個元素
• $$() 返回滿足指定 CSS 規(guī)則的所有元素（dom數(shù)組）
• $_，取到在控制臺中次執(zhí)行結(jié)果的引用
• $0是剛選中的那個dom，$0 $1 $2 $3 $4代表最近審查選中過的5個DOM節(jié)點
• $x將所有滿足指定 XPath 的節(jié)點放在一個數(shù)組返回

console面板

• console.time和console.timeEnd， 一般配合使用，可以用于統(tǒng)計時間

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t')
// t: 28.18603515625ms

• console.trace追蹤代碼調(diào)用棧，類似于代碼的端點

• console.table或者table打印表格顯示

• console.dir或者dir目錄收縮展示
  

• console.group和console.groupEnd分組輸出信息，跟dir有點像，不過group的名字是變量的名稱
  

  
  console.groupCollapsed跟console.group是一樣的，使用前者會默認(rèn)收縮

• keys和values， 跟Object.keys()和 Object.values() 相同

• copy與Save global variable配合使用，新版chrome右鍵支持copy obj和copy value

Element面板

• 審查選中某個dom之后，按H鍵（切換到英文輸入法）就可以展示/隱藏dom節(jié)點（使用的是visiblity: hidden屬性，因此會占據(jù)文檔流）
• 審查元素 scroll into view

Network面板

• 重新發(fā)送xhr請求，右鍵，選擇replay xhr
  在平時和后端聯(lián)調(diào)時，我們用的最多的可能就是Network面板了。但是每次想重新查看一個請求，我們往往都是通過刷新頁面、點擊按鈕等方式去觸發(fā)xhr請求，這種方式有時顯得會比較麻煩，我們可以通過google提供的Replay XHR的方式去發(fā)起一條新的請求
• capture screenshots 勾選分析網(wǎng)絡(luò)請求

Waterfall 資源的詳細(xì)網(wǎng)絡(luò)加載信息

相關(guān)字段描述:

1、Queuing 排隊的時間花費?？赡苡捎谠撜埱蟊讳秩疽嬲J(rèn)為是優(yōu)先級比較低的資源（圖片）、服務(wù)器不可用、超過瀏覽器的并發(fā)請求的最大連接數(shù)（Chrome的最大并發(fā)連接數(shù)為6）.

2、Stalled 從HTTP連接建立到請求能夠被發(fā)出送出去(真正傳輸數(shù)據(jù))之間的時間花費。包含用于處理代理的時間，如果有已經(jīng)建立好的連接，這個時間還包括等待已建立連接被復(fù)用的時間。

3、Proxy Negotiation 與代理服務(wù)器連接的時間花費。

4、DNS Lookup 執(zhí)行DNS查詢的時間。網(wǎng)頁上每一個新的域名都要經(jīng)過一個DNS查詢。第二次訪問瀏覽器有緩存的話，則這個時間為0。

5、Initial Connection / Connecting 建立連接的時間花費，包含了TCP握手及重試時間。

6、SSL 完成SSL握手的時間花費。

7、Request sent 發(fā)起請求的時間。

8、Waiting (Time to first byte (TTFB)) 是最初的網(wǎng)絡(luò)請求被發(fā)起到從服務(wù)器接收到第一個字節(jié)這段時間，它包含了TCP連接時間，發(fā)送HTTP請求時間和獲得響應(yīng)消息第一個字節(jié)的時間。

9、Content Download 獲取Response響應(yīng)數(shù)據(jù)的時間花費。

? 可以根據(jù)請求時間的長短，對項目做出相應(yīng)的優(yōu)化。如，有些JS、CSS文件可以合并、進行壓縮等操作，對于圖片可以懶加載

source面板

自定義代碼片段(snippets)

我們經(jīng)常有些 JavaScript 的代碼想在控制臺中調(diào)試，假如代碼量多的情況下直接在 console 下寫比較麻煩，或者我們經(jīng)常有些代碼片段 (防抖、節(jié)流、獲取地址欄參數(shù)等) 想保存起來，每次打開 Devtools 都能獲取到這些代碼片段，而不用再去從筆記里面找。

performance面板

overrides重寫

如果你想把修改的值保存下來，刷新頁面的時候不會被重置，可以考慮這個模塊
select folder for overrides

fileSystem

在里面可以添加本地文件進行編輯操作，相當(dāng)于一個編輯器（這種方法是對本地源代碼的編輯）
add folder to workspaces添加要同步的工作目錄，能夠?qū)⒏谋４娴接嬎銠C上相同文件的本地副本。

移動設(shè)備

當(dāng)針對移動設(shè)備進行開發(fā)時，會有一些諸如獲取地理位置，角度、尺寸、方向等操作。我們使用快捷鍵Ctrl+shift+p調(diào)出菜單，然后搜索sensors，點擊會出現(xiàn)Sensors面板：

user-agent

在電腦端模擬手機端來做User-Agent的設(shè)置來模擬請求，

user-agent設(shè)置

這樣window.navigator.userAgent取到的值，也會取到相應(yīng)不同的值

新特性

1. invert利用新的復(fù)選框反轉(zhuǎn)過濾網(wǎng)絡(luò)請求的條件
   比如說，您可以在過濾文本框里輸入 “status-code: 404” ，查看那些狀態(tài)碼為 404 的網(wǎng)絡(luò)請求。點擊反轉(zhuǎn)復(fù)選框，可反轉(zhuǎn)過濾條件（顯示那些狀態(tài)碼為不是 404 的網(wǎng)絡(luò)請求）。
   

2.支持中文，設(shè)置面板選擇語言，習(xí)慣了的話直接使用英文也可以