11個(gè)程序員必須知道的實(shí)用Chrome DevTools開發(fā)技巧
windows：Ctrl + Shift + P macOS：Cmd + Shift + P
然后，我們可以轉(zhuǎn)到“命令”面板，在這里我們可以選擇各種命令來(lái)執(zhí)行各種強(qiáng)大的功能。
1、強(qiáng)大的屏幕截圖
截取網(wǎng)頁(yè)上所有內(nèi)容的屏幕快照，包括可視窗口中未出現(xiàn)的所有內(nèi)容 精確捕獲DOM元素的內(nèi)容
屏幕截圖捕獲完整尺寸的屏幕截圖 屏幕截圖捕獲節(jié)點(diǎn)屏幕截圖
例子
'abcde'.split('').reverse().join('')
好吧，上面的代碼確實(shí)反轉(zhuǎn)了字符串。但是，莫仍然不了解split（）reverse（）join（）方法的作用以及運(yùn)行這些中間步驟的結(jié)果。
因此，現(xiàn)在你想逐步執(zhí)行上述代碼，可以編寫如下代碼：
好了，在完成這些步驟之后，我們知道了每個(gè)方法運(yùn)行的返回值。
但這是非常多余的。它既容易出錯(cuò)，又難以理解。實(shí)際上，在控制臺(tái)中，我們可以使用magic變量$_來(lái)引用上一個(gè)操作的結(jié)果。
$_是一個(gè)特殊變量，其值始終等于控制臺(tái)中上一次操作的結(jié)果。此技術(shù)是調(diào)試代碼的便捷方法。
3、重新發(fā)送XHR請(qǐng)求
在前端項(xiàng)目中，我們經(jīng)常需要使用XHR向后端發(fā)出請(qǐng)求以獲取數(shù)據(jù)。如果你想重新發(fā)送XHR請(qǐng)求，該怎么辦？
對(duì)于新手來(lái)說(shuō)，他可能會(huì)刷新頁(yè)面，但這可能很麻煩。實(shí)際上，我們可以直接在“網(wǎng)絡(luò)”面板中進(jìn)行調(diào)試。
打開網(wǎng)絡(luò)面板
單擊XHR按鈕
選擇你要重新發(fā)送的XHR請(qǐng)求
重看XHR
這是一個(gè)gif示例：
4、監(jiān)視頁(yè)面加載狀態(tài)
從一開始就完全加載頁(yè)面可能需要十秒鐘以上的時(shí)間。這是我們需要監(jiān)視頁(yè)面在不同時(shí)間的加載方式的地方。
在Chrome DevTools中，我們可以使用Capture Screenshots“網(wǎng)絡(luò)”面板下的頁(yè)面捕獲截圖。
5、復(fù)制變量
你可以將JavaScript變量的值復(fù)制到其他地方嗎？
這似乎是不可能完成的任務(wù)，但是在Chrome中，有一個(gè)名為的函數(shù)copy可以幫助你復(fù)制變量。
該copy功能不是由ECMAScript定義的，而是由Chrome提供的。使用此功能，你可以將JavaScript變量的值復(fù)制到剪貼板。
6、將圖像復(fù)制為數(shù)據(jù)URI
處理頁(yè)面上的圖像有兩種方法，一種是通過(guò)外部資源鏈接加載它們，另一種是將圖像變?yōu)?span style="color: rgb(0, 0, 0);font-size: 16px;text-align: left;">數(shù)據(jù)URL。
數(shù)據(jù)URL（以data:方案開頭的URL）使內(nèi)容創(chuàng)建者可以在文檔中內(nèi)聯(lián)嵌入小文件。在WHATWG撤消該名稱之前，它們以前被稱為“數(shù)據(jù)URI”。
將這些小圖像程序到數(shù)據(jù)URL中并將它們直接嵌入到我們的代碼中，可以減少頁(yè)面需要發(fā)出的HTTP請(qǐng)求的數(shù)量，從而加快頁(yè)面加載速度。
因此，在Chrome瀏覽器中，我們?nèi)绾螌D像轉(zhuǎn)換為數(shù)據(jù)URL。
這是一個(gè)gif示例：
7、表對(duì)象數(shù)組
假設(shè)我們有一個(gè)像這樣的對(duì)象數(shù)組：
let users = [{{name：'Jon'，age：22}，{name：'bitfish'，age：30}，{name：'Alice'，age：33}]
這樣的陣列在控制臺(tái)中不容易查看。如果數(shù)組更長(zhǎng)且元素更復(fù)雜，那么它將變得更加難以理解。
幸運(yùn)的是，Chrome提供了表格功能，可以將一系列對(duì)象列表化。
在許多情況下，此功能非常有用。
8、在“元素”面板中拖放
有時(shí)，我們想要調(diào)整頁(yè)面上某些DOM元素的位置以測(cè)試UI。在“元素”面板中，你可以拖放任何HTML元素并更改其在頁(yè)面中的位置：
在上面的gif中，我將div的位置拖動(dòng)到“元素”面板中，并且它在網(wǎng)頁(yè)上的位置已同步更改。
9、引用控制臺(tái)中當(dāng)前選定的元素
$0 是另一個(gè)魔術(shù)變量，它引用“元素”面板中當(dāng)前選定的元素。
一個(gè)gif示例。
10、觸發(fā)CSS偽類
偽類讓你應(yīng)用樣式的元素不僅涉及到文檔樹的內(nèi)容，而且還涉及到外部因素，如導(dǎo)航儀的歷史（:visited等），其內(nèi)容的狀態(tài)（如:checked在某些表單元素）或鼠標(biāo)的位置（如:hover，可以讓你知道鼠標(biāo)是否在元素上）。
我們可能為一個(gè)元素編寫多個(gè)偽類，并且為了便于我們測(cè)試這些樣式，我們可以直接在Elements面板中觸發(fā)這些樣式。
例子：
這是一個(gè)網(wǎng)頁(yè)：
!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{font-size: 150px;}div:hover{color: red;}div:active{color: blue;}div:focus{color: brown;}</style></head><body><div>hello world</div></body></html>
然后，我們?cè)跒g覽器中將其打開，并通過(guò)“元素”面板調(diào)試其偽類樣式。
隱藏元素的快捷方式，在調(diào)試CSS樣式時(shí)，我們通常需要隱藏一個(gè)元素。如果選擇元素并按H鍵盤，則可以快速隱藏該元素。
此操作是將visibility: hidden !important;樣式添加到相應(yīng)的元素。
11、將DOM元素存儲(chǔ)在全局臨時(shí)變量中
如果要在控制臺(tái)中快速獲取DOM元素引用，可以執(zhí)行以下操作：
選擇元素
右鍵點(diǎn)擊鼠標(biāo)
存儲(chǔ)為全局變量
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
