浏览器开发者模式，console实践

!Mortal

已于 2022-02-16 10:49:41 修改

阅读量1.1k

点赞数

分类专栏： H5 文章标签： html5

于 2022-02-14 16:51:57 首次发布

本文链接：https://blog.csdn.net/u012842688/article/details/122927627

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

//大佬请忽略--来自互联网的搬运工（云端笔记）

>>>先来两个小干货感受下

>>>添加函数:临时写个函数验证下逻辑/功能

>>>全局变量:节省时间，临时查看数据

>>>先看下console有哪些函数可以调用

>>>console.log、console.info、console.warn、console.error、console.debug

eg:log可以输出内容、变量值、函数

占位符格式化：%f浮点、%c字符、%d\%i整数、%o对象

渲染样式

>>>console.clear()或点击按钮清空控制台日志

>>>console.table()，表格形式展示列表数据，数组元素的属性少的话很直观。

var arr = [
    {'name':'cat','color':'black'},
    {'name':'dog','color':'yellow'},
    {'name':'pig','color':'white'},
]
console.table(arr);

>>>console.time()、console.timeEnd()计算耗时

function sum() {
    let sum1 = 0, sum2 = 0;
    console.time('a')
    for (let i = 0; i <= 10000; i++) {
        sum1 += i;
    }
    console.timeEnd('a')
    console.time('b')
    for (let i = 0; i <= 1000000; i++) {
        sum2 += i;
    }
    console.timeEnd('b')
}
sum()

>>>console.profile()、console.profileEnd()性能分析也很实用，可以分析那个函数在处理耗时操作。以下例子可以看到函数sum耗时5.5ms

>>>console.group()、console.groupEnd()，通过日志分析业务逻辑也是一种直观的处理方式

>>>console.trace()代码调用跟踪

function buyCar() {
    console.log('购买一辆五菱神车')
    payCarMoney()
}
function payCarMoney() {
    console.log('支付汽车款项')
    driveCar()
}
function driveCar() {
    console.log('开车回家')
    console.trace()
}
function myCar() {
    buyCar()
}
myCar()

>>>console.dir()查看对象的属性和函数

>>>console.dirxml()节点元素

<body id="myBody">
    <p>输出</p>
    <p>节点</p>
    <p>元素</p>
</body>

!Mortal

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
浏览器开发者模式，console实践

>>>大佬请忽略--小白的日常打卡>>>开发者控制台也可以临时添加函数，调试/验证自己的功能/数据>>>页面中的全局变量也可以打印出来，平时开发直接查看数据是否有值...
复制链接

扫一扫

专栏目录