目錄

前言

一、F12調試參數詳解

1.Elements：

2.Network：

Name：

headers：

Preview:

Response:

Timing:

3.console：

4.Sources:

二、操作

1.窗口位置設置

2.怎么清除請求信息

3.停止記錄

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

---

前言

用途：
如果你是前端開發人員，F12可以幫你定位元素，直接修改頁面…
如果你是網頁測試人員，F12可以幫你定位到指定的元素進行點擊功能測試，post接口測試需要傳遞的參數在這里也可以看到

一、F12調試參數詳解

1.Elements：

查看當前頁面的樣式（界面html和Data）結構，以及一些樣式或屬性，方便修改頁面的樣式，調試瀏覽器的兼容性（從此處可以看到各控件的標簽、屬性和對應的XPATH）

2.Network：

可以用來調試前后臺交互性的一些問題，比如ajax之類的請求
主要分為以下幾個部分：

Name：

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

headers：

列出資源的請求url、http方法、響應狀態嗎、請求頭、響應頭及它們各自的值、請求參數等等

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

Preview:

預覽面板，用于資源的預覽

Response:

響應信息面板，包含資源還未進行格式處理的內容

Timing:

資源請求的詳細信息花費時間

Network里的Preview和Response的結果相似，有什么區別？

Response—網頁返回結果（不具有可讀性）
Preview–(預覽功能)控制臺會把發送過來的json數據自動轉換成javascript的對象格式
Content-Type的格式有四種：
（1）application/x-www-form-urlencodend(默認)
（2）application/json
（3）text/xml
（4）multipart/form-data

3.console：

控制臺，在這里可以看到頁面上出現的錯誤提示信息，以及可以在這里調試js

4.Sources:

主要用來調試js和查看源代碼

二、操作

1.窗口位置設置

可以設置顯示為：左邊框、下邊框，在新窗口打開顯示

2.怎么清除請求信息

主要用于排除其他歷史請求的干擾，分析單個點擊動作會觸發哪些請求
一般操作是，先清除一把請求，再點擊要分析的按鈕

3.停止記錄

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

?

總結

以上是生活随笔為你收集整理的F12调试调试窗口详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。