推薦幾個不錯的console調試技巧

来源:https://www.cnblogs.com/tangshiwei/archive/2019/11/30/11962270.html

在我們的日常前端開發中,使用最頻繁的莫過於使用 在瀏覽器的控制臺中列印出我們需要調試的信息,但是大部分人可能跟之前的我一樣,沒有意識到其實 除了 方法以外,還有很多實用的方法,這些方法可以使我們的調試過程更加容易,也表達得更加直觀,更加豐富多彩,下麵我們就來看看有哪些實用的方法吧! 1、consol ...


在我們的日常前端開發中,使用最頻繁的莫過於使用console.log在瀏覽器的控制臺中列印出我們需要調試的信息,但是大部分人可能跟之前的我一樣,沒有意識到其實console除了log方法以外,還有很多實用的方法,這些方法可以使我們的調試過程更加容易,也表達得更加直觀,更加豐富多彩,下麵我們就來看看有哪些實用的方法吧!

1、console.log()

我們經常會使用console.log來列印出某個變數的值或者某個實體對象,也可以傳入多個變數參數,它會按照傳入順序進行列印:

1. 傳入一個變數
const a = 1;
console.log(a); // -> 1

2. 傳入一個對象
const foo = {a: 1};
console.log(foo); // -> {a: 1}

3. 傳入多個變數
console.log(a, foo); // -> 1 {a: 1} 

除此之外,它還支持格式化列印的功能,傳入特定的占位符來對參數進行格式化處理,常見的占位符有以下幾種:
1) %s:字元串占位符
2) %d:整數占位符
3) %f:浮點數占位符
4) %o:對象占位符(註意是字母o,不是數字0)
5) %c: CSS樣式占位符

const string = 'Glory of Kings';
const number = 100;
const float = 9.5;
const obj = {name: 'daji'};

1、%s 字元串占位符
console.log('I do like %s', string); // -> I do like Golry of Kings.

2、%d 整數占位符
console.log('I won %d times', number); // -> I won 100 times.

3、%f 浮點數占位符
console.log('My highest score is %f', float); // -> My highest score is 9.5

4、%o 對象占位符
console.log('My favorite hero is %o', obj); // -> My favorite hero is {name: 'daji'}.

5、%c CSS樣式占位符
console.log('I do like %c%s', 'padding: 2px 4px;background: orange;color: white;border-radius: 2px;', string);

其中CSS樣式占位符效果如下:

2、console.warn()

你可以完全使用console.warn來代替console.log方法,但前提是該條列印信息是屬於警告級別而不是普通信息級別,因此瀏覽器遇到一條警告級別的信息會區別對待,最明顯的是它的左側會有一個警告圖標,並且背景色和文字顏色也會不一樣。

相比於普通信息,警告信息會出現在上圖左側的warning面板中,而不是info面板中,這樣也有助於我們在一堆列印信息中快速篩選出警告信息,方便查看。

3、console.dir()

在大多數情況下,console.dir方法的作用和console.log作用相似,但是有一點細微的差別。

在上圖中,我們可以看到,console.log方法會將列印結果的詳細信息顯示完整,但是console.dir方法只會列印出對象,不會展開詳細信息,當然點擊之後看到的信息和前者一樣。
唯一差異比較大的地方是當我們列印HTML文檔中的節點時,會有完全不一樣的表現形式。例如我們使用console.log來列印body標簽:

我們會方便地看到DOM結構,並且滑鼠移上去能夠幫我們自動定位到對應的DOM節點。但是在某些情況下,其實這並不是你想要看到的效果,或許你想看到的是該DOM節點下的所有屬性信息,那麼你可以嘗試使用console.dir方法來試試:

4、console.table()

在我們的項目開發中經常會遇到對象數組形式的列表數據,在調試過程中我們可能會使用console.log方法列印出這些數據來進行查看,但比起前者,還可以使用一種比較可視化的方式來進行列印。例如,這裡準備一些列表數據:

