JS调试篇

一：console大法

template：console醒目标识

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

console.log("%c","padding: 50px 300px;line-height:120px;background:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527605200447&di=cae26a6a9b63f81da7053e385be6acd7&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1110%2F23%2Fc1%2F9365523_9365523_1319332757695_mthumb.jpg') no-repeat;")

console.log("%c代码调试模式==================================>","height:30px;padding:2px 10px;color:white;")

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.warn("这是warn");
 console.error("这是error");

　　

4.输出Dom节点的内容   console.dirxml(dom); 

5.方法调用轨迹：console.trace()

6.console.time()和console.timeEnd()     配对使用：计算一段代码的运行时间  

7.console.count(‘被执行的次数’)

8.console.table()    两层的时候  

二：alert

三：debuger之chrome浏览器

1.代码中debugger

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

四：chrome之webstrome