[1]刷新 [2]搜索 [3]計算樣式 [4]資源映射 [5]當前位置 ...
前面的話
對於chrome調試工具，常用的是elements標簽、console標簽、sources標簽和network標簽。但實際上，還有一些不太常見但相當實用的方法可以提高網頁調試效率。本文將詳細介紹那些不常見的chrome調試工具使用方法
刷新
一般地，人們對於刷新的印象只是停留在使用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，可以滾動瀏覽器到元素所處位置
