瀏覽器除錯的必知必會，零基礎足夠詳細-第一節console皮膚、移動端除錯

前言

本文已經發布視訊點選檢視

開發過程中，瀏覽器的除錯非常重要，可以說是必備的技巧，本文我就會分享一些自己掌握的技巧，歡迎補充

我們預設使用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})
}

更多內容可以檢視我的個人部落格