在JavaScript開發調試中，console.log()是我們最常用的方法，但是還有其它幾個常用的方法，值得我們試一試，也許會起到意想不到的效果。
預計本篇文章閱讀時間預計2分鐘
基礎用法——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 })，由于一行内容顯示有限，對象内容部分進行了省略，我們必須點選左邊的小箭頭看更詳細的内容，如下圖所示：
console.table()
為了增加輸出的可讀性，我們可以使用console.table()讓其通過表格的形式進行展示，比如我們在控制台輸出console.table({ foo, bar})，如下圖所示：
console.group()
有時候，為了友善分析，你需要将一些對象變量等資訊進行分組列印輸出，示例如下：
console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');// Nested Groupconsole.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()，輸出的展示形式如下圖所示，是不是更醒目：
你還可以更進一步，自定義列印輸出的樣式，我們可以使用%c文法。使用這個文法我們可以更直覺的區分列印輸出來源哪個API調用，使用者事件等，示例如下：
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()，示例如下：
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