建站
咨詢
售后
建站咨詢
新聞中心
Chrome瀏覽器，作為前端開發(fā)者最親密的伙伴，相信你一定不陌生。我們可以用它來查看網(wǎng)絡(luò)請求、分析網(wǎng)頁性能、調(diào)試最新的 JavaScript 功能……
除了這些，它還提供了很多強(qiáng)大但不常見的功能，可以大大提高我們的開發(fā)效率。
我們來看一下。
1.添加條件斷點(diǎn)
通過下面的代碼，我們希望食物的名字是 當(dāng)斷點(diǎn)被觸發(fā)時(shí)，我該怎么做呢？
const foods = [
{
name: '',
price: 10
},
{
name: '',
price: 15
},
{
name: '',
price: 20
},
]
foods.forEach((v) => {
console.log(v.name, v.price)
})
在數(shù)據(jù)量很大的情況下，使用條件斷點(diǎn)對開發(fā)工作很有幫助，大大提高效率。
2.在控制臺使用`$I`安裝npm包
有時(shí)候想用day.js或者lodash之類的API，又不想去官網(wǎng)查。如果你可以直接在控制臺上嘗試它會(huì)很好。
- 安裝控制臺導(dǎo)入器插件
- $i('name') 安裝 npm 包
3. 重新發(fā)送 XHR 請求
我們在工作中經(jīng)常需要和后端開發(fā)人員一起調(diào)試接口。使用這個(gè)功能可以提高我們的對接效率。
只需要執(zhí)行以下步驟：
- 選擇Network面板
- 點(diǎn)擊Fetch/XHR
- 選擇你要重新發(fā)送的請求
- 右鍵單擊并選擇重播XHR
4.快速切換主題顏色
有人喜歡chrome的白色主題，也有人喜歡黑色，我們可以通過快捷鍵在兩個(gè)主題之間快速切換。
- cmd + shift + p 執(zhí)行命令命令
- 輸入“切換到深色主題”或“切換到淺色主題”來切換主題
5.在控制臺快速發(fā)送請求
對于同一個(gè)請求，有時(shí)需要修改輸入?yún)?shù)并重新發(fā)送，什么是捷徑？
只需要執(zhí)行以下步驟：
- 選擇Network面板。
- 單擊Fetch/XHR。
- 選擇要重新發(fā)送的請求。
- 選擇 Copy as fetch 面板。
- 修改輸入?yún)?shù)并重新發(fā)送。
6. 復(fù)制 JavaScript 變量
我們?nèi)绾螌?fù)雜的數(shù)據(jù)復(fù)制到剪貼板？
太奇妙了，您可以使用 Chrome 瀏覽器提供的復(fù)制功能來完成。
7. 在控制臺中獲取選中的 DOM 元素
當(dāng)我們通過“元素”面板選擇一個(gè)元素時(shí)，如果我們想通過 JavaScript 打印它的一些屬性，比如寬度、高度、位置等，我們應(yīng)該怎么做？
通過 Elements 面板選擇 DOM 元素。
使用 $0 訪問控制臺中的元素。
8.捕獲全尺寸屏幕截圖
如果我們要對一個(gè)多屏的頁面進(jìn)行截圖，有什么好的辦法嗎？
功能強(qiáng)大的 Chrome 瀏覽器可以輕松做到這一點(diǎn)。
- 準(zhǔn)備你要捕獲的頁面的內(nèi)容
- CMD + Shift + P 執(zhí)行命令
- Enter 捕獲全尺寸屏幕截圖并按 Enter
哇，這太酷了?。。?/p>
現(xiàn)在，有一個(gè)新問題，如果我們只想截取部分截圖頁面，我們應(yīng)該做什么？
也很簡單，在第三步輸入“捕獲節(jié)點(diǎn)截圖”即可。
9.展開所有子節(jié)點(diǎn)
如何一次展開 DOM 元素的所有子節(jié)點(diǎn)？不是一個(gè)一個(gè)嗎？
你可以使用“元素”面板中的組合鍵“Alt + 單擊”一次展開所有子節(jié)點(diǎn)。
10.使用“$”引用上次執(zhí)行的結(jié)果
我們看一下這個(gè)場景，我們對字符串進(jìn)行了各種操作，然后我們想知道每一步的結(jié)果，我們應(yīng)該怎么做呢？
'fatfish'.split('').reverse().join('')你可能會(huì)做這樣的事情
// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf
更簡單的方法
使用“$”獲取上一次操作的結(jié)果，無需每次都復(fù)制。
// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
$_.join('') // hsiftaf
11.使用“$”和“$$”快速選擇DOM元素
使用 document.querySelector 和 document.querySelectorAll 在控制臺中選擇當(dāng)前頁面的元素是最常見的需求，但是有點(diǎn)太長了，我們可以使用 $ 和 $$ 來代替。
標(biāo)題名稱：11個(gè)很酷的ChromeDevtools技巧
瀏覽地址：http://www.5511xx.com/article/cdoggoj.html
