Google Chrome 除錯JS簡單教程

 

一、移動端開發除錯

現在新版chrome彈出控制檯後如下圖，其中的工具對移動端除錯非常方便。

 
在控制檯中可以直接模擬手機、調整UA、修改網路連線狀態

 

二、Elements標籤頁

這個就是檢視、編輯頁面上的元素，包括HTML和CSS：
左側就是對頁面HTML結構的檢視與編輯，你可以直接在某個元素上雙擊修改元素的屬性，或者你點右鍵選;Edit as Html;直接對元素的HTML進行編輯，或者刪除某個元素，所有的修改都會即時在頁面上得到呈現。
 

三、Console標籤頁

就是Javascript控制檯了：
在這個皮膚可以檢視錯誤資訊、列印除錯資訊（console.log()）、寫一些測試指令碼，還可以當作Javascript API檢視用。

四、javascript除錯的技巧

 

首先請開啟“谷歌瀏覽器”（廢話），然後開啟一個網頁，按“F12”會出現一個控制檯，找到一個叫做“Sources”,點選它

 

OK，如果你的頁面現在已經載入過JS指令碼的話，那麼應該可以看到一些JS檔案了

 

然後你可以在左側側欄的序號那些位置點選一下就設定成斷點，當你要執行某個函式的時候瀏覽器就會自動進入除錯模式了

 

點選圖中左上角的除錯按鈕，第一個是程式向前執行。 細心的你肯定會發現Scope Variables區域顯示的竟然就是Object物件的元素

 

關於js除錯的幾個控制簡介

js控制皮膚就是在頂部的側皮膚，這幾個工具條可以讓你按步執行程式碼。

繼續：繼續執行程式碼，直到我們遇到另一個斷點。

步驟：忽略方法體內部，也就是不進入到方法體內部細節再執行，只呼叫取返回值繼續在當前執行下步。

進入細節：細節逐語句執行，進入方法體再執行。

退出細節：細節語句返回主函式體。

斷點開關：決定該斷點是否開啟/關閉。
 

chrome中也提供了一個格式化程式碼的功能。
 
一般我們開啟的大部分的網站有些js檔案是已經被yui\uglifyjs等js壓縮工具壓縮過的程式碼，讓你看格式來進行除錯十分不容易（根本就不可能）。點選（pretty print）的按鈕立即將當前檔案進行標準格式了。我囉嗦一句，這個格式化程式碼目前我只知道能格式化dom和js，css檔案沒有格式化效果當然也就不支援了。


然後點選底部滑鼠的 “{}“，就會

 

五、Network標籤頁

Network標籤頁對於分析網站請求的網路情況、檢視某一請求的請求頭和響應頭還有響應內容很有用。注意是在你開啟Chrome開發者工具後發起的請求，才會在這裡顯示的。
點選左側某一個具體請求URL，可以看到該請求的詳細HTTP請求情況：包括網路請求、頁面響應的各個引數，方便優化。
1行是用來選擇需要檢視請求響應的方式；
2行選擇檢視需要檢視的檔案型別；
3行是是顯示請求響應時間；
4行是具體的各個頁面請求資料。

第1行：

• group by frame: 逐幀顯示
• preserve log: 保留請求日誌
• disable cache:禁用快取
• offline:離線
• online的各個選擇：模擬除錯3G網路測試

第4行：選擇一個檔案雙擊

• headers:請求頭資訊和響應頭資訊
• preview: 根據你所選擇的資源型別（JSON、圖片、文字）顯示相應的預覽。
  　　　　在Preview(預覽功能)中，控制檯會把傳送過來的json資料自動轉換成javascript的物件格式
• response:響應主體，頁面內容
• timing:時間

 

六、Security標籤頁 可以告訴你這個網站的安全性，檢視有效的證照等

七.Audits標籤頁 可以幫你分析頁面效能，有助於優化前端頁面，分析後得到的報告

八.Post man你值得擁有的網路請求神器

在我們的開發過程中，後端的介面都是由發起AJAX請求而獲取到的相關資料，但是很多情況是我們的業務還沒有做到那塊時，後端的同學介面都已經準備好了，但是為了便於後期的工作，將介面請求的資料模擬訪問，然後對介面聯調很重要，也很方便，因為我們不可能把每個請求程式碼都寫到檔案裡編譯好了再去瀏覽器內檢視，這時候可以安裝一個post man網路請求外掛，在谷歌應用商店下載，需要翻牆

該擴充套件程式使用非常簡單，功能同時也非常強大，輸入你的請求，選擇好請求的method，需要請求引數的挨個填好，send之後，就可以看到返回的資料，這個小工具很利於我們的開發