chrome浏览器调试

一，调试快捷键

F8：下个断点 F10：单步执行 F11：单步跳入 shift+F11：单步跳出

二，add to watch

选中变量，右键选择add to watch，查看变量值比较方便

三，DOM Breakpoints

有时候我们需要监听某个 DOM 被修改情况（js代码比较复杂，找不到哪里对dom做的改变），那么我们可以直接在 DOM 上设置断点。

如图所见，在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点： 1，子节点修改 2，自身属性修改 3，自身节点被删除 选中之后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时，代码就会在那里停下来，如下图所示。

对于下面代码，找到div_item元素，选择node removal监听，即可监听到

var e = document.getElementById('div_item'); e.parentElement.removeChild(e);

对于下面代码，找到item-radio元素组的第一个元素，选择自身属性修改监听，在call stack中，往下一步步找，即可监听到控制它的业务代码

var radio = angular.element('.item-radio')[0]; angular.element(radio).addClass("select");

示例代码 http://download.csdn.net/detail/superjunjin/9702930

四，console

1，console.group

console.log配合console.group 与console.groupEnd，分类管理log。这适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。

console.group("app.foo"); console.log("来自foo模块的信息 blah blah blah..."); console.groupEnd(); console.group("app.bar"); console.log("来自bar模块的信息 blah blah blah..."); console.groupEnd();

2，console.table

直接以表格的形式将数据输出

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]; console.table(data);

3，console.assert

当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。

var isDebug=false; console.assert(isDebug,'开发中的log信息。。。');

4，console.count

除了条件输出的场景，还有常见的场景是计数。 当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。

5，网页可编辑

document.body.contentEditable=’true’;