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

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

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

  2. 然后在右上角输入firebug然后回车,在对应的检索结果中选择firebug,然后点击安装,如果安装完之后按F12没有出现对应的调试窗口的建议重启火狐浏览器即可.

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

  3. 按F12调出调试窗口,然后移动鼠标选中想要编辑的对应在上面可以看到对应的效果

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

  5. 在别的编程语言里面例如PHP查看数组的话可以用var_dump,print_r查看数组有那些对应元素,但是js就麻烦了,我是真不知道用那个方法查看

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

  6. 再下面用到的就是AJAX请求动态数据了,自己做了一个简单的联动效果.来说明怎么查看返回来的数据.

  7. 也许Firebug最吸引我的就会JS的调试了,真的很方便,只要简单的设置一下断点,按一下步入就可以调试JS脚本了.

  8. 8

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

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

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

时间: 2024-08-05 14:58:54

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

Web开发调试工具——FireBug

在跟着牛老师做新闻发布系统的时候,牛老师在讲CSS之前建议我们安装Firefox+FireBug的组合,便于对我们自己编写的网页进行调试.当时我的电脑里没有Firefox浏览器,因此我就想,难道只有Firefox浏览器有调试插件FireBug吗?我认为不是的.因此我就尝试给Sogou浏览器安装调试工具,那么Sogou的调试工具是什么呢?我们先来看看FireBug是什么吧. 在百度搜索框里输入"FireBug",百度一下,我们看到FireBug是很强大的一款Web开发工具.其在百度百科的

fiddler web开发调试工具的使用

fiddler使用场景: (1)开发环境host配置: 通常情况下,配置host需要改变系统文件很不方便,在多个开发环境下切换很低效 fiddler提供了相对高效的host配置方法 (2)前后端接口调试: 通常情况下,调试前后端的接口需要真实的环境,一大推假数据,写javascript代码 fiddler只需要一个ui界面进行配置即可 (3)线上bugfix fiddler可以将发布文件代理到本地,快速定位线上bug (4)性能分析和优化 fiddler会提供请求的实际图,清晰明了,网站需要优化

Web 开发人员系统重装备忘录

准备工作: 一.配置IIS 软件安装: 一.大块头: 1.VS2005 1.VS2005SP1 2.VSS 2005 2.VS2008 1.VS2008TeamExplorer 2.VS2008SP1CHSX1512981 3.VS90SP1-KB974558-x86 4.Asp.net Mvc 2 R2 3.SqlServer R2 4.VS2010 1.VS2010 SP1 2.Asp.net Mvc 3 3.Asp.net Mvc 4 5.安装TFS2010 (一般是安装在服务器上) 二.

移动端web开发技巧(转)

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,

【前端开发】25种提高网页加载速度的方法和技巧

尊重原创:http://blog.csdn.net/wxzking/article/details/4089384 您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%.下面介绍二十五中网速方法和技巧. 一.使用良好的结构 可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显.XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <end> 标记),这意味着浏览器

提高 ASP.NET Web 应用性能的 24 种方法和技巧(转载)

在这篇文章中,将介绍一些提高 ASP.NET Web 应用性能的方法和技巧.众所周知,解决性能问题是一项繁琐的工作,当出现性能问题,每个人都会归咎于编写代码的开发人员. 以下为译文 那性能问题到底该如何解决?以下是应用系统发布前,作为 .NET 开发人员需要检查的点. 1.debug=「false」 当创建 ASP.Net Web应用程序,默认设置为「true」.开发过程中,设置为「true」是非常有用多,但在应用程序发布部署时,需将其设置为「false」. <compilation defau

移动端的web开发技巧(二)之常见问题

[简介] 移动端得web开发技巧(一)之meta标签的使用,详情请看,上一篇文章的介绍. 移动web开发中常见的问题如下: [1. 移动端如何定义字体font-family] 三大手机系统的字体: ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 android 系统 默认中文字体是Droidsansfallback 默认英文和数字字体是Droid Sans 无微软雅黑字体 winphone 系统 默认中文字

给大家分享web开发新手修改hosts文件实现本地域名访问的正确方法

1.如何正确修改hosts文件: 一般打开hosts文件里面都会有个示例,按照其格式修改即可 比如以下内容: # For example: # # 102.54.94.97 rhino.acme.com # source server # 38.25.63.10 x.acme.com # x client host 即代表打开rhino.acme.com这个网址将解析到102.54.94.97,ip地址与网址间至少有一空格,当然建议通过按Table键来编辑,即美观又不容易编写失误;这也就是通过解

Java Web开发Tomcat中三种部署项目的方法

一般情况下,开发模式下需要配置虚拟主机,自动监听,服务端口,列出目录文件,管理多个站点等功能 准备工作: 软件包:apache-tomcat-6.0.20.rar 将软件包解压至硬盘一分区,进入%TOMCAT_HOME%/conf目录 一:server.xml 配置 1.配置端口,修改server.xml. <Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000"