你不知道的console，让js调试更简单

antz 发布于2019-08-02 15:36 / 297人阅读

摘要：对于前端的各位工程师，肯定不会对陌生，但是，你又能了解多少呢，今天就让小鹏来一窥大前世界。则没有任何反应分组在控制台创建一个分组，直到调用之后分组结束今日事项吃饭睡觉打豆豆明日事项赏花赏月赏秋香喜欢就点赞收藏一下咯参考文献

对于前端的各位工程师，肯定不会对console陌生，但是，你又能了解多少呢，今天就让小鹏来一窥大前世界。

Chrome控制台-开发者工具

windows按F12， MAC按Command + Option + C或Command + Option + J, 即可打开控制台

1. 向 Web 控制台输出一条消息

console.log("Hello world!");
console.info("Hello world!");
console.warn("Hello world!");
console.error("Hello world!");
console.debug("Hello world!");

2. console.dir() 显示一个对象对所有属性和方法

console.dir(document);

3. console.table() 将数据以表格的形式显示

这个方法需要一个必须参数data，data必须是一个数组或者一个对象

var names = [
    {
        name: "小明",
        age: 20,
        gender: "男"
    },
    {
        name: "小红",
        age: 18,
        gender: "女"
    },
    {
        name: "小李",
        age: 22,
        gender: "男"
    }
]

console.table(names)

4. 计算操作占用的时常

注意：每一个定时器必须拥有唯一的名字

console.time("本次代码运行时间");
let count = 0;
for (let i=0; i<100; i++) {
    count++;
}
console.timeEnd("本次代码运行时间");

5. 输出被调用的次数

console.count() 此函数接受一个可选参数 label

let user = "";
function greate () {
    console.count(user);
    return "hi" + user;
}

user = "Bob";
// 此时的lable是Bob
greate();

user = "John";
// 此时的lable是John
greate();
greate();
console.count("John");

6. 判断断言是否为真

console.assert() 如果断言为false，则将一个错误消息写入控制台，如果断言为true。则没有任何反应

console.assert(1==1, "Success");
console.assert(1==2, "Error");

7. 分组

console.group()在控制台创建一个分组，直到调用console.groupEnd()之后分组结束

console.group("今日事项");
    console.log("吃饭");
    console.log("睡觉");
    console.log("打豆豆");
console.groupEnd();

console.group("明日事项");
    console.log("赏花");
    console.log("赏月");
    console.log("赏秋香");
console.groupEnd();

喜欢就点赞收藏一下咯

参考文献：

MDN: https://developer.mozilla.org...

海外云主机 GPU服务器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54233.html

你不知道的console，让js调试更简单

摘要：对于前端的各位工程师，肯定不会对陌生，但是，你又能了解多少呢，今天就让小鹏来一窥大前世界。则没有任何反应分组在控制台创建一个分组，直到调用之后分组结束今日事项吃饭睡觉打豆豆明日事项赏花赏月赏秋香喜欢就点赞收藏一下咯参考文献对于前端的各位工程师，肯定不会对console陌生，但是，你又能了解多少呢，今天就让小鹏来一窥大前世界。 Chrome控制台-开发者工具 windows按F12， ...

adie 2019-08-26 10:19 评论0 收藏0
你不知道的Chrome DevTools（4）：推荐几款DevTools插件

摘要：下面推荐几款插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。这有点类似前面说过的插件。类似的针对不同框架的调试工具还有最后介绍的不是的插件，而是主题。总结好的，这次的插件就推荐了这几个。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的...

svtter 2019-08-21 12:17 评论0 收藏0
[你不知道的 JavaScript 类型和语法] 第一章：类型

摘要：语言中规定的类型为以及。这两个值有不同的类型。内建类型定义了七种内建类型中新增提示以上类型，除的被称为基本类型。新增列出的六种类型的值都会返回一个对应类型名称的字符串。是中新增的数据类型，我们会在第三章详细介绍。译者的前言一直都想好好研究这个在 GitHub 上很有名气的系列，而翻译恰是最好的阅读途径之一。可以让我阅读的时候，不那么不求甚解。图灵社区出版了该系列两部分的中文版——...

Astrian 2019-08-22 12:02 评论0 收藏0
你不知道的Chrome DevTools（2）：那些debug的技巧

摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。然而，这还不是最严重的，因为的语法比较宽松和随意，所以同一功能多种写法，各种奇葩都有。总结前端在调试代码的时候，知道开发工具上的小技巧，可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔...

warnerwu 2019-08-19 14:38 评论0 收藏0
玩转控制台，看看那些你不知道的Console用法

摘要：清除控制台在下清除控制台的方法有很多输入命令或命令使用快捷键或点击控制台左上角第二个图标前言作为前端工程师，我们每天都离不开用控制台调试代码，console.log也成了我们最常用的命令，那除了用console.log，还有许多console的方法可以使用，熟练掌握它们，可以让我们在控制台看到的信息更美观准确，也会大大提高我们的开发效率哦，下面就跟小肆一起来看看吧. Chrome的...

Big_fat_cat 2019-08-23 14:39 评论0 收藏0