共计 2061 个字符，预计需要花费 6 分钟才能阅读完成。
web 的调试一直采用的是火狐 firebug 的调试, 现在火狐越来越臃肿. 现在在领导的启发下, 平常都用 chrome dev tools 调试的, 也是挺方便, 转载下 chrome 的调试技巧做下记录.
Google Chrome 在招来了 FireFox，FireBug 的项目组领导人 John J. Barton 后，Chrome Dev Tools 也变的越来越好用，越来越方便了。本文根据 Google I/O 上对 Chrome Dev Tools 的介绍 (http://www.youtube.com/watch?v=N8SS-rUEZPg), 和相关 PPT：http://chrome-devtools-io2011.appspot.com/template/index.html 整理而来。(参照的 Chrome 版本为: 19.0.1084.52)
实时 ****CSS Style 编辑
选择一个 Dom, 可以对 Dom 进行编辑和操作, 实时修改 Css Style, 同时 CssStyle 可以保存变更历史版本。
保存变更历史版本:
同时支持可以在 Chrome 载入的 Css 文件正文中自由的修改。
网络交互
当一个页面载入时，所有发出的请求可以在“Network”里监听到，同时下面有”All”,“Documents”,”Stylesheets”,“Images”,“Scripts”,“XHR”(XMLHttpRequst), WebSockets, Other, 这几个分类，可以清晰的把网络请求进行分类，同时可以看到每个请求的详细情况。
控制台
在控制台里可以方便的使用命令来查看 Dom，执行 JavaScript, 等等操作，Console API: http://getfirebug.com/wiki/index.php/Command_Line_API copy(), dir(), inspect(), $0,
Script Debugging
Script Debugging 脚本调试功能，这个功能可以说是 Chrome Dev Tools 里最实用最强大的工具了:
1. JavaScript Breakpoints, Break on exception, JavaScript Pretty Print.
Break Points: 断点在需要设置的地方点一下即可,Break on exception: 当此功能开启时，有 Script 异常出现时, 自动会在 Exception 处断住, 方便差错。JavaScript Pretty Print: 当 JavaScript 被压缩后，非常难阅读，Pretty Print 使 JavaScript 按照语法和关键字重新换行并重排，使得压缩后的 JavaScript 仍然可以进行阅读。
2. DOM Breakpoints
Dom 元素断点，经常有多处 JavaScript 操作同一个 Dom 元素，如果要在 JavaScript 上下断点，要下好几个地方，不好断到想要的地方，在 Dom 元素上下断点就方便多了：
Break on subtree modifications, Break on attributes modifications, Break on node removal, 可以方便的断到操作 Dom 的 JavaScript。
3. XHR Breakpoints, Event listener breakpoints:
XHR Breakpoints, 可以方便的断到 XMLHttpRequest Ajax 请求。Event Listener Breakpoints, 可以方便的断到各种 Event。
4. 查找 JavaScript
使用 Ctrl+Shift+F, 打开查找窗口, 查找支持正则表达式：
查找函数定义：Ctrl + Shift + o
查找文件：Ctrl + o
5. 实时修改 JavaScript 代码
页面外链 JavaScript 文件在 Script Panel 中可以直接修改，改完后 Ctrl + s 保存，会立即生效，但是不支持 Html 页面中 JavaScript 修改，经过 Pretty print 格式化的 JavaScript 也不支持实时修改。
6. 自建 Script 文件
在 Console(控制台) 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Script Panel 中加入一个新的外链 Script 文件: filename.js, 这个新文件和其它外链 JavaScript 文件一样，可以实时进行修改。
Timeline
Timeline 功能把浏览器处理 Dom 的时间轴画了出来，方便进行优化:
Remote Debugging
Remote Debugging 使得 Chrome 成为一个 WebServer, 执行命令–remote-debugging-port=1337, 同时再开一个 Chrome 访问 localhost:1337, 就可以用一个 Chrome 当 Host, 一个 Chrome 当 Client, 在调试一些移动 Web 的时候非常实用。
