JS调试篇

一：console大法

template：console醒目标识

1. console.log('%c 我是炼火鸟的调试信息---》','color:white;font-weight:500;font-size:15px;background:green')

console.log('%c', 'background:url("")')    // 控制台输出图片
console.log('%c obj: ','color: red;',obj)

2.console输出分组

　  console.group("第一组信息");

　　console.log("第一组第一条");

　　console.log("第一组第二条");

　　console.groupEnd();

　　console.group("第二组信息");

　　console.log("第二组第一条");

　　console.log("第二组第二条");

　　console.groupEnd();

3.三种显示效果的console(chrome浏览器)

console.log('hello'); console.info("这是info"); console.debug("这是debug");   //  console的log info  debug表现形式一样    warn和error的表现现象不一样的哦

console.warn("这是warn"); console.error("这是error");

　　

4. 占位符： console.log("%d年%d月%d日",2018,11,01);

5. time计时

console.time("计时开始”) 

for(let i=0; i<100; i++){
    console.log(i * i）
}

console.timeEnd("计时结束")    

6.  内存情况

console.profile('性能检测开始')
  // .... code here   这段时间的CPU情况
console.profileEnd('性能检测结束')  //

7.console.count(‘被执行的次数’)            console.count('当前function的名字被执行的次数') //统计代码被执行的次数 以便决定是否提取出来作为公共方法，开发环境下内置为AOP  

8. 自定义封装的log方法

 (function logUtils(){
        return log = function() {
            let ref = console.log
            ref.call(console, '%c sandy`s debug: ' + [].slice.call(arguments).join(' '), 'color: green; font-size: 15px;')
        }
    })()
log('hello')

 function log() {
       return log = console.log.bind(console)  //  在console方法上面绑定console.log方法  bind方法是接受传参的
    }

 9. console.clear()   清空控制台输出

二：alert

三：debuger之chrome浏览器

1.代码中debugger

2.在浏览器源码处打断点 

四：chrome之webstrome