很容易忽略的浏览器 console 打印方式

console.dir

console.dir() 它可以显示指定JavaScript对象的属性列表。在浏览器控制台中,console.dir()会以层次结构的方式呈现对象的属性,让你可以展开查看子对象的内容。这个方法可以帮助你更好地了解对象的结构和属性。

我们有时候想看看一个DOM对象里面到底有什么属性和方法,但是常规的console.log打印出来的只是HTML标签,就像这样:

和直接审查元素没有什么区别。 如果我们想看到DOM对象作为JavaScript对象的结构可以使用console.dir,比如:

事实上,console.dir可以打印出任何JavaScript对象的属性列表,比如打印一个方法:

console.table

在JavaScript中,console.table()方法用于在控制台中以表格形式显示数组或对象的数据。这对于可视化复杂数据结构非常有用,使数据更易于阅读和理解。

如果数组元素的字段太多, 我们可以指定需要显示的字段(比如下面就只显示 name, price)。

相关推荐
随祥4 分钟前
Tauri+vue开发桌面程序环境搭建
前端·javascript·vue.js
万少5 小时前
HarmonyOS官方模板集成创新活动-流蓝卡片
前端·harmonyos
-To be number.wan7 小时前
C++ 赋值运算符重载:深拷贝 vs 浅拷贝的生死线!
前端·c++
噢,我明白了7 小时前
JavaScript 中处理时间格式的核心方式
前端·javascript
纸上的彩虹8 小时前
半年一百个页面,重构系统也重构了我对前端工作的理解
前端·程序员·架构
be or not to be9 小时前
深入理解 CSS 浮动布局(float)
前端·css
LYFlied9 小时前
【每日算法】LeetCode 1143. 最长公共子序列
前端·算法·leetcode·职场和发展·动态规划
老华带你飞9 小时前
农产品销售管理|基于java + vue农产品销售管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
小徐_23339 小时前
2025 前端开源三年,npm 发包卡我半天
前端·npm·github
GIS之路10 小时前
GIS 数据转换:使用 GDAL 将 Shp 转换为 GeoJSON 数据
前端