使用F12的一些基本排查技巧
使用F12的一些基本排查技巧
以google瀏覽器為例,F12,打開控制臺
控制臺介紹
????????1.元素(Elements)
頁面布局,樣式排查:與慕課進行對比(用于查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點)
????????2. 控制臺(Console)
保持空白,Nomessages 無警告報錯調試信息。(用于執行一次性代碼,查看JavaScript對象,查看調試日志信息或異常信息)
? ? ? ? 3.源代碼(Sources)
可以通過打斷點調試問題(用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼,調試JavaScript源代碼,給JS代碼添加斷點等)
? ? ? ? 4.網絡(Network)
使用最多。(用于查看header等與網絡連接相關的信息)
? XHR(請求),檢查前端出傳輸的參數:allow_XHR(請求),檢查傳輸的內容與需求是否一致,一種是瀏覽器正常請求,一種是錯誤的返回。如果是空白請求,則前后端沒交互上
?? status_code:200,正常,瀏覽器正常請求 。5開頭是后端問題,404前后都可能(訪問接口不存在)。
??? 以network為分界線,接口報文之前的都是前端問題,報文正常發送之后都是后端問題,可以把報文copy出來拿到postman中去發送嘗試
??? preview:接口錯誤返回
??? response:failed 斷網或服務器掛了
??? preserve log:保存日志,對比前后變化,無痕模式測試(不推薦,與正常模式還是有差別)
??? disable cache:一般要求勾選,可清除緩存
? ? ? ? 5. application
緩存存儲位置,可清除緩存,打開控制臺后在瀏覽器上的刷新按鈕位置可清除緩存。
清除緩存的其他方式:Shift+F5或ctrl+shift+R(強制清空緩存,有些電腦不適用)、調出F12頁面,刷新按鈕右鍵進行清空緩存。
? ? ? ? 6. Performance
network: online/fast 3G/Slow 3G/offline——模擬網絡不同情況
? ? ? ? 7. 檢查問題出在前端還是后端
? ? ? ? a. 前端傳輸參數與API文檔一致(加強API文檔的跟蹤管理),檢查后端返回數據是否正確。
? ? ? ? b. 請求方式:大部分用的是post
? ? ? ? c. 排查方法:點開要排查的接口,展示地址,字段,長度,API字段參數等。
Headers中需要關注的是General和Request
request payload——view parsed,切換顯示參數
preview:為success 訪問正常
? ? ? ? d. 可切換屏幕分辨率進行檢查,可使用手機模式,可設置不同的分辨率進行測試。
? ? ? ? 8. 調試方法
? ? ? ? a. 如需要調試,需請前端開啟調試功能,顯示后綴信息以方便查找,然后對照API文檔找到對應的接口信息
? ? ? ? b. 在控制臺輸入showMe,查看調試時候的數據變量,加debugger斷點調試;在控制臺輸入data,查看這個data的值等
? ? ? ? 9. ie瀏覽器
? ? ? ? a. F12,默認開啟控制臺,基本不操作,對于網絡及仿真使用較多
? ? ? ? b. 文檔模式和瀏覽器配置文件要保持一致,另模擬結果不準確
? ? ? ? c. win7推薦裝ie8,9,10,xp系統推薦裝6,7,8,win10推薦ie10
? ? ? ? d. 環境信息需要備注jira,盡量保持環境一致
? ? ? ? e. 3d視圖,win10系統中的edge瀏覽器具有該功能,缺點過慢
? ? ? ? f. 頁面加載出現過大的文件時就要和項目組建議是否需要壓縮
? ? ? ? 10. 未登錄上傳附件操作方法:
????????F12,找到sessionid,刪除后再上傳附件
附:如有興趣可查看:
https://www.bbsmax.com/A/q4zVb2kbzK/
總結
以上是生活随笔為你收集整理的使用F12的一些基本排查技巧的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux安装防火墙
- 下一篇: Matlab操作1: 用tight_su