firebug的使用方法和技巧(web开发调试工具)

时间:2021-12-21 18:34:08

Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试功 能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能还很强大,比如html,css,dom的查看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。

  1. firebug的安装首先打开火狐浏览器,如果你没的浏览器没有菜单栏的话你可以按F10或者Ctrl+shift+A来调出火狐的组件拓展.

    firebug的使用方法和技巧(web开发调试工具)
    firebug的使用方法和技巧(web开发调试工具)
    firebug的使用方法和技巧(web开发调试工具)
    firebug的使用方法和技巧(web开发调试工具)
  2. 然后在右上角输入firebug然后回车,在对应的检索结果中选择firebug,然后点击安装,如果安装完之后按F12没有出现对应的调试窗口的建议重启火狐浏览器即可.

    下面分别对火狐的7的模块简单的说明一下它的功能,因本人是程序员所以一些高级应用没有去探索,只是把自己的常用的功能说明一下

    firebug的使用方法和技巧(web开发调试工具)
  3. 按F12调出调试窗口,然后移动鼠标选中想要编辑的对应在上面可以看到对应的效果

    firebug的使用方法和技巧(web开发调试工具)
    firebug的使用方法和技巧(web开发调试工具)
  4. 如果你想用调试jquery语法也是可以点击控制台就可以开始你的jquery之旅了.而且还有提示功能很爽,这里还有点Linux的历史命令的味道

    firebug的使用方法和技巧(web开发调试工具)
    firebug的使用方法和技巧(web开发调试工具)
  5. 在别的编程语言里面例如PHP查看数组的话可以用var_dump,print_r查看数组有那些对应元素,但是js就麻烦了,我是真不知道用那个方法查看

    所以自己写了一个例子,我一般用dir和console.log()来查看,不知道别人是怎么查看的?更有趣的是console的api还可以查看脚本的运行时间真的牛了.

    firebug的使用方法和技巧(web开发调试工具)
  6. 再下面用到的就是AJAX请求动态数据了,自己做了一个简单的联动效果.来说明怎么查看返回来的数据.

    firebug的使用方法和技巧(web开发调试工具)
  7. 也许Firebug最吸引我的就会JS的调试了,真的很方便,只要简单的设置一下断点,按一下步入就可以调试JS脚本了.

    firebug的使用方法和技巧(web开发调试工具)
  8. 8

    最后如果自己想深入研究的话可以到这里查看相应的使用方法.祝你好运!

    https://getfirebug.com/wiki/index.php/Console_api

    这里有更精彩的用法等着你去探索.