本文主要介紹一些本人在此之前不甚瞭解，但經過了解後又發現對自己的工作很有幫助的一些chrome開發者工具除錯技巧/功能。也借這篇文章提醒一下自己，在實際專案中多使用這些功能，儘快熟悉起來，提升自己的工作效率。

直接修改js進行除錯

chrome開發者工具中一個比較常用的功能就是在Elements面板修改css直接看效果，殊不知，原來在Sources面板中，連js都可以直接修改。
原本我也感到很驚訝，js跟css的差別很大，js是執行完就完事了，哪像css一直都有效的呀，那這修改執行完的js又能有什麼作用呢？在查閱相關資料後，發現這功能主要是在設定斷點(breakpoint)進行單步除錯時用的，步驟如下：
1. 直接給某行js程式碼設定斷點。

值得注意的是，由於單步除錯只能往下走而不能回頭，如果要重新測試的話就要重新整理頁面，但重新整理頁面會導致剛剛儲存的除錯程式碼消失，恢復到線上版本的程式碼。

在單步除錯過程中直接檢視變數

在單步除錯過程中，我們總免不了看看各個變數當前的值是什麼，以此來判斷問題是不是出現在當前這一行程式碼。
檢視變數值的方法還是有很多的，下面列舉兩種常用的：

1. 通過Sources - Watch面板，在這裡設定想要監控的變數，隨著單步除錯的進行，這些被監控的變數的值也會隨之更新。
   
2. 通過console列印變數，除了在程式碼裡寫console.log()外，其實是可以直接在單步除錯的過程中直接用console來列印的，例如下圖：
   

除了上述的這兩種方法，還有更簡單的方法：在單步除錯的過程中，直接把滑鼠移到想檢視的變數，然後就會彈出個小框把變數的值給顯示出來啦：

這是不是非常方便咧？不過這種方法在本質上其實跟上述兩種方法是一樣的，都有作用域的限制。比如說，上圖的那個keywords變數就是檢視不了的，因為程式碼已經執行到了success

Snippets（程式小片段）

Snippets提供了在chrome裡儲存及執行一段js程式碼的功能，我們可以簡單地把snippet當做是筆記，用來搭配直接修改js進行除錯（因為重新整理後新增的程式碼就不見了）來記錄下每次除錯需要用到的程式碼；也可以用作寫一些小demo來試函式、api等功能。