前端調試技巧，我從別人那里偷學的前端調試小技巧(瀏覽器篇)

2023-10-20 阅读 15 评论 0

摘要：發現光，欣賞光，學習光每個人身上都有著不同的閃光點，把焦點凝結在缺點上只會讓互相難過。轉移焦點，放在他的優點上，你會發現，唔還不錯。而且，你還可以學習它，讓你變得更棒。（我越來越擅長寫雞湯了？&

發現光，欣賞光，學習光

每個人身上都有著不同的閃光點，把焦點凝結在缺點上只會讓互相難過。轉移焦點，放在他的優點上，你會發現，唔還不錯。而且，你還可以學習它，讓你變得更棒。（我越來越擅長寫雞湯了？？？？？？？）

前端調試技巧？首先F12 打開調試窗口
開發者工具，不同電腦可能快捷鍵不同

Elements

1 Elements可以看最終生成的html
（1）點擊界面的任意部分可以選
（2）可以切換界面展示效果
在這里插入圖片描述
（3）Elements右側可以修改css效果，并實時的顯示在界面上，可以修改好后，再修改本地的css

這里可以看到console.log的輸出（這個應該都用過吧~）

這里可以給頁面打斷點
在這里插入圖片描述

這里可以看到你請求的鏈接
在這里插入圖片描述
接下來，我點開任意一個鏈接，詳細介紹下

初學唱歌的技巧，1 General
（1）Request URL：請求的url
（2）Request Method：請求方法
（3）Status Code：響應的狀態
（4）Remote Address：遠程地址
（5）Reffer Policy：不知道欸，以后再補充
在這里插入圖片描述

2 Response Headers
注意一下content-type，有時候后端報錯，可能是格式不對呢

在這里插入圖片描述 3 Response
這里可以看到請求返回的信息，可能是json串，也可能是解析的頁面（最接近原代碼）

恭喜你看完啦，更詳細的以后遇到再補充，也歡迎你評論補充吶~