谷歌瀏覽器如何調試js？谷歌瀏覽器調試javascript詳細步驟
首先我們打開開發者工具，你可以直接在頁面上點擊右鍵，然后選擇審查元素或者在Chrome的工具中找到或者你直接記住這個快捷方式：Ctrl Shift I (或者Ctrl Shift J直接打開控制臺)，或者直接按F12 。
打開的開發者工具就長下面的樣子，建議大家將開發者工具彈出作為一個獨立的窗口：
1、Elements標簽頁
這個就是查看、編輯頁面上的元素，包括HTML和CSS：
左側就是對頁面HTML結構的查看與編輯 ， 你可以直接在某個元素上雙擊修改元素的屬性，或者你點右鍵選;Edit asHtml;直接對元素的HTML進行編輯，或者刪除某個元素 ， 所有的修改都會即時在頁面上得到呈現 。(注：看到上面右鍵菜單的最后一個選項;審查元素了么?這是不是說明這個開發者工具的頁面也是HTML來的呢?你點一下就知道了哦，嘿嘿)
你還可以對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處：
Elements標簽頁的右側可以對元素的CSS進行查看與編輯修改：
你還可以通過這里看到各CSS選擇器設置的CSS值的覆蓋情況 。
下面的Metrics可以看到元素占的空間情況(寬、高、Padding、Margin)
注意到上面的Properties沒有?這個很有用哦，可以讓你看到元素具有的方法與屬性，比查API手冊要方便得多哦(要注意某些方法和屬性在IE、FireFox等其他瀏覽器下面的支持情況哦) 。
2、Resources標簽頁
Resources標簽頁可以查看到請求的資源情況，包括CSS、JS、圖片等的內容 ， 同時還可以查看到存儲相關的如Cookies、HTML5的Database和LocalStore等，你可以對存儲的內容編輯和刪除 。
這里的CSS文件有一個好玩的特性，你可以直接修改CSS文件，并且修改即時生效哦：
3、Network標簽頁
【谷歌瀏覽器如何調試js？谷歌瀏覽器調試javascript詳細步驟】Network標簽頁對于分析網站請求的網絡情況、查看某一請求的請求頭和響應頭還有響應內容很有用，特別是在查看Ajax類請求的時候，非常有幫助 。注意是在你打開Chrome開發者工具后發起的請求 ， 才會在這里顯示的哦 。
