卡卡網(wǎng)

控制臺（console）為前端調試帶來極大的方便，JavaScript調試，HTML調試，CSS調試，可視化的調試方式，我現(xiàn)在越來越喜歡控制臺（console）這個工具了。今天在調試一個JavaScript程序時，用到了console.dir 和 console.log，于是我就在本文把這兩者的區(qū)別總結一下。

console 對象

console 對象提供對瀏覽器調試控制臺的訪問，可以使用F12或ctrl+shift+j來查看。

console.log

console.log()方法將控制臺中對象的 toString 表示形式打印給用戶。

句法：

console.log(object) 或 console.log("string", object)

console.dir()

console.dir()方法將控制臺中指定對象的對象屬性列表輸出給用戶。

句法：

console.dir(object)

簡單來說，console.log()以字符串表示形式返回對象，console.dir()將對象識別為對象并輸出其屬性。log() 和 dir() 都將字符串作為字符串返回。

例子：

var str = "Hello WebKaka"
var site = {
  name: "webkaka",
  title: "卡卡網(wǎng)"
};
var arr = [10, 20, 30];
console.log(str);
console.dir(str);
console.dir(site);
console.log("site (log) = ", site);
console.dir(arr);
console.log("arr (log) = ", arr);
  
// dir() 只有一個參數(shù)時，才打印字符串
console.dir("arr (dir) = ", arr);

demodownload

執(zhí)行結果

在上面的代碼中，log()以字符串形式打印對象，同時dir()識別對象并僅打印其屬性。

上面的程序是在 chrome 中運行的，所以log()會打印樹以及字符串信息，但是如果在 firefox 中運行log()只會打印出字符串信息，而dir()在任何地方的行為都是一樣的。

正如你在代碼中看到的那樣console.dir("arr (dir) = ", arr); 只打印字符串部分，但不打印對象屬性，因為 dir() 只接受一個參數(shù)，并將字符串視為傳遞給方法的唯一參數(shù)，而 log() 接受任意數(shù)量的參數(shù)。 

總結

本文介紹了控制臺console.dir和console.log的區(qū)別，這兩個命令在前端調試時常常用到，但這兩者的用途卻不一樣，大多數(shù)情況下使用console.log來輸出字符串形式的結果，調試時有時需要查看對象屬性，則要用上console.dir命令。

標簽: 控制臺  console  console.log  console.dir