瀏覽器調試的必知必會，零基礎足夠詳細-第一節console面板、移動端調試

2020 年 9 月 10 日
筆記
Chrome, javascript, 前端, 教程

前言

本文已經發佈視頻點擊查看

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

我們默認使用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})
}

更多內容可以查看我的個人博客

Tags: Chrome javascript 前端教程