今天無意中發(fā)現(xiàn)了一個(gè)普及Chrome知識(shí)的文章,現(xiàn)在把我曾不知道的整理在這。
快速跳轉(zhuǎn)到指定行
在Sources中打開的文件,想跳轉(zhuǎn)到指定行,可輸入ctrl+g
ctrl+o
盲再,輸入:
和行數(shù),就不是去尋找一個(gè)文件瓣铣,而同樣是跳轉(zhuǎn)行號答朋。
在控制臺(tái)選擇元素
DevTools控制臺(tái)支持一些變量和函數(shù)來選擇DOM元素:
$()是document.querySelector()的簡寫:返回第一個(gè)和css選擇器匹配的元素。$(‘div’)是返回這個(gè)頁面中第一個(gè)div元素 $$()是document.querySelectorAll()的簡寫:返回一個(gè)和css選擇器匹配的元素?cái)?shù)組 $0-$4是依次返回五個(gè)最近你在元素面板選擇過的DOM元素的歷史記錄棠笑,$0是最新的記錄
多個(gè)光標(biāo)同時(shí)插入
在編輯一個(gè)文件的時(shí)候梦碗,按住ctrl,在要編輯的地方點(diǎn)擊鼠標(biāo)腐晾,可以設(shè)置多個(gè)插入符叉弦,這樣可以一次在多個(gè)地方編輯。
美化代碼
有些代碼看起來很亂藻糖,這個(gè)可讓代碼更易讀淹冰。
點(diǎn)擊左下角的{}
下一個(gè)匹配項(xiàng)
在Sources標(biāo)簽下編輯文件時(shí),按下ctrl+d
巨柒,當(dāng)前選中的單詞的下一個(gè)匹配也會(huì)被選中樱拴,可同時(shí)對它們進(jìn)行編輯柠衍。
通過workspaces來編輯本地文件
Workspaces是Chrome DevTools的一個(gè)強(qiáng)大功能,這使DevTools變成了一個(gè)真正的IDE晶乔。Workspaces會(huì)將Sources選項(xiàng)卡中的文件和本地項(xiàng)目中的文件進(jìn)行匹配珍坊,所以你可以直接編輯和保存,而不必復(fù)制/粘貼外部改變的文件到編輯器正罢。
為了配置Workspaces阵漏,只需打開Sources
選項(xiàng),然后右擊左邊面板的任何一個(gè)地方翻具,選擇Add Folder To Worskpace
履怯,或者只是把你的整個(gè)工程文件夾拖放入Developer Tool。
無論在哪一個(gè)文件夾裆泳,被選中的文件夾叹洲,包括其子目錄和所有文件都可以被編輯。為了讓W(xué)orkspaces更高效工禾,可以將頁面中用到的文件映射到相應(yīng)的文件夾运提,允許在線編輯和簡單的保存。
Chrome 實(shí)驗(yàn)性功能
chrome://flags/
這個(gè)能更好修改瀏覽器特性闻葵,但是也可能會(huì)造成某些不穩(wěn)定民泵。
不定期更新