Chrome Devtools常用除錯功能

　　在實習期間，為了能更好的地完成上級派發下來的任務，同時提升自己的程式碼編寫效率，熟練地使用除錯工具是會起到很大的作用的。下面就以谷歌瀏覽器的devtools為例來一起學習一下吧！

1. 開啟工具面板

• windows：組合鍵Ctrl + Shift + i 或者直接摁 F12
• Mac：cmd + opt + i

2. HTML DOM操作

　　事先申明一下，這裡的操作僅僅用於除錯，不會改變檔案內容，重新整理網頁之後會自動恢復。

　　選中某一個節點：

　　方法一：右鍵。選單前四個就是可以操作HTML的選項；

　　方法二：快捷鍵。對應右鍵選單，如下：

　　此外，快捷鍵 h 還可以切換該節點的visibility屬性，Ctrl + Z 撤銷修改。

　　若想改變節點順序，可以直接摁住滑鼠左鍵拖拽，這時候會出現藍色的水平線，把該節點拖拽到你想要的放置的水平線處鬆開滑鼠左鍵即可。

3. 檢視節點元素繫結的事件

　　除錯面板的右邊欄上方有一個 Event Listeners按鈕，點選，然後把Ancestors一項的複選框勾選取消掉，就能看到當前選中的節點元素上繫結有哪些事件啦。

4. 修改樣式

　　同樣的，除錯面板的右邊欄上方有一個 styles按鈕，點選，接著點選右上角的 ‘+’ 號，就可以編輯當前選中節點的樣式啦。

5. 斷點

　　打斷點除錯程式碼在平時的程式碼檢查中用的最多，可以快速地找到問題所在。

　　首先切換到source板塊，然後Ctrl+p開啟指定檔案，在指定程式碼塊處打斷點（直接在左邊點選一下），然後重新整理網頁，網頁變灰，這時就處於斷點執行環境了。斷點執行時的快捷鍵如下：

• F8: 繼續執行
• F10: step over, 單步執行, 不進入函式
• F11: step into, 單步執行, 進入函式
• shift + F11: step out, 跳出函式

6. 控制檯console

　　$選擇器，使用函式$(selector)或者$$(selector)，selector是你想要選擇的元素的標籤名，id或class，注意加 "." 或者 "#"；一個$只能選擇一個元素，兩個$可以選擇多個元素。實際上，這兩個函式只是對document.querySelector()和document.querySelectorAll()的簡單封裝。

　　console.log()是我們最常用的列印方法，我在看了某篇部落格才知道，原來他還可以加引數和添樣式（請原諒我的無知）：

• 　　新增變數

var name = "丫頭";
console.log("%s,歡迎你！", name); // 丫頭，歡迎你！

　　在需要插入變數的地方，放一個“%s”佔位，然後把這個變數放在第二個引數位置上，就可以實現變數傳參了。當然，其實直接用字串連線的方式也可以，我主要是想說說他的引數功能。

• 　新增樣式

console.log("%c我是紅色的", "color:red")

　　最後打印出來的字就是紅色的，這在百度的首頁有相同的例子，開啟百度網站的控制檯，校園招聘那一欄就是這樣的顯示。

　　console還有其他的方法，我就不多說了，因為我也不怎麼熟悉，而且暫時還沒用到。

7. Sources

　　我在這裡只說一下snippets這一項，當你想要除錯某段程式碼的時候，把它貼上在console裡面實在是太麻煩，又不好改，所以這個snippets就是很好的選擇，可以直接在除錯工具內編寫執行，而且不會隨著瀏覽器重新整理而被銷燬，除非是你手動把它刪除。