【工具】Cocos3.x中 console的API使用

 参考：

MDN - console样式 

MDN - consoleAPI

CSND - 学习到一些花式console.log

 

一 MDN的console文档

二 console的API示例

三 console的样式

四 csdn找来的花式样式

 

一 MDN的console文档

cocos3.x源码下的console有如下API

lib.dom.d.ts：

/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console) */
interface Console {
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/assert_static) */
    assert(condition?: boolean, ...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/clear_static) */
    clear(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/count_static) */
    count(label?: string): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/countreset_static) */
    countReset(label?: string): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/debug_static) */
    debug(...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/dir_static) */
    dir(item?: any, options?: any): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/dirxml_static) */
    dirxml(...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/error_static) */
    error(...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/group_static) */
    group(...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/groupcollapsed_static) */
    groupCollapsed(...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/groupend_static) */
    groupEnd(): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/info_static) */
    info(...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static) */
    log(...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/table_static) */
    table(tabularData?: any, properties?: string[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/time_static) */
    time(label?: string): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/timeend_static) */
    timeEnd(label?: string): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/timelog_static) */
    timeLog(label?: string, ...data: any[]): void;
    timeStamp(label?: string): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/trace_static) */
    trace(...data: any[]): void;
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/warn_static) */
    warn(...data: any[]): void;
}

　

二 consoleAPI示例

log

console.log("a");

控制台输出一条信息，最常用的输出手段。

 

error  输出错误信息

console.error("a");

特点是红色显示，比较醒目

 

warn 输出警告信息

console.warn("a");

特点是黄色提示，比较醒目

 

assert  断言  

 

console.assert(true, 123);
console.assert(false, 111, 222);

 

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

主要用于在条件为false时输出，例如 console.assert(cfg == null, "配置文件为null")

console.assert(true, 123);        //无输出
console.assert(false,111,222);    //"Assertion failed: 111 222"

　　

clear 清空控制台

console.clear();

将打印信息清除

 

count 输出指定标签调用次数

console.count("a");   //"a:1"
console.count("a");   //"a:2"
console.count("b");   //"b:1"
console.count();      //"default:1"
console.count();      //"default:2"

 

 resetCount 可重置计数

console.count("a");           //"a:1"
console.count("a");           //"a:2"
console.countReset("a");      //重置计数
console.count("a");           //"a:1"

　　

debug  消息级别

console.debug("a");

只有该消息级别才能查看输出信息，对应"debug"或"verbose"级别

chrome浏览器选择消息级别

 未选择verbose

console.debug("a");     //无输出

选择verbose　

console.debug("a");    //输出:"a"

　　

dir 查看对象属性方法

let obj = {name:"peter",age:18};
console.dir(obj);   //输出:Object

 该方法和console.log(obj)区别不大，都能查看属性，只是输出略有不同。

dir输出

log输出

 

group、groupCollapsed、groupEnd

console.log("a");
console.group("分组1");
console.log("b1");
console.log("b2");
console.groupEnd();
console.log("c");

分组信息group，默认展开

 

分组信息groupCollapsed，默认折叠

 

 该方法会让输出信息上出现一个文件夹图标。

 

info   

console.info("a");

向 web 控制台输出一个通知信息。仅在 Firefox，web 控制台的日志中的项目旁边会显示一个小的‘I‘图标

没什么用，chrome打印和log一样，看不出差别

 

table  表格

let obj = {name:"peter", age:18};
console.table(obj);

以表格形式打印信息

 

time、timeEnd、timeLog

console.time("a");
for(let i=0;i<99999;i++){let a= 123};
console.timeEnd("a");

用于计时，单位ms。time启动计时，timeEnd结束计时并输出时间，timeLog计时启动后输出当前计时时间。

 

 

trace  输出一个堆栈跟踪

function foo(){
    function bar(){
        console.trace();
    }
    bar();
}
foo();

可以方便的查看代码一步步调用情况，点击堆栈可以跳转到对应代码位置。

 

三 console的样式

字符串替换

%o 对象

%d 整数

%s 字符串

%f 浮点数

%c 定义样式

 

打印整数和字符串

console.log("my name is %s,今年%d岁", "小明",18);;  //输出:"my name is 小明,今年18岁"

%d只能接收整数，如果是18.88，只会打印18。

%f能接收整数和浮点数，18和18.88都能打印，而且打印18和%d显示没有差别。

 

打印对象

let obj = {name:"peter",age:18};
console.log("这是一个对象%o",obj);

 

打印样式

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);

%c后面的内容会套用样式

 

四 csdn找来的花式样式

// 美化打印实现方法
const prettyLog = () => {
    const isEmpty = (value) => {
        return value == null || value === undefined || value === '';
    };
    const prettyPrint = (title, text, color) => {
        console.log(
            `%c ${title} %c ${text} %c`,
            `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
            `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
            'background:transparent'
        );
    };
    const info = (textOrTitle, content = '') => {
        const title = isEmpty(content) ? 'Info' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#909399');
    };
    const error = (textOrTitle, content = '') => {
        const title = isEmpty(content) ? 'Error' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#F56C6C');
    };
    const warning = (textOrTitle, content = '') => {
        const title = isEmpty(content) ? 'Warning' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#E6A23C');
    };
    const success = (textOrTitle, content = '') => {
        const title = isEmpty(content) ? 'Success ' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#67C23A');
    };
    return {
        info,
        error,
        warning,
        success
    };
};
// 创建打印对象
const log = prettyLog();
 
// 不带标题
log.info('这是基础信息!');
// 带标题
log.info('注意看', '这是个男人叫小帅!');
 
// 不带标题
log.error('前方的路看似很危险,实际一点也不安全。');
// 带标题
log.error('奥德彪', '出来的时候穷 生活总是让我穷 所以现在还是穷。');
 
// 不带标题
log.warning('人只要肯吃苦，就有吃不完的苦! ');
// 带标题
log.warning('奥德彪', '我并非无路可走 我还有死路一条! ');
 
// 不带标题
log.success('没钱的爱情就像香蕉，不是黄了就是绿了！');
// 带标题
log.success('奥德彪', '钱没了可以再赚，良心没了便可以赚的更多。 ');