一些 Chrome 瀏覽器的前端調試技巧

分享背景

工欲善其事必先利其器

斷點

• 條件斷點
• 異常斷點

格式化壓縮代碼

Chrome inspector -> Sources tab -> {}
複製代碼

選擇DOM元素

控制檯支持一些變量和函數來選擇DOM元素：

$() 至關於document.querySelector()
// 返回第一個與之匹配的CSS選擇器的元素
// 例如：$('div')它將返回本頁的第一個div元素

 $$() 至關於document.querySelectorAll()
// 返回一個數組，裏面是與之匹配的CSS選擇器的元素

 $0~$4 依次返回五個最近你在元素面板選擇過的DOM元素的歷史記錄
 $0是最新的記錄，以此類推

 $_  獲取上次表達式結果
複製代碼

API工具方法

keys()

• 至關於Object.keys()

values()

• 至關於Object.values()

monitor/unmonitor

• 用來觀察函數調用的工具方法。在函數調用的時候，能夠同步輸出函數名以及參數。

function add(a,b){return a+b}
monitor(add)
add(1,2)
// output:
// function add called with arguments: 1, 2
// 3
複製代碼

monitorEvents/unmonitorEvents

• 觀察對象事件

// 單個事件
monitorEvents(window, "resize")
resize Event {isTrusted: true, type: "resize", target: Window, currentTarget: Window, eventPhase: 2, …}

// 多個事件
monitorEvents($0, ['mousedown', 'mouseup'])
mousedown MouseEvent {isTrusted: true, screenX: -1034, screenY: 94, clientX: 28, clientY: 674, …}

// 全部事件
monitorEvents($0)

// 取消事件
unmonitorEvents($0)
複製代碼

getEventListeners

• 獲取註冊到一個對象上的全部事件監聽器~

console

keys(console)   //查看全部的console方法

 ["debug", "error", "info", "log", "warn", "dir", "dirxml", "table",
 "trace", "group", "groupCollapsed", "groupEnd", "clear", "count",
 "countReset", "assert", "profile", "profileEnd", "time", "timeLog",
 "timeEnd", "timeStamp", "context", "memory"]
複製代碼

代碼執行時間

let startTime = new Date().getTime();

console.log("started");

setTimeout(() => {
  console.log(
    "ended in " + (new Date().getTime() - startTime) + " milliseconds"
  );
}, 3000);
// output:
// "started"
// "ended in 3001 milliseconds"
複製代碼

console.time('Call to doSomething took')
doSomething()
console.timeEnd('Call to doSomething took')

// output: 
// Call to doSomething took：300ms
複製代碼

var t0 = performance.now();
doSomething();
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");

// output: 
// Call to doSomething took 300 milliseconds
複製代碼

日誌顯示時間戳

設置 -> Show timestamps

保留歷史記錄

console -> 設置 -> 勾選 preserve log

編輯頁面

document.designMode = "on"
複製代碼

清除控制檯

• 在控制檯中點擊右鍵，而後按 Clear console。
• 在控制檯中輸入 clear()。
• 從您的 JavaScript 代碼內調用 console.clear()。
• 按 Ctrl+L（Mac、Windows、Linux）

參考資料

• 使用控制檯
• 在 Chrome DevTools 中調試 JavaScript 入門