Chrome DevTools实时编辑HTML和CSS
html实时编辑
选择了一个元素，就可以通过各种方式与它进行交互。通过右键单击“元素”选项卡中的HTML并选择“编辑为HTML（edit as html）”，您可以实时编辑网页的标记，Chrome将在编辑完成后立即呈现该标记。
告诉DevTools您正在编辑可能会非常棘手。你的第一本能可能是击退Escape键，但这会使你退出编辑而放弃你的改变。您可以通过按Ctrl + Enter或直接单击您正在编辑的文本框外部(有时单击外部可能会失灵，一般使用ctrl+enter 来保存)来保存更改。
使用正常的Ctrl + Z和Ctrl + Y热键可以撤消或重做HTML编辑。除非您（默认不开启）启用持续性编辑，否则它们也将在页面刷新时丢失。
修改css样式
Styles 样式信息。css标签及所在文件路径。可勾选标签前选项进行实时修改
在Styles(样式)窗格中，可以实时编辑样式属性名称和值。所有样式都是可编辑的，除了那些灰色的（如user agent stylesheet中的样式，愚人码头注：即我们通常说的浏览器的默认样式表）。
要编辑名称或值，只要单击它就可以了，然后进行修改，然后按Tab或Enter键保存修改。测试时也可以是Ctrl+enter;打钩代表是否禁用他；
默认情况下，您的CSS修改不是永久的，当您重新加载页面时，修改的内容就会丢失。
JavaScript的调试功能
调试JavaScript代码的方法：
设置断点进行调试 具体见：http://www.css88.com/doc/chrome-devtools/javascript/add-breakpoints/
设置监测DOM变化的断点（前端文档由于JavaScript发生了变化导致断点的产生的情况）
三种情况的改变导致断点的产生：
- subtree modified（子节点的修改）
- nodeal removal（节点的移除）
- attribute modified(属性的修改）
结果是：突出显示脚本中导致更改的代码行。
1.Subtree Modifications(子树修改) - 当当前选定节点的子节点被删除，添加或子节点的内容发生更改时触发。当子节点属性改变时，或当前选择的节点发生任何改变，都不会触发该类型的断点。
2.Attributes modifications(属性修改) - 当在当前选定的节点上添加或删除属性时,或当属性值改变时触发。
3.Node Removal(节点删除) -当当前选定的节点被删除时触发
扩展：
筛选XHR(XMLHttpRequest)的请求
XHR类型的请求，达到只看XHR类型请求的目的。
两种情况： - 当任何XHR到达XHR生命周期的某个阶段时（readystatechange，load等）
- 当XHR的URL与某个字符串匹配时。
关于调用堆栈：
什么叫调用堆栈：假设我们有几个函数，分别是function1,function2,function3,funtion4，且function1调用function2，function2调用function3，function3调用function4。在function4运行过程中，我们可以从线程当前堆栈中了解到调用他的那几个函数分别是谁。把函数的顺序关系看，function4、function3、function2、function1呈现出一种“堆栈”的特征，最后被调用的函数出现在最上方。因此称呼这种关系为调用堆栈(call stack)。
注释：一般调用时如何出现异步调用时。则启动异步调用sync来扩展堆栈函数的显示。
二.如何异步调用导致函数太多可以black-boxing将不必要的jQuery代码屏蔽掉，节省调试时间。
详细文件参考：http://www.css88.com/doc/chrome-devtools/ 有详细说明使用