JS使用Chrome瀏覽器怎么實現調試線上代碼

這篇文章主要講解了JS使用Chrome瀏覽器怎么實現調試線上代碼，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

前言

　　之前調試前端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出該變量的值，來確定是否和其他環境的值一樣被自己解密或轉變格式。

看完上述內容，是不是對JS使用Chrome瀏覽器怎么實現調試線上代碼有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。