const response = [
  {
      id: 1,
      name: 'Marry',
      age: 18,
      sex: 0
  },
  {
     id: 2,
     name: 'John',
     age: 20,
     sex: 1
  }
];

然後我們使用console.log來進行列印:

可以看出,我們列印出的結果並不夠直接,沒有給人一種一目瞭然的效果,接著換著使用console.table來列印:

可以看到,我們的列表數據被清晰完整地展現在了表格當中,同時console.table提供第二個可選參數用於篩選表格需要顯示的列,預設為全部列都顯示。

上圖我們通過添加第二個參數,數組中為需要在表格中顯示的欄位名,這樣就很方便地在結果數據中過濾掉我們不需要關心的信息。

5、console.assert()

assert即斷言,該方法接收多個參數,其中第一個參數為輸入的表達式,只有在該表達式的值為false時,才會將剩餘的參數輸出到控制臺中。

上圖中的第二行因為arr.length > 5值為false,因此列印出後面的信息。如果在某些場景下你需要評估當前的數據是否滿足某個條件,那麼不妨使用console.assert()方法來在控制臺中查看斷言信息。

6、console.trace()

該方法用於在控制臺中顯示當前代碼在堆棧中的調用路徑,通過這個調用路徑我們可以很容易地在發生錯誤時找到原始錯誤點,示例如下:

function foo(data) {
  if (data === null) {
    console.trace();
    return [];
  }
  return [data.a, data.b];
}

function bar1(data) {
  return foo(data);
}

function bar2(data) {
  return foo(data);
}

bar1({a: 1, b: 2}); // -> [1, 2]
bar2(null); // -> []

在上面代碼中,我們分別在bar1bar2函數中調用foo函數並傳入不同的參數,很顯然bar2函數在執行時會進入if語句並執行console.trace()方法,以下是控制臺中列印結果:

可以看到自下而上的一條調用路徑,並可以快速判定是在bar2函數中傳入了不合適的參數null而導致出錯,方便我們跟蹤發生錯誤的原始位置。

7、console.count()

該方法相當於一個計數器,用於記錄調用次數,並將記錄結果列印到控制臺中。其接收一個可選參數console.count(label)label表示指定標簽,該標簽會在調用次數之前顯示,示例如下:

for (let i = 1;i <= 5;i++) {
    if (!(i % 2)) {
        console.count('even');
    } else {
        console.count('odd');
    }
}

代碼中如果i是偶數,則會對even計數器進行計數,否則對odd計數器進行計數,執行後我們會在控制臺中看到如下列表:

odd: 1
even: 1
odd: 2
even: 2
odd: 3

8、console.time() & console.timeEnd()

這兩個方法一般配合使用,是JavaScript中用於跟蹤程式執行時間的專用函數,console.time方法是作為計算的起始時間,console.timeEnd是作為計算的結束時間,並將執行時長顯示在控制台。如果一個頁面有多個地方需要使用到計算器,則可以為方法傳入一個可選參數label來指定標簽,該標簽會在執行時間之前顯示。在以往我們計算程式的執行時間時,我們一般會採用如下方式:

const startTime = performance.now();
let sum = 0;
for(let i = 0;i < 100000;i++) {
    sum += i;
}
const diffTime = performance.now() - startTime;
console.log(`Execution time: ${ diffTime }`);

這是一種比較傳統的做法,我們還可以使用console.time來實現:

console.time('sum');
let sum = 0;
for(let i = 0;i < 100000;i++) {
    sum += i;
}
console.timeEnd('sum');

控制台效果如下:

相比於第一種實現方式,我們沒有設置任何臨時變數並且沒有做任何計算。

9、console.group() & console.groupEnd()

顧名思義,對數據信息進行分組,其中console.group()方法用於設置分組信息的起始位置,該位置之後的所有信息將寫入分組,console.groupEnd()方法用於結束當前的分組,示例如下:

