Chrome瀏覽器F12開發者工具簡單使用

2022-07-15 09:48:09 字數 1619 閱讀 7398

chrome開發者工具最常用的四個功能模組:元素(elements)、控制台(console)、源**(sources),網路(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響應頭的狀態碼

能夠根據時間,檢視對應時間下 瀏覽器請求的資源資訊

下列介紹中,前者為名詞解釋,後者為舉例

點選某個具體請求後的介面,如下圖所示:

一共分為四個模組:

header面板列出資源的請求url、http方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求引數等等

對某請求右鍵,出現頁面如下圖所示。

若將所有的網路資訊儲存到har檔案中,點選這裡,可上傳檢視

chrome瀏覽器 F12開發者工具簡單使用

chrome開發者工具最常用的四個功能模組 元素 elements 控制台 console 源 sources 網路 network 那我就按照從左到右的順序來寫啦 也可以是一些指定條件 指定條件有哪些?domain 資源所在的域,即url中的網域名稱部分。如 domain api.github.c...

Chrome 開發者工具 F12(一)

開發者工具對開發人員 除錯有很大的幫助。頁面 css js 除錯,介面除錯,效能調優等等。so,筆者決定用自己的方式記錄一下工作中用到的 f12 工具的種種,方便查閱。一 怎麼開啟開發者工具 兩種方式開啟下圖紅框中的內容 1 ctrl shift i 2 f12 或者 fn f12 二 f12 可以...

chrome瀏覽器中 F12 功能的簡單介紹

由於f12是前端開發人員的利器,所以我自己也在不斷摸索中,檢視一些部落格和資料後,自己總結了一下來幫助自己理解和記憶,也希望能幫到有需要的小夥伴,嘿嘿!首先介紹chrome開發者工具中,除錯時使用最多的三個功能頁面是 元素 elements 控制台 console 源 sources 此外還有網路 ...