原文鏈接：https://segmentfault.com/a/1190000010302235?

開發(fā)者工具初步介紹

在利用chrome瀏覽器進(jìn)行web端測(cè)試，我們可以通過F12鍵調(diào)起開發(fā)者工具。

chrome開發(fā)者工具最常用的四個(gè)功能模塊：

• Elements：主要用來(lái)查看前面界面的html的Dom結(jié)構(gòu)，和修改css的樣式。css可以即時(shí)修改，即使顯示。大大方便了開發(fā)者調(diào)試頁(yè)面，這真是十分友好的~

• console：這個(gè)除了查看錯(cuò)誤信息、打印調(diào)試信息(console.log())、寫一些測(cè)試腳本以外，還可以當(dāng)作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入"console"并執(zhí)行~

• Sources：主要用來(lái)調(diào)試js和查看源代碼

• Network：

?

Network詳細(xì)介紹

?

?那我就按照從左到右的順序來(lái)寫啦~

• 記錄按鈕 處于打開狀態(tài)時(shí)會(huì)在此面板進(jìn)行網(wǎng)絡(luò)連接的信息記錄，關(guān)閉后則不會(huì)記錄。

• 清除按鈕 清除當(dāng)前的網(wǎng)絡(luò)連接記錄信息。（點(diǎn)擊一下就能清空）

• 捕獲截屏 記錄頁(yè)面加載過程中一些時(shí)間點(diǎn)的頁(yè)面渲染情況，截圖根據(jù)可視窗口截取，如下圖所示。

?

過濾器 能夠自定義篩選條件，找到自己想要資源信息，如下圖所示。

?

也可以是一些指定條件
指定條件有哪些？

domain：資源所在的域，即url中的域名部分。如 domain:api.github.com

has-response-header：資源是否存在響應(yīng)頭，無(wú)論其值是什么。如 has-response-header：Access-Control-Allow-Origin

is：當(dāng)前時(shí)間點(diǎn)在執(zhí)行的請(qǐng)求。當(dāng)前可用值：running

larger-than：顯示大于指定值大小規(guī)格的資源。單位是字節(jié)(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

method：使用何種HTTP請(qǐng)求方式。如 GET

mime-type：也寫作content-type，是資源類型的標(biāo)識(shí)符。如 text/html

scheme：協(xié)議規(guī)定。如 HTTPS

set-cookie-name：服務(wù)器設(shè)置的cookies名稱

set-cookie-value：服務(wù)器設(shè)置的cookies的值

set-cookie-domain：服務(wù)器設(shè)置的cookies的域

status-code：HTTP響應(yīng)頭的狀態(tài)碼

• 顯示詳細(xì)信息

?

顯示時(shí)間流

?

• 是否保留日志?
  當(dāng)選擇保留日志，重新加載url當(dāng)前界面時(shí)，之前請(qǐng)求顯示的資源信息，會(huì)保留下來(lái)，不會(huì)清空的喲~

• 是否進(jìn)行緩存

  當(dāng)打開開發(fā)者工具時(shí)生效，打開這個(gè)開關(guān)，則頁(yè)面資源不會(huì)存入緩存，可以從Status欄的狀態(tài)碼看文件請(qǐng)求狀態(tài)。

• 設(shè)置模擬限速，如下圖所示。
  

  設(shè)置限速可以模擬處于各種網(wǎng)絡(luò)環(huán)境下的不同用戶訪問本頁(yè)面的情況。

Network主題內(nèi)容介紹

下列介紹中，前者為名詞解釋，后者為舉例

• Name/Pat：資源名稱以及URL路徑 （main.css）

• Method：Http請(qǐng)求方法 (GET或者POST)

• status/Text：Http狀態(tài)碼/文字解釋 （200，ok）

• Type ：請(qǐng)求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

• Initiator：解釋請(qǐng)求是怎么發(fā)起的，有四種可能的值

  1.Parser ：請(qǐng)求是由頁(yè)面的html解析時(shí)發(fā)送2.Redirect：請(qǐng)求是由頁(yè)面重定向發(fā)送3.script ：請(qǐng)求是由script腳本處理發(fā)送 4.other ：請(qǐng)求是由其他過程發(fā)送的，比如頁(yè)面里的Link鏈接點(diǎn)擊

• size/content：size是響應(yīng)頭部和響應(yīng)體結(jié)合的大小，content是請(qǐng)求解碼后的大小

請(qǐng)求文件具體說(shuō)明

點(diǎn)擊某個(gè)具體請(qǐng)求后的界面，如下圖所示：

?

一共分為四個(gè)模塊：

• Headers

?

Header面板列出資源的請(qǐng)求url、HTTP方法、響應(yīng)狀態(tài)碼、請(qǐng)求頭和響應(yīng)頭及它們各自的值、請(qǐng)求參數(shù)等等

• Preview：預(yù)覽面板，用于資源的預(yù)覽。

Response：響應(yīng)信息面板包含資源還未進(jìn)行格式處理的內(nèi)容

?

Timing：資源請(qǐng)求的詳細(xì)信息花費(fèi)時(shí)間

?

細(xì)節(jié)補(bǔ)充

對(duì)某請(qǐng)求右鍵，出現(xiàn)頁(yè)面如下圖所示。

?

?

?

• Copy Request Headers：復(fù)制HTTP請(qǐng)求頭到系統(tǒng)剪貼板

• Copy Response Headers：復(fù)制HTTP響應(yīng)頭到系統(tǒng)剪貼板

• Copy Response：復(fù)制HTTP響應(yīng)內(nèi)容到系統(tǒng)剪貼板

• Copy as
  cURL：將網(wǎng)絡(luò)請(qǐng)求作為一個(gè)curl的命令字符復(fù)制到系統(tǒng)剪貼板(curl是一種開源的命令行工具和庫(kù)，用于配合url語(yǔ)法進(jìn)行數(shù)據(jù)傳輸)

• Copy All as HAR：將網(wǎng)絡(luò)請(qǐng)求記錄信息以HAR格式復(fù)制到系統(tǒng)剪貼板(what is HAR file)

• Save as HAR with Content：將資源的所有的網(wǎng)絡(luò)信息保存到HAR文件中(.har文件)

• Clear Browser Cache：清除瀏覽器緩存

• Clear Browser Cookies：清除瀏覽器cookies

• Open in Sources Panel：當(dāng)前選中資源在Sources面板打開

• Open Link in New Tab：在新tab打開資源鏈接

• • Copy Link Address：復(fù)制資源url到系統(tǒng)剪貼板

  • ?

轉(zhuǎn)載于:https://www.cnblogs.com/zhou1988/p/9077218.html

總結(jié)

以上是生活随笔為你收集整理的谷歌开发者工具详解 Network篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。