前端调试

• 代码调试
• chrome调试

代码调试

1.debugger

可以直接在编写代码的时候，加入debugger，打开浏览器，代码会在这里进入调试模式，再配合浏览器的调试功能进行调试。

2.console

代码里使用console调试

• 显示

console.log("normal");           // 用于输出普通信息
console.info("information");     // 用于输出提示性信息
console.error("error");          // 用于输出错误信息
console.warn("warn");            // 用于输出警示信息

• 点位符
  %s 字符串 console.log("%s","string");====>string
%d 整数 console.log("%d年%d月%d日",2018.67,11,09);====>2018年11月09日
%f 浮点值 console.log("圆周率是%f",3.1415926);=====>3.1415926
%o 对象 console.log("%o",对象名字);
%c 设定输出的样式，在之后的文字将按照第二个参数里的设置显示
  console.log("%c"+"这是红色的","color:red");

• 信息分组

console.group("第一组信息");
console.log("第一组第一条：名字");
console.log("第一组第二条：性别");
console.groupEnd();

• 树状结构展示对象
  console.dir()可以显示一个对象所有的属性和方法
  一般用来显示dom，可以显示dom元素所有属性和方法

• 判断变量是否是真
  console.assert()用来判断一个表达式或变量是否为真，只有表达式为false时，才输出一条相应作息，并且抛出一个异常

• 计时功能
  console.time()和console.timeEnd()，用来显示代码的运行时间

• 性能分析
  console.profile和console.profileEnd配合一起使用来查看CPU使用相关信息

• 统计代码被执行的次数
  console.count()

• 表格显示方法
  console.table()

chrome调试

演示