• 【转载】你不知道的 console,让 JS 调试更简单


    对于前端工程师,肯定不会对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('timer');
    let count = 0;
    for (let i=0; i<100; i++) {
        count++;
    }
    console.timeEnd('timer');
    复制代码

    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();
    复制代码
     


  • 相关阅读:
    微信公众平台回复音乐
    Else is very important
    Generate source code from wsdl
    PHP Simple HTML DOM Parser: check elements with multiple classes
    Get Version is the first function is called?
    Remote debug GWT UI
    Remote Debug For Java Application On Tomcat
    SetStyleName引起的Regression Issue
    做乘法运算的时候需要考虑越界问题
    MySQL Uniall All
  • 原文地址:https://www.cnblogs.com/hzhjxx/p/11330882.html
Copyright © 2020-2023  润新知