Chrome開發者工具不徹底指南（1、基礎功能篇）

　　就算你不是一名前端開發工程師，相信你也不會對Chrome瀏覽器感到陌生。根據最新的一份（2015/06）的瀏覽器市場佔有率報告，Chrome近乎佔有瀏覽器天下的半壁江山。簡單、快捷使它成爲了新時代人們的新寵。若是你是一名web開發人員，我推薦你使用Chrome。做爲前端開發的"IDE"，你只須要搭配一個編輯器就能完成幾乎全部的開發任務了。關於它的使用和功能分析要麼都是大而不全，要麼是鉅細糜煩。本系會比較詳細地分享滷煮的一些Chrome（F12開發者功能）使用經驗，從一些基礎的功能開始到它的一些高級性能分析器（Timeline、Profiles）,在最後，將會推薦幾款好的插件，但願對您的開發工做有些許的做用。若是你對一些面板模塊功能已經很瞭解能夠直接跳過去閱讀你感興趣的部分。

1、Elements

在Element中主要分兩塊大的部分
A：HTML結構面板
B：操做dom樣式、結構、時間的顯示面板

1.在A中，每當你的鼠標移動到任何一個元素上，對應的html視圖中會給該元素藍色的背景。

2.若是你單擊選中一個元素，在A部分的底部，會顯示該元素在html結構中的位置關係

3.而後你能夠在B部分的styles選項中編輯該元素的樣式，而且看到html結構的實時更新（大大的福利）

4.你能夠在B界面中切換到Event Listeners選項，觀察該元素綁定的事件。

click 是事件名稱

.div1 事件是索引名稱（也就是經過什麼綁定的）

attachment 事件來源

handler裏面包含事件的毀掉主體內容

useCapture表示該事件是否向上冒泡

5.選中一個元素，右擊鼠標，你會看到有一個彈出窗口出現，裏面有若干選項

Add attribut : 爲該元素添加屬性
Edit attribute：修改該元素的屬性
Force element state： 爲元素激活某種狀態（主要用在能夠幾乎的元素好比a、input、button等）
Edit as HTML：編輯該元素（你能夠重寫它的整個content）甚至修改它的標籤名稱
中間簡單的掠過.......
Break on：爲該元素添加dom操做事件監聽。包含三個選項（樹結構改變、屬性改變、節點移除）。這個選項的做用是幫助咱們監控和定位操做元素的代碼。請參看下圖事例：

6.在A界面的彈出選項窗口中選擇node removal，在B界面切換到DOM Breakpoints 選項，能夠看到有註冊信息。而後咱們點擊click me按鈕觸發刪除div3的事件，能夠看到瀏覽器自動爲咱們定位刪除該元素的代碼部分，而且中止執行js代碼：

 

7.在B界面中切換到Properties選項，能夠看到選中元素的各類信息（英文單詞裏面的介紹比較簡單，就不一一介紹了）。

 

8.點擊A界面的任意地方，按快捷鍵ctrl+F能夠看到底部有輸入框，在輸入框中輸入你想要查找的任何內容，若是匹配到了，都回在A面板中高亮顯示

9.或者你能夠點擊左上角的問號圖標，而後把鼠標移動到視圖界面中，對準元素按下鼠標左鍵，對應的A界面會定位到選擇的元素。

 

 

2、Network

1.Network是一個監控當前網頁全部的http請求的面版，它主體部分展現的是每一個http請求，每一個字段表示着該請求的不一樣屬性和狀態

Name：請求文件名稱
Method：方法（常見的是get post）
Status：請求完成的狀態
Type：請求的類型
Initiator：請求源也就是說該連接經過什麼發送（常見的是Parser、Script）
Size：下載文件或者請求佔的資源大小
Time：請求或下載的時間
Timeline：該連接在發送過程當中的時間狀態軸（咱們能夠把鼠標移動到這些紅紅綠綠的時間軸上，對應的會有它的詳細信息：開始下載時間，等待加載時間，自身下載耗時）

2.單擊面板中的任意一條http信息，會在底部彈出一個新的面板，其中記錄了該條http請求的詳細參數header（表頭信息、返回信息、請求基本狀態---請參看http1.1協議內容對號入座）、Preview（返回的格式化轉移後文本信息）、response（轉移以前的原始信息）、Cookies（該請求帶的cookies）、Timing（請求時間變化）

3.在主面板的頂部，有一些按鈕從左到右它們的功能分別是：是否啓用繼續http監控（默認高亮選中過）、清空主面板中的http信息、是否啓用過濾信息選項（啓用後能夠對http信息進行篩選）、列出多種屬性、只列出name和time屬性、preserve log（目前不清楚啥用）、Dishable cahe（禁用緩存，全部的304返回會和fromm cahe都回變成正常的請求忽視cache conctrol 設定）；

4.最後在主面板的底部有記錄了總體網絡請求狀態的一些基本信息

3、Resources

Resources部分較簡單，他主要向咱們展現了本界面所加載的資源列表。還有cookie和local storage 、SESSION 等本地存儲信息，在這裏，咱們能夠自由地修改、增長、刪除本地存儲。

　　至於webSql，我知道的並很少，在開發中不多用到。若是你想了解這方面的信息，我推薦你去閱讀這篇博客
http://www.cnblogs.com/chuncn/archive/2010/11/22/1884783.html