F12谷歌開發者工具使用詳解
對于許多前端開發者和網頁設計師來說，瀏覽器的開發者工具是不可或缺的利器。通過這些工具，我們可以深入了解網頁的內部結構、調試代碼、測試設計以及優化性能。
不同的瀏覽器（如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字符串格式
