1.如何調出開發者工具
- 按F12調出
- 右鍵檢查（或快捷鍵Ctrl+Shift+i）調出
2.開發者工具初步介紹
chrome開發者工具最經常使用的四個功能模塊：元素（ELements）、控制檯（Console）、源代碼（Sources），網絡（Network）。css
-
元素（Elements）：用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。css能夠即時修改，即時顯示。大大方便了開發者調試頁面html
-
控制檯（Console）：控制檯通常用於執行一次性代碼，查看JavaScript對象，查看調試日誌信息或異常信息。還能夠看成Javascript API查看用。例如我想查看console都有哪些方法和屬性，我能夠直接在Console中輸入"console"並執行~git
-
源代碼（Sources）：該頁面用於查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是能夠調試JavaScript源代碼，能夠給JS代碼添加斷點等。github
-
網絡（Network）：網絡頁面主要用於查看header等與網絡鏈接相關的信息。chrome
2.1元素（Elements）
- 查看元素的代碼：點擊左上角的箭頭圖標（或按快捷鍵Ctrl+Shift+C）進入選擇元素模式，而後從頁面中選擇須要查看的元素，而後能夠在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置
-
查看元素的屬性：定位到元素的源代碼以後，能夠從源代碼中讀出改元素的屬性。以下圖中的class、src、width等屬性的值。api
- 固然從源代碼中讀到的只是一部分顯式聲明的屬性，要查看該元素的全部屬性，能夠在右邊的側欄中查看：
- 修改元素的代碼與屬性：點擊元素，然查看右鍵菜單，能夠看到chrome提供的可對元素進行的操做：包括編輯元素代碼（Edit as HTML）、修改屬性（Add attribute、Edit attribute）等。選擇Edit as HTML選項時，元素進入編輯模式，能夠對元素的代碼進行任意的修改。固然，這個修改也僅對當前的頁面渲染生效，不會修改服務器的源代碼，故而這個功能也是做爲調試頁面效果而使用。
- 查看元素的CSS屬性：在元素的右邊欄中的styles頁面能夠查看該元素的CSS屬性，這個頁面展現該元素原始定義的CSS屬性以及從父級元素繼承的CSS屬性。從這個頁面還能夠查到該元素的某個CSS特性來自於那個CSS文件，使編碼調試時修改代碼變得很是方便。
- 在Styles頁旁邊，有一個Computed頁面，這個頁面展現該元素通過計算以後的全部CSS屬性，即最後瀏覽器渲染頁面時使用的屬性。屬性的計算由瀏覽器自動進行，是瀏覽器渲染頁面的一個必不可少的過程。
- 修改元素的CSS屬性：在元素的Styles頁面，能夠對元素的CSS屬性進行修改，甚至刪除原有、添加新屬性。不過，這些修改，僅對當前瀏覽器的頁面展現生效，不會修改CSS源代碼。因此在這裏進行CSS屬性的修改通常用來調整和完善元素的渲染效果。
- 給元素添加斷點：在元素的右鍵菜單中選擇斷點選項（Break on…），選中以後，當元素被修改（一般是被JS代碼修改）時，頁面加載會暫停，而後能夠查看該元素的屬性。
- 元素斷點添加以後，能夠在右側欄的DOM Breakpoints頁面中看到，這個頁面能夠看到當前網頁的全部元素斷點。
- 查看元素的監聽事件：元素的右邊欄的Event Listener頁面，能夠查看到該元素的全部監聽事件。在開發中，尤爲是維護其餘人的代碼時，會出現不瞭解元素對應的監聽事件，這個時候，能夠在這個頁面中找到。這個頁面不只能看到對應的事件函數，還能夠定位該函數所在的JS文件以及在該文件中的具體位置（行數），大大提升開發維護的效率。
控制檯（Console）
-
查看JS對象的及其屬性：
瀏覽器 -
執行JS語句：
緩存 -
查看控制檯日誌：當網頁的JS代碼中使用了console.log()函數時，該函數輸出的日誌信息會在控制檯中顯示。日誌信息通常在開發調試時啓用，而當正式上線後，通常會將該函數去掉服務器
源代碼（Source）
- 查看文件：在源代碼（Source）頁面能夠查看到當前網頁的全部源文件。在左側欄中能夠看到源文件以樹結構進行展現。
- 添加斷點：在源代碼左邊有行號，點擊對應行的行號，就好給改行添加上一個斷點（再次點擊可刪除斷點）。右鍵點擊斷點，在彈出的菜單中選擇Edit breakpoint能夠給該斷的添加中斷條件。
- 中斷調試：添加斷點後，當JS代碼運行到斷點時會中斷（對於添加了中斷條件的斷點在符合條件時中斷），此時能夠將光標放在變量上查看變量的
- 也能夠在右邊的側欄上查看：
- 在右側變量上方，有繼續運行、單步跳過等按鈕，能夠在當前斷點後，逐行運行代碼，或者直接讓其繼續運行。
Network詳細介紹
那我就按照從左到右的順序來寫啦~cookie
- ：記錄按鈕 處於打開狀態時會在此面板進行網絡鏈接的信息記錄，關閉後則不會記錄。
- ：清除按鈕 清除當前的網絡鏈接記錄信息。（點擊一下就能清空）
- ：捕獲截屏 記錄頁面加載過程當中一些時間點的頁面渲染狀況，截圖根據可視窗口截取，以下圖所示。
- ：過濾器 可以自定義篩選條件，找到本身想要資源信息，以下圖所示。
也能夠是一些指定條件
指定條件有哪些？
domain：資源所在的域，即url中的域名部分。如 domain:api.github.com
has-response-header：資源是否存在響應頭，不管其值是什麼。如 has-response-header：Access-Control-Allow-Origin
is：當前時間點在執行的請求。當前可用值：running
larger-than：顯示大於指定值大小規格的資源。單位是字節(B),可是K(kB)和M(MB)也是能夠的~ 如larger-than:150K
method：使用何種HTTP請求方式。如 GET
mime-type：也寫做content-type，是資源類型的標識符。如 text/html
scheme：協議規定。如 HTTPS
set-cookie-name：服務器設置的cookies名稱
set-cookie-value：服務器設置的cookies的值
set-cookie-domain：服務器設置的cookies的域
status-code：HTTP響應頭的狀態碼
- ：顯示詳細信息
- ：顯示時間流
可以根據時間，查看對應時間下 瀏覽器請求的資源信息
- ：是否保留日誌
當選擇保留日誌，從新加載url當前界面時，以前請求顯示的資源信息，會保留下來，不會清空的喲~
- ：是否進行緩存
當打開開發者工具時生效，打開這個開關，則頁面資源不會存入緩存，能夠從Status欄的狀態碼看文件請求狀態。
- ：設置模擬限速，以下圖所示。
設置限速能夠模擬處於各類網絡環境下的不一樣用戶訪問本頁面的狀況。
Network主題內容介紹
下列介紹中，前者爲名詞解釋，後者爲舉例
-
Name/Pat：資源名稱以及URL路徑 （main.css）
-
Method：Http請求方法 (GET或者POST)
-
status/Text：Http狀態碼/文字解釋 （200，ok）
-
Type ：請求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
-
Initiator：解釋請求是怎麼發起的，有四種可能的值
1.Parser ：請求是由頁面的html解析時發送 2.Redirect：請求是由頁面重定向發送 3.script ：請求是由script腳本處理髮送 4.other ：請求是由其餘過程發送的，好比頁面裏的Link連接點擊 -
size/content：size是響應頭部和響應體結合的大小，content是請求解碼後的大小
請求文件具體說明
點擊某個具體請求後的界面，以下圖所示：
一共分爲四個模塊：
-
Headers
Header面板列出資源的請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等等
-
Preview：預覽面板，用於資源的預覽。
-
Response：響應信息面板包含資源還未進行格式處理的內容
-
Timing：資源請求的詳細信息花費時間
細節補充
對某請求右鍵，出現頁面以下圖所示。
-
Copy Request Headers：複製HTTP請求頭到系統剪貼板
-
Copy Response Headers：複製HTTP響應頭到系統剪貼板
-
Copy Response：複製HTTP響應內容到系統剪貼板
-
Copy as
cURL：將網絡請求做爲一個curl的命令字符複製到系統剪貼板(curl是一種開源的命令行工具和庫，用於配合url語法進行數據傳輸)
-
Copy All as HAR：將網絡請求記錄信息以HAR格式複製到系統剪貼板(what is HAR file)
-
Save as HAR with Content：將資源的全部的網絡信息保存到HAR文件中(.har文件)
-
Clear Browser Cache：清除瀏覽器緩存
-
Clear Browser Cookies：清除瀏覽器cookies
-
Open in Sources Panel：當前選中資源在Sources面板打開
-
Open Link in New Tab：在新tab打開資源連接
-
Copy Link Address：複製資源url到系統剪貼板
若將全部的網絡信息保存到HAR文件中，點擊這裏，可上傳查看