卡卡網(wǎng)

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

console 對象

console 對象提供對瀏覽器調(diào)試控制臺的訪問，可以使用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() 只有一個(gè)參數(shù)時(shí)，才打印字符串
console.dir("arr (dir) = ", arr);

demodownload

執(zhí)行結(jié)果

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

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

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

總結(jié)

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

標(biāo)簽: 控制臺  console  console.log  console.dir