對(duì)于許多前端開(kāi)發(fā)者和網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，瀏覽器的開(kāi)發(fā)者工具是不可或缺的利器。通過(guò)這些工具，我們可以深入了解網(wǎng)頁(yè)的內(nèi)部結(jié)構(gòu)、調(diào)試代碼、測(cè)試設(shè)計(jì)以及優(yōu)化性能。

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

初識(shí)開(kāi)發(fā)者工具

要打開(kāi)瀏覽器開(kāi)發(fā)者工具。你可以通過(guò)右鍵點(diǎn)擊頁(yè)面，選擇“檢查”或者F12快捷鍵打開(kāi)，你將看到一個(gè)包含各種標(biāo)簽頁(yè)的界面

• Elements（元素）面板：用于查看和編輯HTML結(jié)構(gòu)。你可以通過(guò)這個(gè)面板直接修改頁(yè)面元素的HTML代碼，實(shí)時(shí)預(yù)覽修改效果。
• Console（控制臺(tái)）面板：用于輸出調(diào)試信息、執(zhí)行JavaScript代碼等。這個(gè)面板在開(kāi)發(fā)過(guò)程中非常有用，可以快速測(cè)試代碼片段和查看錯(cuò)誤信息。
• Sources（源代碼）面板：用于查看和管理網(wǎng)頁(yè)的JavaScript、CSS等資源文件。你可以在這里查看文件內(nèi)容、設(shè)置斷點(diǎn)以及單步執(zhí)行代碼。
• Network（網(wǎng)絡(luò)）面板：用于監(jiān)控網(wǎng)頁(yè)加載過(guò)程中發(fā)送和接收的所有網(wǎng)絡(luò)請(qǐng)求。你可以查看請(qǐng)求的詳細(xì)信息、請(qǐng)求/響應(yīng)頭和內(nèi)容等。
• Performance（性能）面板：用于分析網(wǎng)頁(yè)性能瓶頸，通過(guò)記錄和分析頁(yè)面加載過(guò)程中的事件，找出影響性能的因素。
• Memory（內(nèi)存）面板：用于分析內(nèi)存使用情況，幫助查找內(nèi)存泄漏和優(yōu)化內(nèi)存使用。

牛刀小試

幾個(gè)小功能，讓你知道開(kāi)發(fā)者工具的強(qiáng)大

小鼠標(biāo)點(diǎn)擊可以讓你快速定位到元素位置

• 復(fù)制文字

例如csdn，百度文庫(kù)網(wǎng)絡(luò)上的文本，復(fù)制的時(shí)候一般都會(huì)讓你開(kāi)通會(huì)員或者關(guān)注才能使用，看看大神都怎么做

通過(guò)elements中找到文本直接復(fù)制

• 找回密碼

很多人在登錄網(wǎng)站的時(shí)候選擇記住密碼，但是后來(lái)又忘記了

教你怎么找回密碼

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

使用開(kāi)發(fā)者工具定位問(wèn)題

作為運(yùn)維人員的角度，可以使用開(kāi)發(fā)者工具來(lái)協(xié)助進(jìn)行問(wèn)題定位

查看網(wǎng)站請(qǐng)求的基本信息

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

查看接口信息

• 左側(cè) Name 欄，選擇自己要抓取的接口名稱，點(diǎn)擊后右側(cè)會(huì)出現(xiàn)接口Headers、Response 等
• Headers 第一欄 General 獲取服務(wù)器地址、接口地址、以及請(qǐng)求方法等
• 問(wèn)號(hào)后面則是參數(shù)，key - value 形式，每個(gè)參數(shù)之間使用 & 相隔

可以通過(guò)network定位頁(yè)面加載失敗的問(wèn)題，如圖通過(guò)name可以看到具體記載失敗的文件或者接口，status表示響應(yīng)返回的狀態(tài)碼，200表示成功，如果是4xx或者5xx則表示請(qǐng)求失敗，就需要好好定位了

size字段表示靜態(tài)文件的大小

認(rèn)識(shí)請(qǐng)求頭和響應(yīng)頭

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

• 請(qǐng)求頭
  Accept：請(qǐng)求報(bào)頭域，用于指定客戶端可接受哪些信息類型
  Accept-Encoding：指定客戶端可接受的語(yǔ)言類型
  Accept-Language：指定客戶端可接受的內(nèi)容編碼
  Host：指定請(qǐng)求資源的主機(jī)IP和端口號(hào)，其為請(qǐng)求URL的原始服務(wù)器或網(wǎng)關(guān)的位置
  Cookie：網(wǎng)站為了辨別用戶進(jìn)行會(huì)話跟蹤而儲(chǔ)存在用戶本地的數(shù)據(jù)。主要功能是維持當(dāng)前訪問(wèn)會(huì)話。（非常重要！?。。?br>Referer：用來(lái)標(biāo)識(shí)這個(gè)請(qǐng)求是從哪個(gè)網(wǎng)頁(yè)過(guò)來(lái)的。服務(wù)器拿到這一信息并做相應(yīng)的處理，如來(lái)源統(tǒng)計(jì)，防盜鏈等
  User-Agent:  瀏覽器型號(hào)和版本 ，可以使服務(wù)器識(shí)別客戶使用的操作系統(tǒng)及版本等信息。
  Content-Type：互聯(lián)網(wǎng)媒體類型，在HHTP協(xié)議消息中，用來(lái)表示具體請(qǐng)求中的媒體信息類型

 
補(bǔ)充：

query string parameters：
請(qǐng)求參數(shù)，get請(qǐng)求的請(qǐng)求參數(shù)在url中，用&隔開(kāi)；
post請(qǐng)求的請(qǐng)求參數(shù)寫(xiě)在報(bào)文體中query string parameters
request header中的Content-Type:post請(qǐng)求的請(qǐng)求格式，如果是get，沒(méi)有請(qǐng)求格式

判斷靜態(tài)文件是否壓縮

content-Encoding為gzip表示開(kāi)啟了壓縮

查看靜態(tài)文件的大小和響應(yīng)時(shí)間

問(wèn)題場(chǎng)景：網(wǎng)站響應(yīng)慢，文件沒(méi)有開(kāi)啟靜態(tài)壓縮場(chǎng)景

關(guān)注console中的報(bào)錯(cuò)

場(chǎng)景:如圖表示websocket協(xié)議不支持或者未配置的報(bào)錯(cuò)

application查看網(wǎng)站cookie

怎么獲取入?yún)⒑统鰠?/span>

post請(qǐng)求參數(shù)是json字符串格式