打開網頁F12進入開發者頁面。
ctrl shift n進入無痕模式，不會自動清理cookie，便于保持登陸狀態

本文介紹瀏覽器開發者工具中三個常用功能：抓包并導入 Postman、模擬弱網環境、檢查頁面元素與樣式。可用于前端調試、接口分析、頁面優化等場景。

1. 抓包并在 Postman 調試接口

瀏覽器開發者工具（F12）可以查看頁面加載過程中的所有請求。使用以下步驟可以將一個接口請求導入到 Postman 進行進一步調試。

操作步驟：
1. 打開瀏覽器開發者工具，切換至 Network 面板。
2. 刷新頁面，等待需要的接口請求出現。
3. 找到目標請求（通常為 XHR 或 Fetch 類型），右鍵選擇：Copy → Copy as cURL (bash)
4. 打開 Postman，點擊 Import → Raw text，將復制的 cURL 粘貼進去 → 點擊 Continue → Import。
5. 接口會自動轉換為 Postman 請求，可在 Headers、Query Params、Body 等部分進一步編輯與測試。

注意事項：
? 某些接口需要帶 Cookie、Referer、User-Agent 等 Header，否則服務端可能拒絕訪問。
? Postman 中可使用環境變量、斷言、保存響應等功能做更深入的接口驗證。

2. 模擬弱網環境

弱網模擬可用于測試頁面在 3G、慢速 4G 網絡下的加載體驗，尤其適用于移動端性能優化、懶加載驗證等場景。

操作步驟：
1. 打開開發者工具，進入 Network 面板。
2. 頂部點擊 No throttling，選擇一個網絡環境進行模擬：
? Slow 3G
? Fast 3G
? Offline（模擬斷網）
3. 刷新頁面，觀察頁面資源加載的時間和順序。
4. 或者自定義上傳下載速度…

應用場景：
? 驗證骨架屏、加載動畫是否生效。
? 檢查大圖、視頻等是否開啟懶加載。
? 分析首屏加載瓶頸。

3. 查看元素結構與樣式

通過 Elements 面板可以查看頁面的 DOM 結構與 CSS 應用情況，適用于樣式調試、結構分析。

常用功能：

功能 說明
查看 HTML 結構 展開 DOM 節點查看組件布局
檢查 class / id 定位使用的樣式類名和綁定
查看/編輯 CSS 樣式 右側 Styles 面板實時查看當前元素樣式，包括繼承和優先級
狀態切換 使用 :hover、:active 等偽類模擬用戶行為
尺寸與盒模型 查看元素的 margin / padding / border / content 區域
編輯 HTML 右鍵節點 → Edit as HTML，可直接修改結構測試效果

總結

瀏覽器開發者工具提供了豐富的頁面調試能力：
? Network 面板：抓包、請求分析、弱網模擬。
? Elements 面板：HTML 結構和樣式實時檢查與編輯。
? 與 Postman 配合：可快速導入真實請求，進行接口測試與調試。

建議在開發過程中充分利用這些工具，提高排查問題與優化效率。

如需擴展內容（如：使用 Lighthouse 進行性能分析、使用 Sources 面板調試 JS 代碼），可根據項目實際需要進一步補充。