javascript输出数据在控制台中console的常用方法

 javascript输出数据在控制台中console的常用方法

1、 log()和info() 没有区别，都是输出信息。

			let pig = `

			╭︿︿︿╮

			{/ o o /}

			( (oo) )

			︶︶︶

			`;

			let hert = `

			☆☆ ☆☆ ☆☆ ☆☆

			★★ ★ ★★

			☆☆ 祝你快乐！ ☆☆

			★★ ★★

			☆☆ ☆☆

			★★ ★★

			☆☆ ☆☆

			★★ ★★

			☆☆

			`;

			console.log(pig,hert);

预览：

有的浏览器info会有图标(例如：在火狐浏览器的控制台里有图标)。

    <script>
        {
            let a = 100;
            console.log(a);
            console.info(a);
        }
    </script>

预览：

\n换行

{
            // console.log
            // \n换行
            var str = '每一个星球都有一个驱动核心，\n';
            str += '每一种思想都有影响力的种子。\n';
            str += '感受世界的温度，\n';
            str += '年轻的你也能成为改变世界的动力，\n';
            str += '百度珍惜你所有的潜力。\n';
            str += '你的潜力，是改变世界的动力！';
            console.log(str);

        }

预览：

console.log带颜色的字

 console.log支持的格式标志有:

%c       css样式

       {
            // console.log带颜色的字
            // %c css样式
           var etxt = '百度2022校园招聘简历投递：https://talent.baidu.com/external/baidu/campus.html';
           // 我要设置 css样式 ，设置谁， 设置的样式是什么 
            // 正确写法：
            console.log('%c'+etxt,'color:red;');
            // 错误写法：（不会生效，不会其作用）
            // console.log(etxt+'%c','color:red;');
              
	       console.log('123 %c 456','font-size:36px;color:red;');
		   
		   console.log("不论学前端还是后端， %c 请访问：http://mrsdai.com", "color:blue;");
		 // 三个文字，设置三个不同的颜色
		   console.log("%c我%c爱%c你","color:orange;font-size:30px", "color:green;font-size:30px", "color:purple;font-size:30px");

       }

预览：

2、warn()和error()

warn()输出的log前有个黄色的图标error()输出的log前有个红色的图标

这两个方法，同样是输出信息。只是这个信息是错误的，是有问题的。你在输出的时候，告知别人输出的信息有问题，要大家注意。

   <script>
        {
            let a;
            console.warn(a);
            console.error(a);
        }
    </script>

3、count()

这个方法可以在控制台中直接进行计算输出。----直接在控制台里写

可以把console.count()放在一个方法内，每次调用都会加1，更好显示方法被调用了多少次。

console.count(100+200)

4、clear()

Console was cleared 会清空控制台信息 。----直接在控制台里写

console.clear()

5、assert()

一般两个参数，前面的是表达式，后面是要输出的内容，如果表达式为false，则输出。

注意：前面参数 是表达式，当这个表达式输出的结果是false的时候，后面这个参数里的内容，才会被输出在控制台显示。

        {
        //    console.assert(10>5, '正确');

        //    console.assert(10 === '10', '错误');
          
        }

        {
            console.assert(true, '错误');

            console.assert(false, '错误');

        }

6、dir()

使输出内容格式化更易读，而且也会输出一个对象的全部属性和方法。

        {
            let arr = [1,2,3];
            console.dir(arr);
            console.log(arr);

            let obj = {id:1, uname:'小名'};
            console.dir(obj);
            console.log(obj);

            let p = new Promise(()=>{})
            console.dir(p);
            console.log(p);
            
        }

7、 table()

打印数组对象，在控制台中会出现一个表格

        {
            // 打印数组对象
            var table = [
                {name: "小猪佩奇", sex: "女"},
                {name: "小狗丹尼", sex: "男"},
                {name: "小猫坎迪", sex: "女"},
                {name: "小羊苏西", sex: "男"}
            ];
            // 打印数组对象，在控制台中会出现一个表格
            console.table(table)
        }

预览：

8、 group()

分组输出，可嵌套

       {
        // 分组输出，可嵌套
        console.group('分组1');
        console.log('语文');
        console.log('数学');
        console.group('其他学科');
        console.log('化学');
        console.log('%c地理','color:blue;');
        console.log('%c历史','color:orange;');
        
       }

9、trace()

调试JavaScript程序时，使用console.trace()，不仅会打印函数调用栈信息，同时也会显示函数调用中各参数的值。