入门的HTML,css和Javascript调试技巧

本文介绍一些入门的HTML,css和Javascript调试技巧。

希望能让初学者有所收获，少走一点弯路。

个人推荐Chrome作为开发工具（FF可以使用FireBug，IE8和之后的版本也有自己的调试工具）

 

 

1.HTML的调试

• 将鼠标放在任意元素上，右键Inspect Element，即可查看该元素的HTML内容。（也可以通过F12打开开发者工具）

　　

　　效果如下

　　

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

2.CSS的调试

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

　　

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