前面的話

??對于chrome調試工具，常用的是elements標簽、console標簽、sources標簽和network標簽。但實際上，還有一些不太常見但相當實用的方法可以提高網頁調試效率。本文將詳細介紹那些不常見的chrome調試工具使用方法

?

控制臺

??在控制臺直接輸入代碼，按下回車鍵，代碼就會被執行。其返回值也會在控制臺中被打印出來

??通過上下箭頭鍵，可以隨時從相關列表中找回已經執行過的命令，并在控制臺中重新執行它們

??通常情況下，控制臺只提供單行輸入，我們可以用分號做分割符來執行多個javascript語句；而如果需要多行代碼的話，可以通過組合鍵shift+enter來實現換行，在這種情況下代碼不會被立即執行

?

刷新

??一般地，人們對于刷新的印象只是停留在使用F5快捷鍵上。但實際上，刷新包括三種。在開發者調試工具打開的情況下，長按刷新按鈕，會出現這三種刷新選項

?

搜索

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

?

計算樣式

??通過點擊elements標簽右側的computed子標簽，可以查看元素計算后的樣式

?

資源映射

??使用chrome瀏覽器的sourcemap功能可以將本地的文件和服務器上的文件關聯起來。這樣，通過chrome的開發者工具調試網頁(如更改一個css屬性值)時，本地文件的內容也會相應地發生變化并保存。如果再使用sass的watch命令， 在調試sass文件時，就可以實時保存文件并通過瀏覽器看到效果

??如下圖所示，點擊map to network resource，把本地文件關聯到服務器上相應文件。瀏覽器會智能地把項目目錄下的其他css文件和html文件和服務器上對應的文件都關聯起來

?

當前位置

??在elements標簽下，選擇元素節點，點擊右鍵菜單中的scroll into view，可以滾動瀏覽器到元素所處位置

?

代碼反壓縮

??一般地，線上的javascript代碼都是經過壓縮的，基本上無法直接閱讀。點擊下方的大括號｛｝圖標，瀏覽器會反壓縮過重新排版美化當前的javascript代碼

?

斷點調試

【按鈕介紹】

第一個按鈕(F8)：斷點間調試 第二個按鈕(F10)：單步調試 第三個按鈕(F11)：進入函數 第四個按鈕(shift+F11)：離開函數 第五個按鈕(ctrl+F8)：取消全部斷點

【文件搜索】

??搜索要進行斷點調試的文件，使用ctrl+o即可調出搜索框

【添加watch】

??要將變量或函數添加到watch中，只需進行如下操作

【刪除全部斷點】

??在右側斷點區域(breakpoints)點擊鼠標右鍵，選擇(remove all breakpoints)即可

轉載于:https://www.cnblogs.com/xiaohuochai/p/6344886.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。