chrome開發者工具功能拾遺：Sources面板篇

本文主要介紹一些本人在此以前不甚瞭解，但通過了解後又發現對本身的工做頗有幫助的一些chrome開發者工具調試技巧/功能。也借這篇文章提醒一下本身，在實際項目中多使用這些功能，儘快熟悉起來，提高本身的工做效率。

---

直接修改js進行調試

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

1. 直接給某行js代碼設置斷點。
   

2. 刷新頁面後，程序就會停在斷點設置的那一行上。
   

3. 而後咱們就能夠在斷點那一行代碼的後面添加咱們本身的debug代碼了，例以下面這樣：
   

4. 按下快捷鍵Ctrl + s保存，發現該面板變紅了，即表示保存生效：
   

5. 此時利用快捷鍵F10，就能最終看到剛剛添加的debug代碼的效果了：
   

值得注意的是，因爲單步調試只能往下走而不能回頭，若是要從新測試的話就要刷新頁面，但刷新頁面會致使剛剛保存的調試代碼消失，恢復到線上版本的代碼。

---

在單步調試過程當中直接查看變量

在單步調試過程當中，咱們總免不了看看各個變量當前的值是什麼，以此來判斷問題是否是出如今當前這一行代碼。
查看變量值的方法仍是有不少的，下面列舉兩種經常使用的：

1. 經過Sources - Watch面板，在這裏設置想要監控的變量，隨着單步調試的進行，這些被監控的變量的值也會隨之更新。
   

2. 經過console打印變量，除了在代碼裏寫console.log()外，實際上是能夠直接在單步調試的過程當中直接用console來打印的，例以下圖：
   

除了上述的這兩種方法，還有更簡單的方法：在單步調試的過程當中，直接把鼠標移到想查看的變量，而後就會彈出個小框把變量的值給顯示出來啦：

這是否是很是方便咧？不過這種方法在本質上其實跟上述兩種方法是同樣的，都有做用域的限制。好比說，上圖的那個keywords變量就是查看不了的，由於代碼已經執行到了success的這個回調函數上了，已經不是在同一個做用域啦。

---

Snippets（程序小片斷）

Snippets提供了在chrome裏保存及運行一段js代碼的功能，咱們能夠簡單地把snippet當作是筆記，用來搭配直接修改js進行調試（由於刷新後添加的代碼就不見了）來記錄下每次調試須要用到的代碼；也能夠用做寫一些小demo來試函數、api等功能。