不常見但頗有用的chrome調試工具使用方法

前面的話

  對於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)便可