本文解析JavaScript中console.log与console.dir的核心区别。console.log直接输出消息，而console.dir以文件树样式展示对象所有属性，特别适合查看DOM节点。文章通过示例代码演示了数组在控制台展开时的动态变化现象，并指出console.dir虽非标准但实用，建议生产环境谨慎使用。
console.log()与console.dir()的区别
1、console.log()
首先，其主要功能是将一条消息输出到Web控制台。
其次，具体显示的内容取决于传递的实际参数，控制台会直接呈现该参数的结果。
2、console.dir(object)
首先，它的主要作用是在控制台中显示指定JavaScript对象的属性，并以类似文件树结构的交互列表形式呈现。
其次，它通常用于打印出该对象的所有属性及其对应的值。
第三，该方法对于输出DOM对象非常有用，因为它会显示DOM对象的所有属性，特别是在输出节点属性和属性值时，推荐使用此方法。
第四，需要注意的是，该特性是非标准的，建议尽量避免在生产环境中使用（使用console.log()更为稳妥）。
console.log与console.dir发现的问题
如下代码：
<body>
<h1 class="text-center"></h1>
<div class='wrap'>
</div>
<script type="text/javascript">
var arr = ['a', 'b'];
console.log(arr);
function a() {
arr[0] = arr[1];
arr[1] = 'c';
}
;
$(document).ready(function () {
a();
console.dir(arr);
});
</script>
</body>注意第一行，看到的是['a', 'b']；这是符合预期的。
但是等一等，点看三角看一下，怎么变成了['b','c']，这是什么意思？
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。