首頁 > web前端 > js教程 > Chrome+JS實現斷點調試

Chrome+JS實現斷點調試

php中世界最好的语言
發布: 2018-04-18 10:56:40
原創
1786 人瀏覽過

這次帶給大家Chrome JS實現斷點調試,Chrome JS實現斷點調試的注意事項有哪些,下面就是實戰案例,一起來看一下。

技巧二:快速跳到某個斷點的位置

右邊的Breakpoints會總結你在JS檔案所有打過的斷點,點選跟checkbox同一行的會暫時取消這個斷點,若是點選checkbox下一行的會直接跳到該斷點的位置

技巧三:查看斷點內部的作用範圍【很實用】

# 右側的scope可以看到相當多實用的訊息,例如this的指向,是否有值,斷點是物件還是其他等。

技巧4:監聽事件斷點

右側的Event Listener Breakpoints可以選擇性的監聽某類行為事件,例如鍵盤輸入,拖曳等。 。勾選前面的checkbox就可以生效,當你觸發改行為的時候就會跳到觸發的JS

# 技巧5:DOM及 XHR監聽跳轉

# DOM Breakpoints : 是你Elements頁,感覺要監聽某段dom的可能有一些行為,但是又不具體知道確切位置就可以用了

# XHR Breakpoints: 向伺服器請求的,ajax的核心要點

預設勾選了,所有XHR行為,可選項是判斷URL。 。 。我用的不多

技巧6:單步執行、單步進入、強制進入、單步退出

這個東東是調試中不可或缺的,其實用過firebug的小夥伴,對這個就有一個清晰的認識你。基本上一樣;

功能名詞依次,不懂的可以看看我firebug那個系列的

  • Pause script excution 【單步驟執行,在斷點處暫停,等待調試–不是直譯】 : 暫停後這個按鈕會變成Resume script excution 【繼續執行】 , 快捷鍵【F8 或Ctrl 】

  • Step over next function call【單步跳過】 : 會跳到下一個斷點,快捷鍵【F10 或Ctrl `】

  • Step into next function call【單步進入】 : 會進入函數內部偵錯,快速鍵【F11 或Ctrl ;】

  • Step out of current function 【單步驟跳出】: 會跳出目前這個斷點的函數,快捷鍵【Shift F11 或Ctrl Shift ;】

# 後面的就是chrome的特色功能

  • Deactivate breakpoints : 讓所有斷點暫時失效,快捷鍵【Ctrl F8】

  • Don't Pause on exceptions: 不要在表達式處暫停,還有一個可選項【Pause On Caught Exceptions– 若拋出異常則需要暫停在那裡】

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue.js行動端實作上拉載入下拉重新整理

##JSONBuddy的安裝步奏詳解

以上是Chrome+JS實現斷點調試的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板