除了console.log,還有其它幾個調試方法值得你嘗試

在JavaScript開發調試中,console.log()是咱們最經常使用的方法,可是還有其它幾個經常使用的方法,值得咱們試一試,也許會起到意想不到的效果。前端

本篇文章預計閱讀時間2分鐘bash

基礎用法——console.log()

打印一段文本

console.log('Is this working?');複製代碼

打印對象

const foo = { id: 1, verified: true, color: 'green' };
const bar = { id: 2, verified: false, color: 'red' };複製代碼

接着咱們看控制檯的輸出展示:微信

從圖中咱們看出,沒法看出對應的變量名;若是想讓兩個對象一塊兒輸出,咱們可使用console.log({ foo, bar }),因爲一行內容顯示有限,對象內容部分進行了省略,咱們必須點擊左邊的小箭頭看更詳細的內容,以下圖所示:oop

console.table()

爲了增長輸出的可讀性,咱們可使用console.table()讓其經過表格的形式進行展現,好比咱們在控制檯輸出console.table({ foo, bar}),以下圖所示:ui

console.group()

有時候,爲了方便分析,你須要將一些對象變量等信息進行分組打印輸出,示例以下:this

console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
// Nested Group
console.group('Address');
console.log('Street: 123 Townsend Street');
console.log('City: San Francisco');
console.log('State: CA');
console.groupEnd();
console.groupEnd();複製代碼

console.warn() & console.error()

一些特別的信息咱們須要特別強調醒目的輸出出來,好比警告和錯誤信息,你可使用console.warn() & console.error(),輸出的展現形式以下圖所示,是否是更醒目: spa

你還能夠更進一步,自定義打印輸出的樣式,咱們可使用%c語法。使用這個語法咱們能夠更直觀的區分打印輸出來源哪一個API調用,用戶事件等,示例以下:3d

console.log('%c Auth ', 
            'color: white; background-color: #2274A5', 
            '登陸驗證經過');
console.log('%c GraphQL ', 
            'color: white; background-color: #95B46A', 
            '獲取用戶信息');
console.log('%c Error ', 
            'color: white; background-color: #D33F49', 
            '獲取用戶信息失敗');複製代碼

console.trace()

console.trace()方法用於顯示當前執行的代碼在堆棧中的調用路徑。以下段代碼所示,在控制檯裏清晰了展現了add()的調用軌跡調試

function add(a,b){
console.trace();
return a+b;
}
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
var x = add3(1,1);複製代碼

console.time()

咱們在開發過程當中,常常須要知道一個方法運行了多長時間,方便咱們作出修改完善的判斷,咱們可使用console.time(),示例以下:code

let i = 0;
console.time("While loop");
while (i < 1000000) {
  i++;
}
console.timeEnd("While loop");

console.time("For loop");
for (i = 0; i < 1000000; i++) {
  // For Loop
}
console.timeEnd("For loop");複製代碼

console.dir()

console.dir()能夠直觀展現一個對象的全部屬性和方法,示例代碼以下:

function cat(name, age, score){
    this.name = name;
    this.age = age;
    this.score = score;
}
var c = new cat("miao", 2, [6,8,7]);
console.dir(c);複製代碼

今天的小技巧分享就到這裏,但願對你有所幫助,歡迎到留言區進行交流分享。

更多精彩內容,請微信關注「前端達人」公衆號!

相關文章
相關標籤/搜索