web调试工具-firebug

Firebug是网页浏览器firefox下面的一款开发类插件。它集HTML查看和编辑,js控制台,网络状况监视器于一体,是开发js,css,HTML:和Ajax的得力助手

(自己整理的,有错误的话见谅哦( ^_^ ))

打开与关闭

下载地址:http://www.getfirebug.com/  之后重启浏览器→点击小甲虫即可(或者F12)

关闭→再次点击小甲虫即可

Firebug窗口概览

控制台:js命令行操作,显示js的错误信息,提示信息,日志信息

HTML:显示所有的html源码

CSS:编辑页面的css源码

脚本:显示页面脚本和调试

DOM:显示页面对象和DOM属性

网络:显示页面下载和花费时间

Cookies:显示页面请求Cookies,及查看和修改

标签的启用禁用:→小三角下拉菜单(或者小甲虫里面设置)

右上角可以进行搜索

Firebug编辑HTML

  1. 可以在页面上定位:右键审查元素→小甲虫右边(快捷键:ctrl+shift+c)
  2. 小甲虫右键可以修改快捷键
  3. 编辑1:选中编辑的html→右键编辑html;上方有定位到具体的标签
  4. 编辑2:直接在源码上进行更改

Firebug编辑CSS

  1. 与上述基本上同时进行,在html的右侧会有显示
  2. 双击相应的css即可完成编辑,删除同样
  3. 对于padding margin的值输入,可以之间点击’ 方向键的上下键’可以微调大小
  4. 小技巧:小范围调整大小→ctrl+方向键:每次增大/减小=0.1个单位(shift键是10个单位)
  5. 直接点击超链接进入css的标签页,进行修改

评估页面的下载速度

  1. 网络标签页:可以看到:时间  大小  状态  等等
  2. 可以单独查看下载时间,时间线评估
  3. 缓存,cookies信息

Ajax监听

网络→XHR:Ajax请求进行监听

  1. 监听到所有服务端响应的请求
  2. 例如:百度的搜索提示
  3. Wd:每一个wd输入的参数
  4. 具体的可以实践一下

JavaScript控制台

例子:倒计时


控制台有什么变化呢?

加入:

控制台可直接输出i的值。

或者:

Console.log(i);

Console.info(i);

Console.debug(i);

Console.error(i);

小提示:

  1. 可以在右侧多行或下面单行输入相关的控制台命令alert(123);运行
  2. Tab键可以自动补全
  3. Console.log(‘%d年%d月%d日’,2014,5,25);

(占位符4种:%d整数、%f浮点数,%s字符串,%o对象)

日志分组:整齐美观


注意:console.dir(console):显示一个对象(这里为console)所有的属性和方法

属性:time(计算代码运行时间,从而优化算法)

 

JavaScript代码调试

脚本里面双击设置断点,页面上有四种设置

监控选择中有相应的变量,改变变量页面会发生变化

想知道函数是怎么被调用的:

加入:

 

控制台上的all或概况:就可以看到被调用的情况

进阶提示

  1. 点击所有可以点击的地方
  2. 不要忘记可以点击的地方的鼠标的右键,会有更多的惊喜
  3. 不要忘记所以的下拉菜单(例如css样式中)
  4. 小甲虫的菜单(firebug的扩展页面)

开发人员工具

Firebug没有的:

Firefox浏览器→工具→开发者→开发者工具栏:可以查看响应式模式设计,截图,模拟触摸事件

Google:控制台上可以看到更多的资源信息,时间线的信息

综合自己所需,得到自己想实现的测试的效果!

时间: 2024-10-05 05:41:37

web调试工具-firebug的相关文章

Mobile Web调试工具Weinre (reproduce)

Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而Weinre就是解决这难题的利器. Weinre的本意是Web Inspector Remote,它是一种远程调试工具.功能与Firebug.Webkit inspector类似,可以帮助我们即时更改页面元素.样式,调试JS等,下面就简单介绍下如何使用.下面以以Windows系统为例: 一.首先确保

Web调试工具——Fiddler介绍

Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助. 阅读目录 Fiddler的基本介绍 Fiddler的工作原理 同类的其它工具 Fiddler如何捕获Firefox的会话 Firefox 中使用Fiddler插件 Fiddler如何捕获HTTPS会话 Fiddler的基本界面 Fiddler的统计视图 QuickEx

(转)Fildder教程(Web调试工具)

转载地址:写得很不错的fildder教程   http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.com Fiddler官方网站提供了大量的帮助文档和视频教程, 这是学习Fiddler的最好资料. Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统,并

Fiddler是最强大最好用的Web调试工具之一--网站抓包分析

Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助. 阅读目录 Fiddler的基本介绍 Fiddler的工作原理 同类的其它工具 Fiddler如何捕获Firefox的会话 Firefox 中使用Fiddler插件 Fiddler如何捕获HTTPS会话 Fiddler的基本界面 Fiddler的统计视图 QuickEx

web调试工具

Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助. Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari).除此之外,其他功能还很强大,比如html,c

Web开发调试工具——FireBug

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

whistle--全新的跨平台web调试工具

版权声明:本文由吴文斌原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/151 来源:腾云阁 https://www.qcloud.com/community whistle是基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler+Willow,基于Java实现的Charles,及公司同事基于Node实现的Livepool等等:whistle与所有的web调试代理工具一样,主要功能也是

[转] whistle--全新的跨平台web调试工具

whistle是基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler+Willow,基于Java实现的Charles,及公司同事基于Node实现的Livepool等等:whistle与所有的web调试代理工具一样,主要功能也是用于查看.修改HTTP.HTTPS.Websockt的请求响应或者作为HTTP代理服务器,但不同于Fildder+Willow.Charles和Livepool通过断点的方式修改请求响应,whistle采用的是类似配置Hosts方式,

web 调试工具docker的安装使用

1.   weinre 工具 docker run -d -p 8080:8080 beevelop/weinre 2. vorlonjs(不支持https)  docker run --name vorlonjs -p 80:1337 vorlonjs/dashboard:0.3.0 3.   vorlonjs(支持https)  docker run --name vorlonjs -p 80:1337 andrewconnell/vorlonjs