前面的話

??對(duì)于chrome調(diào)試工具，常用的是elements標(biāo)簽、console標(biāo)簽、sources標(biāo)簽和network標(biāo)簽。但實(shí)際上，還有一些不太常見(jiàn)但相當(dāng)實(shí)用的方法可以提高網(wǎng)頁(yè)調(diào)試效率。本文將詳細(xì)介紹那些不常見(jiàn)的chrome調(diào)試工具使用方法

?

控制臺(tái)

??在控制臺(tái)直接輸入代碼，按下回車(chē)鍵，代碼就會(huì)被執(zhí)行。其返回值也會(huì)在控制臺(tái)中被打印出來(lái)

??通過(guò)上下箭頭鍵，可以隨時(shí)從相關(guān)列表中找回已經(jīng)執(zhí)行過(guò)的命令，并在控制臺(tái)中重新執(zhí)行它們

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

?

刷新

??一般地，人們對(duì)于刷新的印象只是停留在使用F5快捷鍵上。但實(shí)際上，刷新包括三種。在開(kāi)發(fā)者調(diào)試工具打開(kāi)的情況下，長(zhǎng)按刷新按鈕，會(huì)出現(xiàn)這三種刷新選項(xiàng)

?

搜索

??在elements標(biāo)簽下使用ctrl+f搜索功能，可以使用css選擇器，如'.test'，所以搜索到所有類(lèi)名為test的元素

?

計(jì)算樣式

??通過(guò)點(diǎn)擊elements標(biāo)簽右側(cè)的computed子標(biāo)簽，可以查看元素計(jì)算后的樣式

?

資源映射

??使用chrome瀏覽器的sourcemap功能可以將本地的文件和服務(wù)器上的文件關(guān)聯(lián)起來(lái)。這樣，通過(guò)chrome的開(kāi)發(fā)者工具調(diào)試網(wǎng)頁(yè)(如更改一個(gè)css屬性值)時(shí)，本地文件的內(nèi)容也會(huì)相應(yīng)地發(fā)生變化并保存。如果再使用sass的watch命令， 在調(diào)試sass文件時(shí)，就可以實(shí)時(shí)保存文件并通過(guò)瀏覽器看到效果

??如下圖所示，點(diǎn)擊map to network resource，把本地文件關(guān)聯(lián)到服務(wù)器上相應(yīng)文件。瀏覽器會(huì)智能地把項(xiàng)目目錄下的其他css文件和html文件和服務(wù)器上對(duì)應(yīng)的文件都關(guān)聯(lián)起來(lái)

?

當(dāng)前位置

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

?

代碼反壓縮

??一般地，線上的javascript代碼都是經(jīng)過(guò)壓縮的，基本上無(wú)法直接閱讀。點(diǎn)擊下方的大括號(hào)｛｝圖標(biāo)，瀏覽器會(huì)反壓縮過(guò)重新排版美化當(dāng)前的javascript代碼

?

斷點(diǎn)調(diào)試

【按鈕介紹】

第一個(gè)按鈕(F8)：斷點(diǎn)間調(diào)試 第二個(gè)按鈕(F10)：單步調(diào)試 第三個(gè)按鈕(F11)：進(jìn)入函數(shù) 第四個(gè)按鈕(shift+F11)：離開(kāi)函數(shù) 第五個(gè)按鈕(ctrl+F8)：取消全部斷點(diǎn)

【文件搜索】

??搜索要進(jìn)行斷點(diǎn)調(diào)試的文件，使用ctrl+o即可調(diào)出搜索框

【添加watch】

??要將變量或函數(shù)添加到watch中，只需進(jìn)行如下操作

【刪除全部斷點(diǎn)】

??在右側(cè)斷點(diǎn)區(qū)域(breakpoints)點(diǎn)擊鼠標(biāo)右鍵，選擇(remove all breakpoints)即可

轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuochai/p/6344886.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的不常见但很有用的chrome调试工具使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。