Google Chrome調試js入門


    平常在開發過程中,經常會接觸到前端頁面。那么對於js的調試那可是家常便飯,不必多說。最近一直在用火狐的Firebug,但是不知道怎么的不好使了。網上找找說法,都說重新安裝狐火瀏覽器就可以了,但是我安裝了好多遍,也沒好使,后來聽說Firebug停止更  新了。沒辦法既然不給用,那我換瀏覽器不就可以了嘛!一開始想到就是谷歌,谷歌瀏覽器是常用來調試JS代碼的工具,本文主要介紹如何利用谷歌瀏覽器來調試JS代碼,協助我們進行開發工作,加快開發效率。

      1、首先,打開谷歌瀏覽器,然后打開調試功能欄,按快捷鍵F12或者ctrl+shift+j,就可以打開谷歌瀏覽器的開發者工具。打開后頁面如下所示。

  

  2、下面主要介紹一下開發者工具中常用的幾個基礎常用功能。左上角第二個選項,是用來切換手機頁面的。如果我們訪問的網址是手機端wap頁面,則點擊此按鈕,就可以模擬手機進行訪問了。

  

 

  3、Network是網絡工具,可以查看請求數據的狀態,類型,大小,時間等,如下圖。Network是在調試中常用的工具,可以查看發送的請求是否正確,返回的數據是否正常等。

  

  4、Sources可以用來查看頁面的源文件,包括JS文件和Html文件。找到想要調試的JS代碼,在代碼前單擊,即可設置斷點。當運行JS代碼時,會自動進入到斷點執行。同Java調試類似,JS調試也可以單步運行、進入函數體內調試、直接運行到下一斷點等。

  

 

  5、如上圖所示,右上角4個斷點,分別是直接運行到下一斷點、單步運行、進入函數體內運行、返回函數執行結果。對應的快捷鍵分別是F8、F10、F11和shift+F11。在調試時,把鼠標放在某個變量上,就可以查看該變量的運行值。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM