Chrome開發者工具的12條使用技巧

時間 2019-11-19

標籤 chrome 開發者工具使用技巧欄目 Chrome 简体版

原文原文鏈接

JavaScript斷點，審查HTML與CSS並實時更改，性能分析... 是的，本週內容均與IE8開發者工具備關。html

[你在逗我嗎？我明白了，再見。哦不，是永遠不見。]react

傻瓜，個人意思是沒人喜歡IE8，本週的內容固然與Chrome DevTools有關。須要特別指出的是，我一直使用Chrome Canary¹，推薦你也使用它，由於它能體驗Chrome的最新功能。程序員

下面這份關於使用技巧的清單我但願你至少有一條沒聽過，假如你不瞭解的那條剛好能幫到你，那我就太開心了。web

（文章中的gif圖循環播放可能讓你心煩，若是你用的是大屏幕，建議打開Chrome DevTools，刪掉容納圖片的DOM節點；若是是小屏幕，用撲克牌或者圍巾擋住那張圖就好...）chrome

好的，下面我開始複製粘貼了:)設計模式

1.動畫審查跨域

動畫效果的確很棒，它能讓每一個人開心。DevTools的animation選項²能夠將動畫播放速度降到25%或10%（儘管和兔子看世界的角度差很少...），固然也能禁止某個特定動做。安全

2.截屏功能cookie

當你處於設備模式³時，打開設備選項的彈窗並點擊Capture screenshot選項,你就獲得了一張包括設備外觀的截圖。網絡

3.控制檯中的$0

通常人我不告訴...

在console中鍵入$0，你將獲得最近一次在Elements中選中的DOM節點。

這是元素的正常參考信息，你能夠嘗試鍵入$0.classList.add('touch-of')或者$0.getBoundingClientRect()看看，又或者你在頁面中使用了jQuery，鍵入$($0).data()也能夠看到結果。

默認狀況下，Chrome會以DOM對象形式展現節點信息。若是你想看節點的JavaScript對象形式，鍵入console.dir($0)便可。

若是你正在用React並安裝了React dev tools擴展程序，鍵入$r就能看到react組分信息。譬如鍵入$r.props就能看到任意一個DOM對象。

額外提示:在console中鍵入一個元素的ID一樣能獲得該元素的參考信息，由於元素ID是"非真正意義上"的全局變量（是否是很奇怪...）

4.console中的箭頭函數

這並不是嚴格意義上的DevTools技巧，但我就是寫了，你必須得看...相信我，你會喜歡它的。隨着箭頭函數的出現，在console中一行代碼就可能解決問題。譬如鍵入performance.getEntries().filter(entry=>entry.name.includes('static'))能夠獲得你對某個特定域名的全部請求。

固然你能夠按shift+enter對代碼換行。console由CodeMirror支持(Chrome56以後)，有個功能叫'智能換行'。若是該功能認爲你想另寫一行代碼，按enter鍵就能自動換行。但在回調函數裏該功能彷佛不起做用。

謝謝Kayce指出這個問題。

5.對選擇器的搜索匹配

Elements面板的搜索功能不只能搜索字符串(那它還能幹什麼?!)，還能匹配CSS選擇器。這讓不須要網絡的開發者寫選擇器時至關順手，好比自動化測試。

6.嘗試不一樣色彩

當你在嘗試各類顏色時，你能夠用eyedropper⁴選擇頁面中的任何元素更改其顏色，或者經過調色板實現更改。固然用Web安全色也徹底能夠。

7.檢查實際字體

有時不能肯定實際使用的是何種字體。Elements面板的底部有個Computed選項，點擊就能查看實際使用的字體，即便你的電腦的font-family列表中沒有這種字體，字體名也能顯示。

8.編輯頁面中的文本

假如你有一個指定寬度的菜單欄，你想知道增長現有文本長度後的摺疊效果，請調整到設計模式(在console中鍵入document.designMode = 'on' 運行便可)。這樣你就能點擊任意文本並編輯了。

9.幻燈片模式

一個最棒的性能調整功能是Network選項的幻燈片模式⁵。它讓你清楚地看到用戶加載內容的過程，這比難以理解的domContentLoaded實在好太多。