1.如何調出開發者工具
- 按F12調出
- 右鍵檢查（或快捷鍵Ctrl+Shift+i）調出
2.開發者工具初步介紹
chrome開發者工具最常用的四個功能模塊：元素（ELements）、控制台（Console）、源代碼（Sources），網絡（Network）。
-
元素（Elements）：用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。css可以即時修改，即時顯示。大大方便了開發者調試頁面
-
控制台（Console）：控制台一般用於執行一次性代碼，查看JavaScript對象，查看調試日志信息或異常信息。還可以當作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入"console"並執行~
-
源代碼（Sources）：該頁面用於查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。
-
網絡（Network）：網絡頁面主要用於查看header等與網絡連接相關的信息。
2.1元素（Elements）
- 查看元素的代碼：點擊左上角的箭頭圖標（或按快捷鍵Ctrl+Shift+C）進入選擇元素模式，然后從頁面中選擇需要查看的元素，然后可以在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置
-
查看元素的屬性：定位到元素的源代碼之后，可以從源代碼中讀出改元素的屬性。如下圖中的class、src、width等屬性的值。
- 當然從源代碼中讀到的只是一部分顯式聲明的屬性，要查看該元素的所有屬性，可以在右邊的側欄中查看：
- 修改元素的代碼與屬性：點擊元素，然查看右鍵菜單，可以看到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詳細介紹
那我就按照從左到右的順序來寫啦~
-
：記錄按鈕 處於打開狀態時會在此面板進行網絡連接的信息記錄，關閉后則不會記錄。 -
：清除按鈕 清除當前的網絡連接記錄信息。（點擊一下就能清空） -
：捕獲截屏 記錄頁面加載過程中一些時間點的頁面渲染情況，截圖根據可視窗口截取，如下圖所示。
-
：過濾器 能夠自定義篩選條件，找到自己想要資源信息，如下圖所示。
也可以是一些指定條件
指定條件有哪些？
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文件中，點擊這里，可上傳查看
