對于許多前端開發者和網頁設計師來說，瀏覽器的開發者工具是不可或缺的利器。通過這些工具，我們可以深入了解網頁的內部結構、調試代碼、測試設計以及優化性能。

不同的瀏覽器（如Chrome、Firefox、Safari）都有自己的開發者工具，雖然界面和功能略有差異，但基本功能都大同小異。本文將帶你學習一些google開發者模式的妙用。

初識開發者工具

要打開瀏覽器開發者工具。你可以通過右鍵點擊頁面，選擇“檢查”或者F12快捷鍵打開，你將看到一個包含各種標簽頁的界面

• Elements（元素）面板：用于查看和編輯HTML結構。你可以通過這個面板直接修改頁面元素的HTML代碼，實時預覽修改效果。
• Console（控制臺）面板：用于輸出調試信息、執行JavaScript代碼等。這個面板在開發過程中非常有用，可以快速測試代碼片段和查看錯誤信息。
• Sources（源代碼）面板：用于查看和管理網頁的JavaScript、CSS等資源文件。你可以在這里查看文件內容、設置斷點以及單步執行代碼。
• Network（網絡）面板：用于監控網頁加載過程中發送和接收的所有網絡請求。你可以查看請求的詳細信息、請求/響應頭和內容等。
• Performance（性能）面板：用于分析網頁性能瓶頸，通過記錄和分析頁面加載過程中的事件，找出影響性能的因素。
• Memory（內存）面板：用于分析內存使用情況，幫助查找內存泄漏和優化內存使用。

牛刀小試

幾個小功能，讓你知道開發者工具的強大

小鼠標點擊可以讓你快速定位到元素位置

• 復制文字

例如csdn，百度文庫網絡上的文本，復制的時候一般都會讓你開通會員或者關注才能使用，看看大神都怎么做

通過elements中找到文本直接復制

• 找回密碼

很多人在登錄網站的時候選擇記住密碼，但是后來又忘記了

教你怎么找回密碼

修改為type的類型為text,然后密碼就變成了明文展示

使用開發者工具定位問題

作為運維人員的角度，可以使用開發者工具來協助進行問題定位

查看網站請求的基本信息

• ALL：顯示所有請求
• XHR：顯示AJAX異步請求
• JS：顯示js文件
• CSS：顯示css文件
• Img：顯示圖片
• Media：顯示媒體文件，音頻、視頻等
• Font：顯示Web字體
• Doc：顯示html
• WS：顯示websocket請求
• Other：顯示其他請求

查看接口信息

• 左側 Name 欄，選擇自己要抓取的接口名稱，點擊后右側會出現接口Headers、Response 等
• Headers 第一欄 General 獲取服務器地址、接口地址、以及請求方法等
• 問號后面則是參數，key - value 形式，每個參數之間使用 & 相隔

可以通過network定位頁面加載失敗的問題，如圖通過name可以看到具體記載失敗的文件或者接口，status表示響應返回的狀態碼，200表示成功，如果是4xx或者5xx則表示請求失敗，就需要好好定位了

size字段表示靜態文件的大小

認識請求頭和響應頭

• General部分
  Request URL：請求的URL
  Request Method：請求使用的方法
  Status Code：響應狀態碼
  Remote Address：遠程服務器的地址和端口
  Reffer Policy：Referrer判別策略
  
• 響應頭
  Date：標識產生響應的時間
  Content-Encoding：指定響應內容編碼
  Server：包含服務器信息，如名稱，版本號等
  Content-Type：文檔類型，指出返回的數據類型是什么。如此處的text/html代表返回的是HTML代碼
  Set-Cookie：設置Cookies。響應頭中的Set-Cookie告訴瀏覽器要將此內容放在Cookies中，下次請求攜帶Cookies請求
  Expires：指定響應過期時間，可以使代理服務器將加載的內容更新到緩存當中。如果再次訪問，就可直接從緩存中加載，降低服務器的負載，縮短加載時間。

• 請求頭
  Accept：請求報頭域，用于指定客戶端可接受哪些信息類型
  Accept-Encoding：指定客戶端可接受的語言類型
  Accept-Language：指定客戶端可接受的內容編碼
  Host：指定請求資源的主機IP和端口號，其為請求URL的原始服務器或網關的位置
  Cookie：網站為了辨別用戶進行會話跟蹤而儲存在用戶本地的數據。主要功能是維持當前訪問會話。（非常重要?。。。?br>Referer：用來標識這個請求是從哪個網頁過來的。服務器拿到這一信息并做相應的處理，如來源統計，防盜鏈等
  User-Agent:  瀏覽器型號和版本 ，可以使服務器識別客戶使用的操作系統及版本等信息。
  Content-Type：互聯網媒體類型，在HHTP協議消息中，用來表示具體請求中的媒體信息類型

 
補充：

query string parameters：
請求參數，get請求的請求參數在url中，用&隔開；
post請求的請求參數寫在報文體中query string parameters
request header中的Content-Type:post請求的請求格式，如果是get，沒有請求格式

判斷靜態文件是否壓縮

content-Encoding為gzip表示開啟了壓縮

查看靜態文件的大小和響應時間

問題場景：網站響應慢，文件沒有開啟靜態壓縮場景

關注console中的報錯

場景:如圖表示websocket協議不支持或者未配置的報錯

application查看網站cookie

怎么獲取入參和出參

post請求參數是json字符串格式