JS调试工具，万能的Console，你知道还能这样玩吗？

用户2231227

发布于 2022-09-26 11:02:55

1.6K0

发布于 2022-09-26 11:02:55

文章被收录于专栏：前端技术专栏-吴佳

前言

Console在我们开发中应该使用很频繁并且都会用的一个工具，确实好用。但是你真的会用吗？可能有些用法你到现在都还不知道，那么今天我来给各位分享一下Console的比较具体的玩法，助你开发调试更容易。

正文

什么是Console？

Console是用于显示JS和DOM对象信息的单独窗口。并且向JS中注入1个 Console 对象，使用该对象可以输出信息到Console窗口中。

什么浏览器支持console？

很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支持不好。比如 IE8 自带的开发工具虽然支持 Console，但功能比较单调，显示对象的时候都是显示 [Object,Object]，而且不能点击查看对象里面的属性。IE6、IE7 虽然可以安装 Developer Toolbar，但也不支持 console。Safari、Opera 都支持 Console，但使用上都没有 FireBug和 Chrome 的方便。现在firebug推出了firebuglite工具，可以让所有浏览器都支持Console功能，而且使用上和FireBug 几乎一样。

为什么不直接使用 alert 或自己写的 log?

使用 alert 不是一样可以显示信息，调试程序吗？alert 弹出窗口会中断程序，如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好，看完后面 console 的介绍就知道了。

Console使用大全

console.log

console.log 是最简单输出信息到 console 窗口的方法，支持多个参数，该方法会把这些参数组合在一起显示。

log 方法第一个参数支持类似 C 语言 printf 字符串替换模式，Log 支持下面几种替换模式：

%s 代替字符串
%d 代替整数
%f 代替浮点值
%o 代替 Object

console.log('%d年%d月%d日', 2020, 5, 9)
// 2020年5月9日
console.log('我的名字是%s','吴佳')
// 我的名字是吴佳
console.log('圆周率：%f', 3.1415926)
// 圆周率：3.1415926
console.log('信息：%o', {
    name: '吴佳',
    age: 20,
    sex: '男'
})
// 信息：{name: '吴佳', age: 20, sex: ’男‘}

console.debug、console.info、console.warn、console.error

这4种方法与log方法使用一模一样，只是显示的图标和文字颜色不一样

console.assert

assert 方法类似于单元测试中的断言，当 expression 表达式为 false 的时候，输出后面的信息

注：assert 方法在 firebuglite 不支持，Chrome 和 FireBug 支持

console.clear

该方法会清空 console 控制台中的所有信息

console.dirxml

显示网页的某个节点（node）所包含的html/xml代码

<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById('mytable');
        console.dirxml(mytable);
    }
</script>