目錄

前言

一、F12調(diào)試參數(shù)詳解

1.Elements：

2.Network：

Name：

headers：

Preview:

Response:

Timing:

3.console：

4.Sources:

二、操作

1.窗口位置設(shè)置

2.怎么清除請(qǐng)求信息

3.停止記錄

4.怎么把概述時(shí)間軸去掉，使用hide overview

---

前言

用途：
如果你是前端開(kāi)發(fā)人員，F12可以幫你定位元素，直接修改頁(yè)面…
如果你是網(wǎng)頁(yè)測(cè)試人員，F12可以幫你定位到指定的元素進(jìn)行點(diǎn)擊功能測(cè)試，post接口測(cè)試需要傳遞的參數(shù)在這里也可以看到

一、F12調(diào)試參數(shù)詳解

1.Elements：

查看當(dāng)前頁(yè)面的樣式（界面html和Data）結(jié)構(gòu)，以及一些樣式或?qū)傩?#xff0c;方便修改頁(yè)面的樣式，調(diào)試瀏覽器的兼容性（從此處可以看到各控件的標(biāo)簽、屬性和對(duì)應(yīng)的XPATH）

2.Network：

可以用來(lái)調(diào)試前后臺(tái)交互性的一些問(wèn)題，比如ajax之類的請(qǐng)求
主要分為以下幾個(gè)部分：

Name：

資源名稱以及url路徑（main/css）

headers：

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

(1)Request Headers–http請(qǐng)求數(shù)據(jù)報(bào)的頭
(2)Response Headers–http響應(yīng)的頭
(3)cookie----指某些網(wǎng)站為了辨別用戶身份、進(jìn)行 session 跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）
(4)Method–http請(qǐng)求方法（GET或POST）
(5)Status/Text–http狀態(tài)碼（200，OK）
(6)Type–請(qǐng)求資源的類型（html，css，js等）
(7)Query String Parameters–請(qǐng)求參數(shù)

Preview:

預(yù)覽面板，用于資源的預(yù)覽

Response:

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

Timing:

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

Network里的Preview和Response的結(jié)果相似，有什么區(qū)別？

Response—網(wǎng)頁(yè)返回結(jié)果（不具有可讀性）
Preview–(預(yù)覽功能)控制臺(tái)會(huì)把發(fā)送過(guò)來(lái)的json數(shù)據(jù)自動(dòng)轉(zhuǎn)換成javascript的對(duì)象格式
Content-Type的格式有四種：
（1）application/x-www-form-urlencodend(默認(rèn))
（2）application/json
（3）text/xml
（4）multipart/form-data

3.console：

控制臺(tái)，在這里可以看到頁(yè)面上出現(xiàn)的錯(cuò)誤提示信息，以及可以在這里調(diào)試js

4.Sources:

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

二、操作

1.窗口位置設(shè)置

可以設(shè)置顯示為：左邊框、下邊框，在新窗口打開(kāi)顯示

2.怎么清除請(qǐng)求信息

主要用于排除其他歷史請(qǐng)求的干擾，分析單個(gè)點(diǎn)擊動(dòng)作會(huì)觸發(fā)哪些請(qǐng)求
一般操作是，先清除一把請(qǐng)求，再點(diǎn)擊要分析的按鈕

3.停止記錄

4.怎么把概述時(shí)間軸去掉，使用hide overview

?

總結(jié)

以上是生活随笔為你收集整理的F12调试调试窗口详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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