class MyClass {
  constructor() {
    console.group('Constructor');
    console.log('Constructor executed');
    this.init();
    console.groupEnd();
  }

  init() {
    console.group('init');
    console.log('init executed');
    console.groupEnd();
  }
}
const myClass = new MyClass();

控制台效果如下:

該方法的作用主要是讓我們在控制台列印的日誌更加清晰可讀。

10、瀏覽器轉為編輯器

在大部分情況下,我們在瀏覽器中調試DOM結構或者編輯一些文本時,會在Chrome Developer Tools的Elements選項中對DOM節點進行編輯,但是一旦節點過多,會很容易增加調試過程的困難,這裡我們可以使用一種方式來將瀏覽器直接轉換為編輯器模式:

document.body.contentEditable = true;

在控制臺中輸入以上代碼後,可以將瀏覽器中的所有內容變為可編輯狀態,效果圖如下:

11、Chrome Command Line API

Google的Chrome Command Line API包含了一個用於執行以下常見任務的便捷函數集合:選擇和檢查DOM元素,以可讀格式顯示數據,停止和啟動分析器,以及監控DOM事件。

註意:此API只能通過瀏覽器控制台獲取,無法通過網頁腳本來進行訪問。

11.1 選擇DOM元素

當我們使用jQuery的時候,我們可以通過各種選擇器例如$('#id')$('.class')來選擇匹配的DOM元素,但是如果我們沒有引入jQuery時,我們仍然可以在Chrome的控制臺中進行同樣的操作。Chrome Command Line API提供了以下幾種選擇DOM元素的方式:

  • $(selector):返回匹配指定CSS選擇器的DOM元素的第一個引用,相當於document.querySelector()函數。
  • $$(selector):返回匹配指定CSS選擇器的DOM元素數組,相當於document.querySelectorAll()函數。
  • $x(path):返回一個與給定XPath表達式匹配的DOM元素數組。

    $x('//p[a]')表示返回包含<a>元素的所有<p>元素。

11.2 檢索最後一個結果的值

在控制臺中我們經常會進行一些計算,某些情況下你可能需要跟蹤你之前的計算結果來用於後面的計算,使用$_標記可用於返回最近評估的表達式的值,示例如下:

1 + 2 + 3 + 4 // -> 10

$_ // -> 10

$_ * $_ // -> 100

Math.sqrt($_) // -> 10

$_ // -> 10

11.3 查找與指定DOM元素關聯的事件

當我們需要查找DOM中與某個元素關聯的所有事件時,控制台提供了getEventListeners方法來幫助我們找到這些關聯的事件。
getEventListeners($('selector'))返回在指定DOM元素上註冊的事件監聽器。返回值是一個對象,對象的key為對應的事件類型(例如clickfocus),對象的value為一個數組,其包含了對應事件類型下的所有事件監聽器。例如,下麵列出了在document上註冊的所有事件監聽器:

如果我們需要找到某個特定的事件監聽器,可以通過如下方式進行訪問:

// eventName表示對應的事件類型
// index表示該事件類型下的事件監聽器數組的索引
getEventListeners($('selector')).eventName[index].listener

// 例如獲取document下click事件監聽器數組的第一項
getEventListeners(document).click[0].listener

11.4 監控事件

