google chrome是一款由google公司開發的網頁瀏覽器，是程式設計師們開發前端的必備利器。掌握一定的chrome除錯方法可以快速排查和定位問題，大幅度提高開發效率。下面就由小編來介紹一下chrome除錯時會使用的功能。圖一 chrome功能面板
elements：元素面板
console：控制台面板
source: 源**面板
audits：審計面板
network: 網路面板
performance: 效能面板
memory: 記憶體面板
security：安全面板
audits: 審計面板
2.1 network面板
network面板可以看到所有的資源請求，包括網路請求，資源，html，css，js檔案等請求，可以根據需求篩選請求項，一般多用於網路請求的檢視和分析，分析後端介面是否正確傳輸，獲取的資料是否準確，請求頭，請求引數的檢視。
圖二 network面板基本功能介紹
圖三 network模擬網路延遲功能介紹
圖四 network單個請求響應詳情檢視
如圖四點選單個url請求，可以檢視的請求的具體詳情資訊，請求詳情中包含以下多個部分:
(2) response：檢視服務端返回的資料資訊
(3) preview：preview是將response中的資料進行格式化輸出
(4) timing：是對請求及相應時間的具體展示，其每個功能字段功能描述
圖五 timing包含的字段功能描述
stalled： 從http連線建⽴到請求能夠被發出送出去(真正傳輸資料)之間的時間花費。包含用於處理**的時間，如果有已經建立好的連線，這個時間還包括等待已建立連線被復用的時間；
request sent： 發起請求的時間；
waiting： (time to first byte (ttfb)) 是最初的網路請求被發起到從伺服器接收到第乙個位元組這段時間，它包含了tcp連線時間，傳送http請求時間和獲得響應訊息第乙個位元組的時間。
content download： 獲取response響應資料的時間花費。
圖六 cookie包含的字段功能描述
name：cookie的名稱
value：cookie的值
domain: cookie所屬的網域名稱
path: cookie所屬的url
expires: cookie存活的時間
size: cookie的位元組大小
httponly: 表示cookie只能被瀏覽器設定,js不能修改
secure: 表示cookie只能在安全連線上傳輸
2.2 source面板
source面板的主要功能是斷點除錯，在js**中寫debugger會自動斷點到該位置。
圖七 斷點除錯面板
在該面板的監視變數上側有繼續執行、單步跳過等按鈕，可以在當前斷點後，逐行執行**，或者直接讓其繼續執行，具體如下:
圖八 斷點的相關操作按鈕
2.3 elements面板
elements面板是檢視頁面元素的面板,頁面上使用的元素、元素樣式、元素繫結的事件及元素繫結的屬性都可以檢視。
（1）style
css的預處理器，直接更改css樣式在介面中可以直觀的看到效果。點選具體位置之後，可以跳轉到屬性檔案具體位置。
圖九 style功能介紹
（2）event listeners
檢視元素監聽的事件，在開發中，尤其是維護其他人的**時，會出現不了解元素對應的監聽事件，這個時候，可以在這個麵中找到。這個不僅能看到對應的事件函式，還可以定位該函式所在的js檔案以及在該檔案中的具體位置（行數）。
圖十 event listeners功能介紹
（2）properties
檢視元素具有的屬性與方法，比去檢視api文件與原始碼更方便直觀,新版本的谷歌瀏覽器可以在console面板執行console.dir($0)實現相同的功能
圖十一 通過console實現properties功能介紹
2.4 console面板
console是瀏覽器開發者工具自帶的api，通過該面板可以實現**日誌輸出、js的調式、網頁中報錯資訊檢視等，其常用的功能如下：
圖十二 console功能面板介紹
chrome使用技巧
chrome對於開發人員來說，絕對是乙個神器。下面，介紹關於它的一些小技巧 我之前一般如果查詢每個檔案，都是開啟控制台，在source控制面板裡面乙個乙個去找，但是這樣的效率是極低的，其實我們可以ctrl p,就可以輸入檔名，進行搜尋相應的資源了，當然，也可以只輸入一部分，比如，輸入.js就會把所有...
Chrome 除錯技巧
可快速關注 alert console 基本輸出 console.log在控制台輸出點東西，其實console還有其它的方法 console.log 列印字串 在控制台列印自定義字串 console.error 我是個錯誤 在控制台列印自定義錯誤資訊 console.info 我是個資訊 在控制台列...
Chrome 除錯技巧
前言 除了我們日常使用的除錯方法，在chrome中，其含有一些有意思的方法，有助於提高我們的開發除錯效率。使用sublime的人或習慣用command p 進行檔案的跳轉，在chrome dev tools中其實也有類似的跳轉方法。command p command p 檔名 數字 sublime中...