转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html
HTML, CSS和Javascript调试入门
本文介绍一些入门的HTML,css和Javascript调试技巧。
希望能让初学者有所收获，少走一点弯路。
个人推荐Chrome作为开发工具（FF可以使用FireBug，IE8和之后的版本也有自己的调试工具）
1.HTML的调试
- 将鼠标放在任意元素上，右键Inspect Element，即可查看该元素的HTML内容。（也可以通过F12打开开发者工具）
效果如下
- 在Elements面板中 将鼠标放在任意元素上，HTML界面上对应的元素会被选中
- 右击元素，可以直接修改或者是移除元素，修改后的元素效果会马上反应在页面上
2.CSS的调试
- 在开发者工具的右侧面板可以找到对应的CSS调试框
- Styles分类下可以看到该元素的详细样式，而且你还可以直接修改它 （点击一个样式，或者双击空白处）
- 样式的右侧会提示该样式来自哪个文件的哪一行
- 被加了删除线的样式是无效的，或者被覆盖了
- 将鼠标放在样式上的时候，右侧会出现一个CheckBox，用于启用和禁用当前样式
3.Javascript调试
- 首先是Javascript调试框
- 左侧是javascript面板，可以加断点（绿色），当前正运行到的行（红色）
- 位于script.js的下拉框可以选择不同的js文件调试，（如果你的js文件有结构错误，可能没法被加载到列表中）
- 右上方是javascript内容搜索
- Watch Expressions可以运行和查看表达式和变量
- Call Stack显示当前堆栈，单击可以切换到堆栈中的不同位置
- Scope variables，显示当前上下文变量
- Breakpoints， 断点
- console.log该方法会输出到Console中，（放弃alert吧，用调试和console.log）
- 在Console可以直接运行javascript，很方便 (如果你要验证js，不需要写个新页面，直接在这里运行就是了)
- 现在可以很方便的调试Javascript了，不过有的时候，你发现页面上元素被修改了，但是你不知道被什么代码修改了，那可以给DOM增加断点
- 当ul中的元素被改变的时候触发断点，如下：（注意右边的堆栈，那可以帮你找到答案：谁动了你的奶酪）
还有很多高级功能，例如资源和网络分析，javascript性能分析（内存泄漏）等等，有兴趣研究下
英文好的朋友看看楼下推荐的文章,挺详细的chrome调试