前言
本文已經發布視頻點擊查看
開發過程中，瀏覽器的調試非常重要，可以說是必備的技巧，本文我就會分享一些自己掌握的技巧，歡迎補充
我們默認使用Chrome瀏覽器，但是你使用新edge瀏覽器也是可以的
在開發者界面中，你可以使用ctrl + shift +P打開快捷輸入運行常用命令，這和mac上的非常相似
也可以點擊此處查看更多官方文檔
界面
點擊Dock side可以切換控制台顯示位置，點擊1.可以打開控制台設置
在設置頁面的appearance中可以進行更多的頁面設置
快捷鍵
很多人去百度快捷鍵，完全沒有必要啊
移動設備調試
點擊切換到1.移動端預覽，點擊左上角的2.responsive可以切換到響應式窗口，此時你可以通過2.1、2.2、2.3來拖動修改窗口大小，也可以通過3.直接輸入窗口大小，可以通過4.修改窗口比，左上角還提供了非常多的機型選擇，還可以通過5.來添加更多的機型
如果你的網絡允許，能訪問（不存在的網站），當你選擇機型的時候，瀏覽器還會自動生成手機殼，點擊1.可以切換手機殼的顯示，點擊2.可以打開尺子，點擊3.可以截取當前屏幕，點擊4.可以截取當前整個頁面長圖，點擊5.可以恢復到默認設置
console控制台
console其實就是瀏覽器的一個可交互命令行，用來輸出調試信息和腳本執行
如果你想要在控制台輸入換行可以使用shift + enter
你可以點擊左方區域來切換對應的顯示，點擊1.設置一個動態表達式來監聽，2.過濾輸出，3.清空，右方可以設置一些需要輸出的信息
$選擇器
是的在瀏覽器控制台中你可以獲得jQuery的選擇器體驗
我們隨便選擇一個節點，這里是一個小技巧，可以直接復制節點的選擇器
動態表達式
點擊1.這個小眼睛，可以輸入一些JavaScript表達式，比如我們輸入Date.now();,就會一直監控時間的變化了
用這個方式我們可以監聽頁面的某一個節點的變化
monitorEvents($("#app > div.page-title > h1"))
然后我們將鼠標放置到這個節點上方，就可以監聽並打印出對應的事件了
你還可以指定要監聽的事件monitorEvents($("#app > div.page-title > h1"),['focus'])
monitor還有更多的用法
function sum(x, y) {
return x + y;
}
monitor(sum);
基本的打印
console.log("log");
console.info("info");
console.error("error");
console.warn("warn");
assert
當值為false的時候會觸發打印
var result = false;
console.assert(result, 'result is false');
占位符
console.log('%cover','color:red;font-size:48px');
# c是樣式占位符
console.log('name:%s','lookroot')
統計時間
console.time("執行時間");
for(let x=0;x<100000000;x++){}
console.timeEnd("執行時間");
以表格方式打印
var userlist=[{name:'lookroot',age:21},{name:'lili',age:18}]
console.table(userlist)
轉化為對象打印更方便
在日常開發中我們為了知道數據是誰輸出的，需要給打印語句寫一個tag
var username="lookroot";
console.log("username:"+username);
其實可以直接轉化為對象更為方便
console.log({username})
分組打印
console.group("分組1");
console.log("1.1");
console.log("1.2");
console.groupEnd();
console.group("分組2");
console.log("2.1");
console.log("2.2");
console.groupEnd();
dir完整打印
如果你需要關注一個節點的完整屬性可以使用dir打印，這里要介紹第二個小技巧，點擊store as global variable可以將這個節點作為全局屬性，就不用再通過選擇器去獲取它了
點擊以后，會生成一個template..的屬性，此時只需要打印這個屬性名就可以直接打印這個節點了
自定義打印
如果上面的打印都還不能滿足你的需求，Chrome允許你自定義你的打印格式
window.devtoolsFormatters = [{
header: function(data) {
if (data.isRed) {
return ['div',{style: "color: red;"}, data.msg]
}
},
hasBody: function() {
return false;
}
}]
我們要使用它非常簡單
console.log({isRed:true,data:"red console"})
還可以進一步封裝一下
console.red=function(data){
console.log({isRed:true,msg:data})
}
更多內容可以查看我的個人博客