对于网络开发的朋友来说,功能都可以实现,可是调试HTML代码的时候,那叫一个头疼,不过现在不用愁了,Firefox 有一款非常牛的插件:Firebug。这还是很早以前一个外国朋友告诉我的,现在估计大多数的网路开发者都已经在用这个插件,不过我想大家用的时候也这是看看会有什么错误,或者使用“Inspect”功能来看出错的代码在什么地方,可是光用这些功能真是太小看Firebug 了,它除了查找代码,还可以调试代码,尤其是AJAX用到的就更多了,下面言归正传,首先请确保你已经安装FIrebug了,如果你不清楚怎么安装的话,请看我的另一篇文章:Firebug使用详解,这里就不再赘述了,这篇主要讲一些使用方法,如果有什么错误或遗漏希望大家能帮忙给我指出.
首先来说第一个功能,页面源代码查看功能
通过Firebug 可以有三种方式找到页面源代码的任何节点,方法一:启动Firebug(F12是快捷键),这个时候你应该在Firebug 的菜单里看到一个”Inspect(查看)”,这个时候,只要你的鼠标在页面上移动,那下面的信息就会显示出相应的节点信息,然后鼠标选定即可查看,通过Firebug看到的HTML代码是非常有格式的,看起来层次感非常强。方法二:就是在Firebug的HTML信息区中,用鼠标选择你想查找的节点,这个时候,只要你的鼠标移动那个节点上,那个节点就会被一层阴影遮盖起来,方便你查看。方法三:就是Firebug 具有非常好的模糊查找功能,当你启动Firebug后,会发现在Firebug的右上角有一个搜索框,这样他可以按照你想查找的内容遍历整个HTML页面,这样就能方便你查找。
然后再来说它第二个功能能:修改页面源代码
当然,这里所说的修改是指为了调试方便,我们可以改源码中的节点,属性以及位置等等,可是仅仅是在客户端更改了,并没有修改服务器的代码,所以你在调试成功以后,一定要把服务器上的代码也做相应的更改。修改有两个方法:一个直接在HTML 的信息区内点击某一个节点的属性的名字或者值,这时被选中的项就会变成可编辑状态,直接修改就可以;另一个方法是先要选中你想修改的节点,然后再点击Firebug导航里的“Edit”,这个时候HTML的信息区就编程了可编辑的状态,你也可以随便修改了。
这里所说的是修改HTML内容,同样的方法你可以修改右侧的CSS文件,这里不同的是当你在CSS信息区内双击鼠标的时候,CSS 会让你再添加一条新的样式,而在HTML信息区,双击后,就会把相应的节点变为编辑状态。
不早了,今天就到这里吧,后续我会给大家带了如果测试AJAX,及Firebug控制台的一些介绍
Pingback 引用通告: Firefox最牛的插件Firebug(二):控制台详解 - IT驿站