前端調試方法介紹

本文原創：huhongtao

前端調試方法

• css調試
• js調試
• network
• 性能調試
• Application
• Security
• Audits
• h5頁面調試

控制面板快捷鍵： Command + Option + I（Mac）或 Control + Shift + I（Windows，Linux）

css調試

1. 查看css

2. 查看僞元素樣式

3.添加或修改css樣式 1.直接在原class中添加新樣式 2.在新class中添加新樣式 3.複選框切換樣式聲明

4.快捷鍵修改聲明值

• 編輯聲明的值時，能夠使用如下鍵盤快捷鍵將值遞增固定量

步長1：Up 將值更改成1
步長0.1：Option+ Up（Mac）或Alt+ Up （Windows，Linux）增長0.1。
步長10：Shift+ Up增長10。
步長100：Shift+ Command+ Up（Mac）或 Shift+ Page Up（Windows，Linux）將值增長100
複製代碼

• 快速修改盒模型尺寸

查看當前元素的事件

• Ancestors：當前選定節點 + 祖先節點的事件(冒泡)
• Framework listeners：安裝在chrome上的插件的事件

5.使用Coverage選項卡查看CSS和js的使用狀況

打開Coverage方法：

• 打開devtools
• 點擊右上角...
• More tools
• Coverage

快捷鍵：Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux，Chrome OS），輸入coverage

js調試

• 輸出測試
• 斷點調試
  • DOM斷點調試
  • js執行斷點調試
  • http request 斷點調試

1. 輸出調試

alert、console、document.write、innerHTML等

控制檯

快捷鍵： Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。

• console.log( )
• console.error( )
• console.warn( )
• console.info( )
• console.table( )
• console.time( )、console.timeEnd( )
• console.clear( )
• console.assert( )
• console.group( )、console.groupEnd( )
• console.count( )
• copy( )
• 。。。

格式化輸出

• console.log('%c不同的console.log', 'font-size: 20px; color: blue');

2.斷點調試

斷點

• 普通斷點
• 條件斷點

debugger斷點調試

• Watch：查看自定義表達式的值
• Call stack ：調用棧
• Scope：做用域
• Breakpoints：管理代碼斷點
• XHR/fetch Breakpoints：http 請求斷點
• DOM Breakpoints：DOM斷點

source面板

Control + P or Command + P (Mac)

network

查看資源加載狀況

• 設置是否啓用緩存
• 網絡加載速度
• 捕捉頁面渲染瞬間

Filter 文本框：過濾請求

Group by frame www.w3school.com.cn/tiy/t.asp?f…

在頁面加載期間捕獲屏幕截圖：Capture screenshots 捕獲屏幕截圖

一、將鼠標指針懸停在屏幕截圖上以查看捕獲屏幕截圖的時間點。 Overview 窗格中將顯示一條黃線。
二、點擊屏幕截圖的縮略圖以過濾捕獲屏幕截圖後出現的任何請求。
三、雙擊縮略圖進行放大。
複製代碼

跨頁面加載保存請求: Preserve log 複選框

Disable cache：停用瀏覽器緩存 —— 模擬新用戶的體驗

Network Throttling：模擬 2G、3G 和其餘鏈接速度

手動清楚瀏覽器緩存、cookie

** Hide data URLs**：隱藏數據網址，data: 開頭的全部請求都是數據網址

添加或移除列

waterfall說明

• Queueing：請求排隊
• Stalled：請求等待發送所用的時間
• Waiting(TTFB)：瀏覽器正在等待響應的第一個字節。 TTFB 表示 Time To First Byte（至第一字節的時間）。此時間包括 1 次往返延遲時間及服務器準備響應所用的時間。
• Content Download：瀏覽器正在接收響應。

性能調試

tips：無痕模式下分析，快捷鍵ctrl + shift + N

• 查看頁面渲染過程
• 統計頁面各個環節的耗時
• 模擬各個配置下運行狀況

• FPS(幀率)：綠色豎線越高，FPS越高，紅色的話表示長時間幀，極可能會出現卡頓，所在測試的時候要特別注意紅色部分
• CPU：CPU的使用狀況，面積圖指示消耗 CPU 資源的事件類型
• NET：每條色彩橫線表示一種資源，越長表示檢索資源所需的時間越長

#三條豎線：

• 藍色：DCL —— DOMContentLoaded
• 綠色：FCP —— First Contentful Paint
• 紅色：L —— Load

頁面生命週期：

• DOMContentLoaded
• load
• beforeunload/unload

document.readyState

• loading(加載中)
• interactive(完成加載，文檔已被解析)
• complete(全部資源完成加載，load事件將被觸發)

火焰圖

• 藍色(Loading)：網絡通訊和HTML解析
• 黃色(Scripting)：JavaScript執行
• 紫色(Rendering)：樣式計算和佈局，即重排
• 綠色(Painting)：重繪
• 灰色(other)：其它事件花費的時間
• 白色(Idle)：空閒時間

• Send Request                發送網絡請求時觸發
• Receive Response        響應頭報文到達時觸發
• Receive Data                 請求的響應數據到達事件，若是響應數據很大（拆包），可能會屢次觸發該事件
• Finish Loading               網絡請求完畢事件
• Parse HTML                  瀏覽器執行HTML解析
• Update Layer Tree
• Paint                              肯定渲染樹上的節點的大小和位置後，即可以對節點進行渲染
• Composite Layers         合成層；當渲染樹上的節點塗鴉完畢後，便生成位圖（bitmap），瀏覽器把此位圖從CPU傳輸到GPU

模擬移動端加載過程

• 設置網絡狀態
• 設置CPU倍速

Application

緩存 + 離線存儲

• 查看和修改本地存儲與會話存儲。
• 檢查和修改 IndexedDB 數據庫。
• 對 Web SQL 數據庫執行語句。
• 查看應用緩存和服務工做線程緩存。
• 點擊一次按鈕便可清除全部存儲、數據庫、緩存和服務工做線程。

manifest：離線緩存 service worker： Web Worker，能夠攔截網絡請求、緩存資源或從緩存中檢索資源、傳遞推送消息 clear storage：清空全部數據

IndexDB

• 數據庫的安全源、名稱和版本

• 查看其鍵值對

Web SQL

• 用SQL來操縱客戶端數據庫

Security

調試當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS

• not secure

• not secure （混合內容）：頁面的主要來源是安全的，但頁面請求來自非安全來源的資源

Audits

對當前網頁進行網絡利用狀況、網頁性能方面的診斷，並給出一些優化建議

性能測試網站

• lighthouse
• PageSpeed Insights
• pingdom
• 。。。

h5頁面調試

• Chrome DevTools 模擬手機調試
• Chrome 遠程調試(Android) + safari遠程調試(iPhone)

• fiddler + WiFi + 手機

• Eruda —— 手機網頁前端調試面板，npm，預覽

• weinre遠程調試工具：不能調試JS,也不支持打斷點調試，僅能用於調試頁面樣式，使用場景有限

其餘調試

• 模擬設備感應器：More tools -> Sensors

參考文章

• developers.google.com/web/tools/c…
• blog.csdn.net/userkang/ar…
• blog.csdn.net/userkang/ar…
• www.jianshu.com/p/b6f87bac5…
• www.jianshu.com/p/a43417b28…