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

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 此外還有網路 ...