乐趣区

关于console:Console对象的常用api学习记录

jiezi

Console 对象

js 中也有万物皆对象的定义，所以咱们罕用的 console 也是一个对象，天然是对象，那么其身上就会自带一些办法和属性。大家 F12 关上控制台当前，间接输出 console 回车，就可以看明细啦，如下图：

本文记录一下罕用的 console 的 api，细节来自于官网文档：Chrome DevTools 中文手册：https://leeon.gitbooks.io/dev… 外面还有其余很多谷歌开发工具的应用细节，大家没事的时候，能够多逛逛，必当大有裨益 ^_^

Console 控制台 api

1. console.assert()办法，个别应用的不多，相当于一个条件判断。比方有如下代码：

let isLogin = true
console.assert(isLogin, 'isLogin 为 false，以后处于未登录状态')
// 此时 isLogin 为 true 不会执行打印，如果为 false 的时候，就会打印提醒：isLogin 为 false，以后处于未登录状态
// 相当于：if(!isLogin){console.log('isLogin 为 false，以后处于未登录状态')} // 图示如下：


2. console.clear()办法，也能够清空控制台, 清空控制台，并输入 Console was cleared，图示如下：

3. console.count()办法，这个办法有点鸡肋，就是用来计数的，计数的话，咱们应用 console.log 也是能够计数的。看代码就晓得了

let arr = ['甲', '乙', '丙', '丁']
for (let i = 0; i < arr.length; i++) {console.count('console.count 计数')
    console.log('console.log 计数', i + 1)
} // 后果如下图：

4. console.debug()办法 ，和console.log() 基本上一样，用的也少，不赘述

5. console.dir()办法，个别用于打印 dom 对象，查找其身上的属性，挺罕用的。图示如下：

6. console.dirxml()办法，用于打印 XML/HTML 文档构造的办法，挺好。示例如下：

<body>
    <h1>
        <span>
            <h2> 你好 console.dirxml()</h2>
        </span>
    </h1>
    <script>
        let span = document.querySelector('h1')
        console.dirxml(span)
    </script>
</body>
// 打印图如下：

7. console.error()和 console.exception() 办法，用于抛出谬误到控制台，咱们在编码过程中遇到的框架（vue/react）报错信息，都是被这个办法抛出来的。或者咱们本人封装的函数办法，如果使用者没有依照正确的形式去应用，咱们也能够应用这个办法，做一个抛错提醒在管制台上，有助于更好的开发

8. console.warn()办法，同上，只不过这个是抛出正告，没有下面的抛出谬误那么重大。毕竟对于程序员而言，正告不必管，报错才去看，哈哈

console.info()抛出一个信息

9. console.log()，万能狗皮膏药，最罕用的办法，不赘述。毕竟遇事不决，console 大法！

10. console.table()办法，用于在控制台打印一个 table 表格，比方咱们把我的项目更新的版本号工夫之类的信息，以表格的模式出现在管制台上，代码和示例图如下：

let arr = [
    // 每个对象的 key 是表格每一列表头的数据，value 是每一行的数据
    {
        edition: 'v1.0',
        author: '孙悟空',
        time: '2020-06-06',
    },
    {
        edition: 'v2.0',
        author: '猪八戒',
        time: '2021-07-07',
    },
    {
        edition: 'v3.0',
        author: '沙和尚',
        time: '2022-08-08',
    },
]
console.table(arr)

点击一下表头，还能够排序呢

11. cosole.time 和 console.timeEnd 办法 用于计时的，看看本人的程序用了多久，个别用于性能优化时候的排查、工夫监控之类的。比方能够算算一个循环执行了多长时间、比方能够能够算算一个递归执行了多长时间之类的。cosole.time 相当于开始掐秒表，console.timeEnd相当于完结掐秒表。代码图示如下：

console.time() // 开始掐表表
for (let i = 0; i < 100; i++) { }
console.timeEnd() // 完结掐秒表

console.timeLog相当于记录两头的工夫日志，用的不是特地多

12. console.trace()与 console.log()基本上一样，不赘述

非凡控制台打印

  • %s 字符串格局（用的少）
  • %i 或 %d 整型格局（用的少）
  • %f 浮点格局（用的少）
  • %o DOM 节点（用的少）因为：console.log('%o',document.body) == console.dirxml(document.body)
  • %O JavaScript 对象（用的少）因为：console.log('%O',document.body) == console.dir(document.body)
  • %c 对输入的字符串应用 css 款式，款式通过第二个参数指定。有几个 %c 就要有几个对应的第二个参数。第二个参数，应用逗号分隔开（用的多、用的多、用的多）举例如下：
// 这里别离给孙悟空、猪八戒、沙和尚指定不同的款式
let content = "%c 孙悟空 %c 猪八戒 %c 沙和尚"
let styleSunWuKong = "color: white; background: black; padding:5px;"
let styleZhuBaJie = "color: green; background: pink; padding:5px;"
let styleShaHeShang = "color: yellow; background: purple; padding:5px;"
console.log(content, styleSunWuKong, styleZhuBaJie, styleShaHeShang); // 效果图如下：

  • 打印图片（背景图 url 的形式），代码效果图如下：
console.log(`%c `, `background-image: url(http://ashuai.work/static/img/avantar.66bb7908.png);
                    padding: 120px 120px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    `
            )

谷歌开发者工具罕用快捷键

  • F12关上控制台（Console 面板）
  • Ctrl + Shift + I关上控制台（Console 面板）
  • Ctrl + Shift + J关上控制台（Console 面板）
  • Ctrl + Shift + C关上控制台（Elements 面板）
  • Ctrl+[ 和 Ctrl+]（在控制台不同的面板切换）
  • Ctrl + F以后页面搜所文字内容（除了代码中查找也能够在页面中查找对应的文字）
  • clear()在控制台输出即可清空控制台。或者在控制台获取焦点的状况下应用 Ctrl + L 也能够清空控制台
  • shift + enter可在控制台换行输出

调试鼠标悬浮弹出层款式步骤

比方 el-menu 鼠标悬浮呈现二级弹框内容，然而鼠标挪动走，二级弹框就隐没了，这样就不太不便咱们审查元素款式。于是乎，咱们能够这样操作，图示如下：

每天学点新常识，记录一下吧 ^_^

退出移动版