【转】HTML, CSS和Javascript调试入门

时间:2022-02-19 11:46:46

转 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打开开发者工具)

  【转】HTML, CSS和Javascript调试入门

  效果如下

  【转】HTML, CSS和Javascript调试入门

  • 在Elements面板中 将鼠标放在任意元素上,HTML界面上对应的元素会被选中
  • 右击元素,可以直接修改或者是移除元素,修改后的元素效果会马上反应在页面上

2.CSS的调试

  • 在开发者工具的右侧面板可以找到对应的CSS调试框

  【转】HTML, CSS和Javascript调试入门

  • Styles分类下可以看到该元素的详细样式,而且你还可以直接修改它 (点击一个样式,或者双击空白处)
  • 样式的右侧会提示该样式来自哪个文件的哪一行
  • 被加了删除线的样式是无效的,或者被覆盖了
  • 将鼠标放在样式上的时候,右侧会出现一个CheckBox,用于启用和禁用当前样式

3.Javascript调试

  • 首先是Javascript调试框  【转】HTML, CSS和Javascript调试入门
  • 左侧是javascript面板,可以加断点(绿色),当前正运行到的行(红色)
  • 位于script.js的下拉框可以选择不同的js文件调试,(如果你的js文件有结构错误,可能没法被加载到列表中)
  • 右上方是javascript内容搜索
  • Watch Expressions可以运行和查看表达式和变量
  • Call Stack显示当前堆栈,单击可以切换到堆栈中的不同位置
  • Scope variables,显示当前上下文变量
  • Breakpoints, 断点
  • console.log该方法会输出到Console中,(放弃alert吧,用调试和console.log)
  • 在Console可以直接运行javascript,很方便 (如果你要验证js,不需要写个新页面,直接在这里运行就是了)

  【转】HTML, CSS和Javascript调试入门

  • 现在可以很方便的调试Javascript了,不过有的时候,你发现页面上元素被修改了,但是你不知道被什么代码修改了,那可以给DOM增加断点

  【转】HTML, CSS和Javascript调试入门

  • 当ul中的元素被改变的时候触发断点,如下:(注意右边的堆栈,那可以帮你找到答案:谁动了你的奶酪)  【转】HTML, CSS和Javascript调试入门

还有很多高级功能,例如资源和网络分析,javascript性能分析(内存泄漏)等等,有兴趣研究下

英文好的朋友看看楼下推荐的文章,挺详细的chrome调试

http://www.codeproject.com/KB/trace/BeginChromeDebug.aspx