HTML, CSS和Javascript调试入门
转 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调试
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。