JavaScript中console.log打印对象与数组的用法详解
本文详解JavaScript中console.log函数的用法,对比其与alert的区别,展示如何在Chrome和Firebug中查看对象与数组。重点介绍Chrome开发者工具在iframe环境下的执行优势,并提供test.html测试代码及操作截图,帮助开发者掌握前端调试技巧。
console.log函数基础与alert对比
本文详细介绍JavaScript中console.log函数在打印对象和数组时的具体应用方法,供读者参考学习。
console.log本质上是一个用于输出JavaScript数组和对象的函数,其功能类似于PHP中的print_r或var_dump。虽然该函数本身原理简单,但本文旨在指导读者如何高效使用它。在介绍之前,回顾一下常用的alert方法,它仅能弹出字符串或整数类型的结果,功能较为有限。
测试文件准备
一、准备测试文件test.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>console.log test</title>
</head>
<script type="text/javascript">
var testobj =
{
'id': 1,
'content': 'test',
'firstname': function() {
document.getElementById('firstname').value = "zhang";
},
'lastname': function() {
document.getElementById('lastname').value = "ying";
}
};
<!-- 打印对像 -->
console.log(testobj);
</script>
<body>
<input type="text" id='firstname' name="firstname" value=''>
<input type="text" id='lastname' name='lastname' value=''>
</body>
</html>
Chrome开发者工具查看对象
二、在Chrome开发工具中查看JavaScript对象

Chrome浏览器控制台界面
目前,Chrome开发者工具与Firebug的使用率大致相当。值得注意的是,Chrome开发者工具具备一项Firebug所没有的功能。
控制台支持直接运行JavaScript代码。当页面包含iframe时,Firebug只能在父级页面执行代码,而Chrome允许用户选择并直接在iframe内部执行代码,具体效果如下图所示。

Chrome iframe控制台操作示意
Firebug查看对象
三、在Firebug中查看JavaScript对象

Firebug控制台界面
更多关于JavaScript数组操作技巧的详细内容,感兴趣的读者可查阅本站专题:《JavaScript数组操作技巧总结》。
希望本文的阐述能对大家的JavaScript程序设计工作有所帮助。
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
