Google Chrome調試js入門

　　　　日常在開發過程當中，常常會接觸到前端頁面。那麼對於js的調試那但是屢見不鮮，沒必要多說。最近一直在用火狐的Firebug,可是不知道怎麼的很差使了。網上找找說法，都說從新安裝狐火瀏覽器就能夠了，可是我安裝了好多遍，也沒好使，後來據說Firebug中止更　　新了。沒辦法既然不給用，那我換瀏覽器不就能夠了嘛！一開始想到就是谷歌，谷歌瀏覽器是經常使用來調試JS代碼的工具，本文主要介紹如何利用谷歌瀏覽器來調試JS代碼，協助咱們進行開發工做，加快開發效率。

      一、首先，打開谷歌瀏覽器，而後打開調試功能欄，按快捷鍵F12或者ctrl+shift+j，就能夠打開谷歌瀏覽器的開發者工具。打開後頁面以下所示。

　　

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

　　

 

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

　　

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

　　

 

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