大家好,小爱来为大家解答以上问题。fire-debugger,firebug 使用很多人还不知道,现在让我们一起来看看吧!
1、你可以用Firebug在页面中找到任何东西。
2、不知道大家有没有遇到过这样的情况。在一个复杂的HTML页面中,当你想找到一个页面元素实际对应的HTML时,就要在大量的HTML代码中查找,非常麻烦。有了Firebug,现在你所要做的就是在页面上,
3、用鼠标右键选中一个元素,然后在弹出的菜单中选择“查看元素”,马上就会在HTML页面代码中找到该元素对应的代码,非常方便,如下图所示:
4、你可以使用Firebug来修改HTML和CSS。
5、通过Firebug可以直接修改HTML,添加HTML属性,删除元素,添加CSS样式,实现更多功能,如下图所示:
6、您可以通过Firebug查看DOM元素和操作XML。
7、当你打开一个HTML页面,通过Firebug查看HTML代码的时候,可以同时点击控制面板中的DOM树,你会看到整个HTML结构以DOM树结构的形式呈现。如果你打开一个XML文件,
8、然后右键单击XML文件中的任意元素,也可以在弹出的菜单中选择对XML执行相关操作,如下图所示:
9、用Firebug调试Javascript代码
10、在Firebug控制台中,如果要调试JavaScript代码,只需要先启动脚本控制面板,然后点击控制台按钮即可。
11、选择在下拉菜单中显示Javascipt和HTML错误(也可以选择显示更多错误),然后底部会出现一个箭头。在这里,您可以输入Javascipt代码,然后立即按enter键执行它。
12、非常方便,如下图所示:
13、Firebug在多次加载页面后,会记住加载页面前的位置。
14、无论你重复加载页面多少次,Firebug每次加载前都会一直记住页面的位置(比如你已经在浏览页面底部然后再加载页面,加载后新页面还是会带你到页面底部)。
15、使用$标记来帮助访问变量。
16、上面第四点,我们提到了Javascript可以在这个命令行下调试,还有一个技巧就是可以用$1访问你访问过的最后一个变量,以此类推。
17、您可以使用$2来访问您已经访问过的倒数第二个变量,如下图所示:
18、Firebug会高亮显示修改后的内容。
19、在Firebug中,只要修改页面中的内容,修改后的内容就会以黄色高亮度显示,如下图所示:
20、监控Javascript的性能。
21、在Firebug中,可以点击控制台中的“profile”选项,就会打开Firebug的性能监控功能,然后就可以在页面上进行一系列的操作。当您再次单击profile按钮时,您将停止监视性能。
22、然后Firebug会显示一个列表,里面会清楚的列出操作过程中涉及到的函数,调用次数,占用时间,平均时间,最小时间,最大时间等。如下图所示:
23、Firebug强大的网络数据监控功能
24、Firebug还提供了非常强大的网络数据监控功能。开发人员在开发web应用时经常会观察到各种HTTP请求和响应,Firebug在这方面非常强大。首先,打开控制面板中的网络功能。
25、然后每次运行页面,都可以清楚的看到每个HTTP请求和HTTP响应的具体细节,如下图所示:
26、使用Firebug的日志功能。
27、在设计页面的时候,经常需要记录页面的一些信息。这时可以利用firebug中的log功能,将一些信息输出到Firebug的控制台,方便调试。Firebug提供了一个控制台对象,
28、加载插件时,它在Javascript运行环境中注册,可以直接在程序中使用。控制台对象提供了一个日志方法。在Firefox中执行以下代码,您将在Firebug的控制台中看到以下信息。
29、如下图所示:
30、你可以在Firebug中调试程序。
31、在Firebug控制台的的Javascript控制面板中,可以对页面中的Javascript进行调试,方法很简单,只需要在要调试的行的左边单击,就会出现断点了,之后请记住下面常件的快捷键:
32、(1) F10 进入下一行;
33、(2) F8继续调试;
34、(3) F11进入Javascript中的函数体调试;
35、(4) Shift+F11跳出函数体。
36、,如下图所示:
37、在Firebug中可以设置带条件的断点
38、在Firebug中,还可以设置带条件判断的断点,如下图所示:
本文到此结束,希望对大家有所帮助。