前言
之前調試前端bug都是在開發環境中做完並多次測試沒有問題之后發布測試環境，驗收合格之后發布生產。但生產環境偏偏會有和開發和測試環境不一致的情況，例如測試環境需要加密，而開發環境先不加密，測試環境傳給我們的時間格式和生產環境時間格式不一致，數組對象不一致等導致線上生產報錯的bug。
為了更好的在線上環境檢測到具體的bug，節省我們在本地把地址改為生產的地址並走多一遍流程測試的麻煩，Chrome瀏覽器dbug測試就顯得尤為重要了。
一、定位js代碼並標記dbug
首先F12打開控制台，然后選擇"Sources"選項卡，在Sources面板中選擇要調試的文件，在右側會打開該文件，瀏覽找到要調試的JavaScript代碼，點擊代碼行號，設置dbug；
像上面的兩個console,第一個打印的是'aaa'，第二個打印的是'bbb'，此時在第二個console左側點擊一下，就會出現dbug的紅點，刷新網頁時，運行到第二個console就會停止，也就是只會打印aaa。
二、格式化顯示的JS代碼
現在很多公司都要求前端代碼打包並加密，因此我們看到的代碼可能幾乎沒有可讀性可言，此時我們只需要點擊下面的格式化按鈕，瀏覽器就會自動幫我們整理好代碼的格式，真心大愛Chrome。
三、跳轉到下一個dbug/單步運行/步入行數內部
我們的程序大多數情況不可能只定位一個dbug，但定位太多個又會導致控制台顯得很亂，並且無法直接在函數內部定位。
但幸運的是Chrome都有快捷鍵幫助我們解決上述問題。
按下F8就可以運行完成就運行到下一個斷點處，按F10就可以單步調試，就是指代碼運行到下一行而不是下一個斷點，按F11再點擊代碼的行號就可以在方法體的函數內部標記dbug。
四、查看變量的值
鼠標移到變量上面，就會顯示變量的內容，右側調試面板中的Scope中也可以看到局部變量的內容。
注意，如果在賦值前dbug沒有運行到這個位置，那么顯示的變量值為undefined。
五、利用Watch監視變量的值
在Source中選擇變量，然后點擊右鍵，在右鍵菜單中選擇"Add selected text in watches"，就會將當前選擇的文本內容加到Watch中了，這里的內容會隨着代碼的執行而動態變化。
六、利用Call Stack查看代碼的層次關系以及Breakpoints查看所有斷點
也是在Sources頁下方就可以看到。
七、最重要的一點--在Console中顯示和改變變量值
在Console中直接輸入變量，或是在Source中選擇變量，然后點擊右鍵，在右鍵菜單中選擇"Evaluate in console"，就可以在Console中顯示變量的值了。也可以直接在Console中輸入變量名=變量值，就可以修改變量的值了，相當於我們無需借助編輯器就可以調試線上的數據，而一旦報錯瀏覽器也會定位到錯誤的行，可以說非常贊了。
這種方式可以在變量賦新值之前配合dbug使用，或者直接console出該變量的值，來確定是否和其他環境的值一樣被自己解密或轉變格式。
總結
以上方式足夠在線上環境找出大多數bug，最后在本地把接口地址換成開發環境的地址，代碼改完后生產環境測試一遍，基本一步到位。