如果你希望在執行綁定到DOM中特定元素的事件時監視它們,控制台提供了monitorEvents方法來幫助你使用不同的命令來監控其中的一些或者所有事件:

  • monitorEvents($('selector')):將監視與選擇器匹配的元素關聯的所有事件,當這些事件被觸發時會將它們列印到控制台。例如monitorEvents($('#content'))將監視idcontent的元素關聯的所有事件。
  • monitorEvents($('selector'), 'eventName'):將監視選擇器匹配的元素的某個特定的事件。 例如,monitorEvents($('#content'), 'click')將監視idcontent的元素關聯的click事件。
  • monitorEvents($('selector'), [eventName1, eventName2, ...]):將監視選擇器匹配的元素的某些特定的事件。與上述不同的是,第二項可以傳入一個字元串數組,包含所有需要監聽的事件類型名稱,以此達到自定義監聽的目的。例如monitorEvents($('#content'), ['click', 'focus'])將監視idcontent的元素關聯的clickfocus事件。
  • unmonitorEvents($('selector')):將停止監視選擇器匹配的元素關聯的所有事件。例如unmonitorEvents($('#content'))將停止監視idcontent的元素關聯的所有事件。

效果圖如下:

11.5 檢查DOM元素

控制台提供了inspect()方法讓我們可以直接從控制臺中檢查一個DOM元素。

  • inspect($('selector')):將檢查與選擇器匹配的元素,並且會自動跳轉到Chrome Developer Tools的Elements選項卡中。例如inspect($('#content'))將檢查idcontent的元素。

效果圖如下:

交流

這篇主要是分享了幾個筆者覺得不錯的console調試技巧,希望在你的前端代碼調試過程中能對你有所幫助,覺得文章不錯的話,歡迎關註筆者的公眾號,每周都會原創和整理一些前端技術乾貨,希望和大家一起互相交流學習,共同進步。

文章已同步更新至Github博客,若覺文章尚可,歡迎前往star!

你的一個點贊,值得讓我付出更多的努力!

逆境中成長,只有不斷地學習,才能成為更好的自己,與君共勉!


您的分享是我們最大的動力!

更多相關文章
  • 基本語法如下 sqlite> select * from tb_user; sqlite> select userid,username from tb_user; 格式化的查詢輸出 sqlite> .header on sqlite> .mode column sqlite> select * f ...
  • 概述&背景 MySQL一直被人詬病沒有實現HashJoin,最新發佈的8.0.18已經帶上了這個功能,令人欣喜。有時候在想,MySQL為什麼一直不支持HashJoin呢?我想可能是因為MySQL多用於簡單的OLTP場景,並且在互聯網應用居多,需求沒那麼緊急。另一方面可能是因為以前完全靠社區,這種演進 ...
  • SQL:Structured Quety Language SQL SERVER是一個以客戶/伺服器(c/s)模式訪問、使用Transact-SQL語言的關係型資料庫管理子系統(RDBMS) DBMS :Database Management System資料庫管理系統 資料庫:程式用來存取數據的 ...
  • Responding to the Launch of Your App Initialize your app’s data structures, prepare your app to run, and respond to any launch-time requests from the ...
  • 一、完成了內容中的右邊的一部分。練習了三點:小盒子在大盒子中的位置,最好用大盒子的內邊距完成佈局,而不是用小盒子的外邊距來進行佈局;複習了ul,li的用法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D ...
  • css背景樣式屬性介紹 背景樣式就是自定義 標簽的背景顏色或背景圖像。 背景屬性說明表 屬性名 | 屬性值|描述 | | background color | f00、red、rgb(255,0,0)|設置背景顏色。 background image |url(背景圖片路徑)|設置背景圖像。 bac ...
  • jQuery中的事件 在JavaScript中,常用的基礎事件有滑鼠事件、鍵盤事件、window事件、表單事件、事件綁定和處理函數的語法格式如下 語法q 事件名 = "函數名()"; 或者 DOM對象.事件名 = 函數; 1、載入事件 $(function () {}); //推薦使用 $(docu ...
  • 簡單的小游戲製作,代碼量只有兩三百行。游戲可自行擴展延申。 源碼已發佈至github,喜歡的點個小星星,源碼入口: "game snake" 游戲已發佈,游戲入口: "http://snake.game.yanjd.top" 第一步 製作想法 游戲如何實現是首要想的,這裡我的想法如下: 1. 利用c ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...