极客教程console.dir 和 console.log 的区别
Console 对象： Console 对象提供对浏览器调试控制台的访问，可以使用 F12 或 ctrl+shift+j 看到。Console 对象包含许多方法，其中 log() 和 dir() 使用最多。
console.log() 方法将控制台中对象的 toString 表示形式打印给用户。
语法：
console.log(object) or console.log("string", object)
console.dir() 方法将控制台中指定对象的对象属性列表输出给用户。
语法：
console.dir(object)
简单来说， console.log() 以字符串表示形式返回对象， console.dir() 将对象识别为对象并输出其属性。 log() 和 dir() 都将字符串作为字符串返回。
例子：
<!DOCTYPE html>
<html>
<head>
<script>
var str = "Hello, Yiibai.com"\n var varObj = {
book: "harrypotter",
price: "2000"\n };
var varObj2 = [10, 20, 30];
console.log(str);
console.dir(str);
console.dir(varObj);
console.log("geek (log) = ", varObj);
console.dir(varObj2);
console.log("varObj2 (log) = ", varObj2);
// Prints only string as dir() takes
// only one parameter.
console.dir("varObj2 (dir) = ", varObj2);
</script>
</head>
</html>
在上面的代码中，log() 打印对象的 toString 表示，而 dir() 识别对象并仅打印其属性。
上面的程序是在 chrome 中运行的，所以 log() 会打印树以及字符串信息，但是如果在 firefox 中运行 log() 只会打印出 toString 表示信息，而 dir() 在任何地方的行为都是一样的。
正如您在代码中看到的那样 console.log("varObj2 (log) = ", varObj2); 只打印字符串部分，但不打印对象属性，因为 dir() 只接受一个参数，并将字符串视为传递给方法的唯一参数，而 log() 接受任意数量的参数。