Firebug是网页浏览器 Mozilla Firefox下的一款开发类插件, 现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发 JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面, 给Web开发者带来很大的便利。例如 Yahoo! 的网页速度优化建议工具 YSlow。下面咱们就来学习FireBug工具的使用。如有错,望提出修改意见。
1.编辑HTML
a.鼠标选中某个html元素,修改相关属性,即可在页面中动态的显示出来
b.点击小甲虫右侧的箭头按钮,就可以在页面中点击某个元素,FireBug中的就会定位到这个元素的html代码中。
当然,可以使用快捷键。ctrl+shift+c如果需要查看或者修改快捷键的话,可以点击小甲虫图标,在弹出的菜单中选中“自定义快捷键”,在弹出的界面中查看和修改即可。
c,当需要编辑html代码的时候,我们有两种方式,一种是双击html代码,即可对html代码进行修改,还有一种是右键,点击“编辑”页面,进入编辑页面,这个时候,我们实时的编辑,变化都会反映在页面上。
2.处理css
在html代码的右侧,是css属性页面
a.点击html代码,即可看到他的css属性,我们可以在样式中移动鼠标可以看到css样式中字体的大小,图片和颜色等。
双击css即可进行修改,如果需要添加样式,则只需要在空白的地方就可以新建样式,当然,我们也可以禁用样式,当我们用鼠标移动到样式上的时,点击出现的禁用按钮即可禁用样式。
如果要删除某些样式,则只要双击样式,样式变成可输入状态时,按住键盘delete键即可。
b.当我们需要修改一些属性是数值的类型的样式的时候,我们可以按住键盘的上下键,即可实现微调样式,省去我们每次输入的时间。如果需要调整0.1个单位的话,那我们只需要按住ctrl键,再用键盘上下键,即可实现数值样式的精度更细的微调。如果需要大幅调整的话,则只需要按住shift键,再用键盘上下键,就可以每次以10个单位调整。如果需要调整很多css代码,则只需要点击右侧的css,即可直接编辑css代码。
c.最右侧的计算出样式,可以看到计算出来的css样式。布局:我们可以看到盒子模型的布局。DOM:我们可以查看整个页面的DOM节点2事件:我们可以查看当前页面中的事件。
3.评估页面下载的速度
点击firebug面板中的网络,在载入页面的时候,即可看到整个页面的网络情况。
在这个页面中,我们可以看到每个元素所下载的时间,请求方式,状态、html、css、js等等。
我们可以通过时间线来评估整个页面的下载时间,我们可以单击请求,即可查看这些请求的一些信息。请求头信息里,我们可以看到请求头信息,响应头信息、和响应结果。
4.ajax请求
当我们输入ajax请求的时候,XHR就可以监听每一次的ajax请求。
ajax中的参数就是我们传入或者post的一些名字和字符,头信息是我们请求的头信息。响应是从服务器中返回回来的我们所接受到的信息。这些信息,在开发中我们可以检查请求是否发出,结果是否返回,返回的结果是否如我们的期望。
5.javascript控制台
a.javascript控制台中可以读取我们在js代码中的命令。比如:
for(var i=0;i<10;i++)
{
console.log(i);//这样,每次i值的变化我们都可以监听到
}
我们也可以使用这些信息
    console.error(i); //错误信息
    console.debug(i); //debug信息
    console.info(i);//详细信息
我们也可以对日志信息进行分组:
console.group("first");
console.log("11111");
console.log("22222");
console.log("33333");
console.log("44444");
console.groupEnd();
console.group("second");
console.log("aaaa");
console.groupEnd();
当我们需要显示一个对象的所有属性和方法的时候,我们可以使用:
console.dir();
如:console.dir(console);
当我们需要测试某些代码的运行速度的时候我们可以使用console.time()函数来测试代码的运行速度:
6.js调试
当我们需要调试我们的代码的时候,我们可以通过面板中的“脚本”来调试我们的代码。
点击“脚本”,我们可以看到我们脚本的代码和当前的页面,我们可以对脚本代码设置断点,对代码进行调试
在调试的时候,我们可以点击断点,取消调试,
如果要查看函数的调用情况:我们可以在函数中使用console.trace();
当然,我们也可以使用“概括”来收集概括信息,
 
 

