1. elements 元素查看
-
選中某個元素 查看其樣式
image.png
-
-
直接調(diào)試修改樣式
image.png
-
-
-
選中元素右擊
image.png
- 給元素添加屬性 例如id class 等
- 復(fù)制元素
- 刪除元素
- forcestate:添加 active :hover 樣式
-
-
- 將元素存儲為全局變量 store as global variable
- image.png
- 此時可以通過temp1 對元素進(jìn)行訪問與一些操作
-
- styles
- image.png
- 可以進(jìn)行樣式的調(diào)試
- 可以通過filter 直接進(jìn)行類的篩選
-
- computed 實際計算出來的樣式
- image.png
- 有時候樣式?jīng)]有達(dá)到想要的效果,可以在這里查看并查找原因
-
- event listener
- image.png
- 綁定的dom事件
-
8）rendering
可以查看每次重繪的內(nèi)容
image.png
image.png
2. console
-
-
信息查看
image.png
- 可以選擇對應(yīng)的信息類型,進(jìn)行信息的過濾
- 主要是進(jìn)行網(wǎng)絡(luò)請求信息的查看
-
-
打印信息選擇
image.png
-
-
3）選中元素在控制臺可以通過$0直接訪問該元素
image.png -
$_ 訪問上次控制臺打印的輸出
image.png
-
-
5）console.count
通過直接調(diào)用可以查看調(diào)用次數(shù)
image.png
3. network
-
查看請求
image.png
-
-
-
headers
image.png
- 可以查看請求頭信息與響應(yīng)頭信息狀態(tài)碼,請求方法等
- 當(dāng)頁面顯示信息有誤或者不能正常響應(yīng)時,查看請求是否有問題
-
當(dāng)與后端進(jìn)行協(xié)作時,部分時候可能需要curl給后端,后端去查找問題原因
image.png
-
-
-
payload
image.png
- 請求參數(shù)
- 可以通過 view source 請求代碼格式
-
-
-
preview
image.png
- 按照對象形式進(jìn)行數(shù)據(jù)的查看
-
-
-
response
image.png
- 相應(yīng)數(shù)據(jù)的原始格式
-
-
-
initiator
image.png
- 請求發(fā)出所在文件
- 在開發(fā)中,當(dāng)有部分接口報錯,導(dǎo)致頁面不能正常顯示,影響自己的開發(fā)的時候,可以注釋掉別人的部分請求代碼,繼續(xù)自己的開發(fā)
-
-
7)Timing
image.png- 可以查看請求返回的具體時間
- 根據(jù)請求時間進(jìn)行對應(yīng)的優(yōu)化
- 可以看出大部分時間處于等待服務(wù)器響應(yīng)
-
-
cookies
image.png
- 請求所攜帶的一些cookie信息
-
- 網(wǎng)速慢速模擬
image.png
4. memory
image.png
- 查看網(wǎng)頁內(nèi)存占用
5. application
image.png
- 主要進(jìn)行l(wèi)ocalStorage/sessionStorage/cookies的查看與修改
- 部分情況調(diào)試的時候可以直接刪除或者修改或者添加信息
- 比如賬戶登錄后的token存儲在這里,當(dāng)調(diào)試需要重新登錄的時候直接刪除token
信息即可
6. sources
image.png
- 斷點調(diào)試,程序查錯的一大利器
