console 命令相关 - Angular

控制台 console 也是很常用的一项基础项,简单调用尝试了一下所涵盖的功能；

具体在如下代码中有一一列举,具体输出的内容可从日志中进行对应参考；

    console.log('一、基本信息打印: log, info, error, warn');
    console.log(this.name, '- log');
    console.info(this);
    console.error(this.name, '- error');
    console.warn(this.name, '- warn');

    console.log('二、数据类型打印: 字符串(%s), 整数(%d & %i), 浮点数(%f), 对象(%o)');
    console.log('字符串: %s', 'string');
    console.log('整数: %d年%d月%d日', 2016, 8, 29);
    console.log('浮点数: 圆周率是%f', 3.1415926);
    const objInfo = {
      name : '名字',
      sex  : '性别',
      age  : '10'
    };
    console.log('对象: %o', objInfo);

    console.log('三、信息分组: group, groupEnd');
    console.group('第一组');
    console.log('第一组第一条');
    console.log('第一组第二条');
    console.groupEnd();

    console.log('四、将对象以树状结构展现: dir');
    const objectInfo = {
      name : 'Angular',
      detail : 'fuck',

      getInfo : function () {
        return this.name + this.detail;
      }
    };
    console.dir(objectInfo);

    console.log('五、显示某个节点的内容: dirxml');
    const node = document.getElementById('head');
    node.innerHTML += '<p>显示某个节点内容0</p>';
    node.innerHTML += '<p>显示某个节点内容1</p>';
    node.innerHTML += '<p>显示某个节点内容2</p>';
    node.innerHTML += '<p>显示某个节点内容3</p>';
    console.dirxml(node);

    console.log('六、判断变量真伪(当为 false 时输出 log 信息): assert');
    const isDebug = true;
    console.assert(isDebug, '判断变量真伪');

    console.log('七、计时功能: time');
    console.time('计时器-开启');
    // for (var i = 0; i < 10; i++) {
    //   for (var j = 0; j < 5; j ++) {}
    // }
    console.timeEnd('计时器-关闭');

    console.log('八、表格显示: table');
    const tabTest = [
      {
        name : '张三',
        age : '11'
      },
      {
        name : '李四',
        age : '22'
      }
    ];
    console.table(tabTest);

    console.log("利用控制台输出内容(文字、图片),例如: %csurvivorsfyh","font-size:16px;color:blue;font-weight:bold;");

如上内容所对应输入的日志如下：

console 命令相关 - Angular

——————

以上便是此次小结的内容，初探 angular 还望大神多多指教！

console 命令相关 - Angular

相关推荐