Chrome 调试技巧

/控制初始console的方法/
console.log(“打印字符串”); // 打印自定义字符串
console.error(“打印错误信息”); // 打印错误信息
console.info(“我是个信息”); // 打印自定义信息
console.warn(“警告信息”); // 打印警告信息
console.debug(“调试信息”); // 打印调试信息
// console.clear(); // 清空控制台

        /*格式化输出 console还支持自定义样式和类似c语言的printf形式：*/
        console.log("%s年",2019);   // %s表示字符串
        console.log("%d年%d月",2019,02);  // %d表示整数
        console.log("%f",3.123);    // %f表示小数
        console.log("%o",new Date());  // %o表示对象
        console.log("%c自定义样式","font-size:30px;color:#f40;");  // %c表示自定义样式
        
        /*对象输出*/
        var obj = {
        	name:"lis",
        	age:19
        }
        console.dir(obj)  // 显示对象自由属性和方法
        
        /* 对于多个对象的结合输出*/
        var arr = [
           {
           	 name:'Bob',
           	 age:12,
           	 hobby:"playing"
           },
           {
           	 name:'Lucy',
           	 age:16,
           	 hobby:"reading"
           },
           {
           	 name:'Jane',
           	 age:22,
           	 hobby:"shopping"
           },
        ]
        console.log(arr);
        console.table(arr);   // 以表格的形式输出
        
        /*成组输出*/
        console.group("start");  // 组名字，随意起
        console.log("sub1");
        console.log("sub2");
        console.log("sub3");
        console.groupEnd("end");    
        
        /*函数计数和跟踪*/
        function fn(n){
        	if(n == 0) return;
        	console.count("调用次数");  // 放在函数里，每当这句代码运行输出所在函数执行次数
        	console.trace();   // 显示函数调用轨迹（访问调用栈）
        	var a = arguments[1] || 1;
        	var b = arguments[2] || 1;
        	console.log("fn=" + a);
        	[a,b] = [b,a+b];
        	fn(--n,a,b);
        }
        fn(2)
        
        /*计时*/
       console.time();  // 计时开始
       fn(2);
       console.timeEnd();  // 计时结束并输出时长
        
       /*断言语句，js中，当第一个表达式或参数为true时候什么也不发生，为false时终止程序并报错。*/
      console.assert(true,"我错了");
      console.assert(false,"真的错了");
      
      /*性能分析*/
      function F(){
      	var i = 0;
      	function f(){
      		while(i++ == 1000);
      	}
      	function g(){
      		while(i++ == 100000);
      	}
      	f();
      	g();
      }
      console.profile();
      F();
      console.profileEnd();
      
     /*debugger*/
     var arr1 = [];
     for(var i = 0;i<10;i++){
     	arr1[i] = (function(i){
     		return function(){
     			debugger;
     			return i;
     		};
     	})(i);
     }
     for(var j = 0; j<arr1.length;j++){
     	console.log(arr1[j]()+"")
     }

debugger
单步调试就是点一下，执行一句程序，并且可以查看当前作用域可见的所有变量和值。而debugger就是告诉程序在那里停下来进行单步调试，俗称断点。

右边按钮如下：

Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。
Step over next function call：执行到下一步的函数调用（跳到下一行）。
Step into next function call：进入当前函数。
Step out of current function：跳出当前执行函数。
Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。
Pause on exceptions：异常情况自动断点设置。
其实右侧还有很多强大的功能:

Watch：Watch表达式
Call Stack: 栈中变量的调用，这里是递归调用，肯定是在内存栈部分调用。
Scope：当前作用域变量观察。
BreakPoints：当前断点变量观察。
XHR BreakPoints：面向Ajax，专为异步而生的断点调试功能。
DOM BreakPoints：主要包括下列DOM断点，注册方式见下图：
当节点属性发生变化时断点（Break on attributes modifications）
当节点内部子节点变化时断点（Break on subtree modifications）
当节点被移除时断点（Break on node removal）

Global Listeners：全局事件监听
Event Listener Breakpoints：事件监听器断点，列出了所有页面及脚本事件，包括：鼠标、键盘、动画、定时器、XHR等等。