常用的谷歌调试技巧1.Network 模拟弱网络状态，在 Network 点击后再点击 No throttling 可以

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

1.Network

模拟弱网络状态，在 Network 点击后再点击 No throttling 可以选择你想要模拟的网络状态。

调试的功能区域

每一个功能区，都有它相关的左右，先来看一张图，它都有哪些功能

2.Call Stack调用栈

当断点执行到某一程序块处停下来后，右侧调试区的Call Stack会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列，Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出，我们最先走了toggleTab这个方法，然后走到了一个更新对象的方法上，当前调用在哪里，箭头会帮你指向哪里，同时我们可以点击，调用栈列表上的任意一处，即可回头再去看看代码但是若你想从新从某个调用方法出执行，可以右键Restart Frame，断点就会跳到此处开头重新执行，Scope中的变量值也会依据代码从新更改，这样就可以回退来从新调试，错过的调试也可以回过头来反复查看 Breakpoints关于断点：所有当前js的断点都会展示在这个区域，你可以点击按钮用来“去掉/加上”此处断点，也可以点击下方的代码表达式，调到相应的程序代码处，来查看

3.XHR Breakpoints

:在XHR Breakpoints处，点击右侧的+号，可以添加请求的URL，一旦 XHR 调用触发时就会在 request.send() 的地方中断 DOM Breakpoints: :可以给你的DOM元素设置断点，有时候真的需要监听和查看某个元素的变化情况，赋值情况，但是我们并是不太关心哪一段代码对它做的修改，只想看看它的变化情况，那么可以给它来个监听事件，这个时候DOM Breakpoints中会如图当要给DOM添加断点的时候，会出现选择项分别是如下三种修改1.子节点修改2.自身属性修改3.自身节点被删除。选中之后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时，代码就会在那里停下来 Event listener Breakpoints: 最后Event Listener 列表，这里列出了各种可能的事件类型。勾选对应的事件类型，当触发了该类型的事件的 JavaScript 代码时就会自动中断

4.DOM调试

Elements面板右键执行DOM元素节点，选择Force Element State或者点击右侧Toggle Element State图标可以触发伪类。
Network面板中选择一张图片，在右侧图片上鼠标右键选择copy it as a Data URI,就可以获取图片的Data URL (base64编码)。
按下Alt键并且鼠标双击选择DOM元素前面的箭头，就会展开该DOM元素下的所有字节点元素.
可以用Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）格式化压缩后的代码。
如果你想调试f函数，用debug(f)语句可以增加这种断点。

5.函数调试技巧

函数计数和跟踪 console.count("调用次数");//放在函数里，每当这句代码运行输出所在函数执行次数

console.trace();//显示函数调用轨迹(访问调用栈）

function fib(n){ //输出前n个斐波那契数列值 
  if(n == 0) return;    
  console.count("调用次数");//放在函数里，每当这句代码运行输出所在函数执行次数  
  console.trace();//显示函数调用轨迹(访问调用栈） 
  var a = arguments[1] || 1;    
  var b = arguments[2] || 1;    
  console.log("fib=" + a);  
  [a, b] = [b, a + b];  
  fib(--n, a, b);   
}   
fib(6);