FireBug调试工具笔记的更多相关文章

  1. FireBug 调试工具(推荐)

    Firebug是网页浏览器 Mozilla Firefox 下的一款开发类扩展,如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利. 安装如下: 下面是 ...

  2. [转]web调试工具总结(firebug/fidder/httpwatch/wireshark)

    ONE:Firebug: Firebug是网页浏览器 Mozilla Firefox下的一款开发类插件, 现属于Firefox的五星级强力推荐插件之一.它集HTML查看和编辑.Javascript控制 ...

  3. 经常使用Firefox插件大全

    Web开发者经常使用的火狐插件 1)FireShot:是一个截图工具,来源于截图软件Screenshot Studio的开发商,是一个Firefox扩展或者说是Firefox版的Screenshot ...

  4. IE8兼容性调试及IE 8 css hack

    做网站开发,一提到IE,就会让人头大,有一肚子的牢骚要发:微软为什么不跟着国际标准走呢,总是独树一帜,搞出那么多问题来.IE的firebug调试工具也不太好用,尤其是低版本的IE,更是让人头疼. 最近 ...

  5. 自行解决12306页面显示异常的问题(长城宽带下WWW。12306无法正常使用)

    前二天突然发现家里所用的长城宽带的www.12306.cn无法正常显示,点击余票查询或者车票预订均打不开,加载时间非常长,现象好似CSS等资源文件未载入成功(如图所示)更换chrome.firefox ...

  6. 常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)

    来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可 ...

  7. IE下有没有类似于Firebug的调试工具

    你可以从以下网站下载firebuglite(Firebug推出的针对非火狐浏览器的调试工具) https://getfirebug.com/firebuglite   一般安装Stable chann ...

  8. 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)

    前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...

  9. Vue学习笔记-API调试工具--->国产apipost按装(比postman好按装好用)

    一  使用环境: windows 7 64位操作系统 二   Vue学习笔记-API调试工具--->apipost按装 1.下载: https://www.apipost.cn/ (比postm ...

随机推荐

  1. FT232RL变砖之后

    FT232RL是个是神奇的片子,说万能可能有些夸张,但是...总之就是FTDIChip这个神奇的公司基于类似的技术,做了很多好用的产品,包括转IIC啦,转SPI啦,密码狗啦之类的.是个很有用的工具就对 ...

  2. 数组、ArraryList和List三者的区别

    在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. ...

  3. linux系统安装配置

    以中文拼音输入法为例:1.sudo apt install ibus-pinyin2.sudo apt install ibus-libpinyin3.注销重新登录 或则 重启计算机4.进入输入设置, ...

  4. primefaces p:tableData 显示 List<List>

    @javax.faces.bean.ViewScoped public class Controlador { private List<List> estadistico; @PostC ...

  5. Linux下安装部署Java

    Java安装6小部(适合新手) 1.下载软件包 # wget http://download.oracle.com/otn-pub/java/jdk/7u79-b15/jdk-7u79-linux-x ...

  6. chrome断点调试

    chrome断点调试 在编写JavaScript代码时,如果出现了bug,就要不断的去找错误,如果console控制台中提示还好说,可是没有提示恐怕就要费一番周折了.但是有了chrome这个浏览器,我 ...

  7. angularjs $q、$http 处理多个异步请求

    angularjs $q.$http 处理多个异步请求 在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: $http.get(' ...

  8. Javascript 与正则表达式

    一.正则表达式(regular expression简称res) 二.元字符及其在正则表达式上下文中的行为 三.正则表达式的常用方法 四.与正则表达式有关的字符串对象的方法 五.常用的正则表达式的操作 ...

  9. Facebook Messenger的后台架构是什么样的?

    后台的架构是由前台的需求决定的.做 mobile app 的需求跟做 web app 是不一样的,比如 mobile app 对实时性的要求比较强(移动用户都没耐性),移动设备网络不稳定(要能做到断点 ...

  10. PHP 数据库抽象层pdo

    PDO是PHP数据对象(PHP Data Object)的缩写. pdo就是一个"数据库访问抽象层",作用是统一各种数据库的访问接口,能够轻松地在不同数据库之间进行切换,使得数据库 ...