使用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的一些基本排查技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。