Chrome用不好，Bug改到老，這些Chrome瀏覽器使用技巧你需要掌握

作者：裝糊涂先森 2020-03-08 16:58:51

前端工程師大部分工作成果需要在瀏覽器中查看，使用 chrome 瀏覽器的頻率非常高。更好更有效率地使用 chrome，將 chrome 配置成趁手的瀏覽器，將極大提升編程效率。現(xiàn)將chrome瀏覽器的一些技能分享給大家

技巧篇

控制臺(tái)

在 chrome 開(kāi)發(fā)者工具中的任何一個(gè)面板下(除 console 面板外)，按住 esc 都可以在該面板下方新生成一個(gè) console 面板

通常情況下，控制臺(tái)只提供單行輸入，可以用分號(hào)做分割符來(lái)執(zhí)行多個(gè) javascript 語(yǔ)句;而如果需要多行代碼的話，可以通過(guò)組合鍵 shift+enter 來(lái)實(shí)現(xiàn)換行，在這種情況下代碼不會(huì)被立即執(zhí)行。

代碼片段

chrome 在 sources 頁(yè)面提供 snippets 一欄，這里我們可以隨時(shí)編寫 Javascript 代碼，運(yùn)行結(jié)果會(huì)打印到控制臺(tái)。代碼是全局保存的，在任何頁(yè)面，包括新建標(biāo)簽頁(yè)，都可以查看或運(yùn)行這些代碼。使用 command + enter 可以運(yùn)行該代碼

跳轉(zhuǎn)位置

在 elements 標(biāo)簽下，選擇元素節(jié)點(diǎn)，點(diǎn)擊右鍵菜單中的 scroll into view，可以滾動(dòng)瀏覽器到元素所處位置。

展開(kāi) DOM

在 Elements 標(biāo)簽頁(yè)中，如果要查看一個(gè)元素中曾經(jīng)很深的子元素，可以按住 option 鍵，點(diǎn)擊元素，則元素的 DOM 結(jié)構(gòu)會(huì)完全展開(kāi)

工具篇

Infinity新標(biāo)簽頁(yè)

Infinity是一款標(biāo)簽頁(yè)美化的插件，使用它不在使你的瀏覽器那么的單調(diào)，還可以添加書簽在標(biāo)簽頁(yè)下面，方便打開(kāi)，是一個(gè)很不錯(cuò)的值得推薦的插件。用了不用在自己的書簽收藏夾慢慢的找書簽了，可以打開(kāi)瀏覽器的第一時(shí)間打開(kāi)自己需要的網(wǎng)站。