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
- 可以在页面上定位:右键审查元素→小甲虫右边(快捷键:ctrl+shift+c)
- 小甲虫右键可以修改快捷键
- 编辑1:选中编辑的html→右键编辑html;上方有定位到具体的标签
- 编辑2:直接在源码上进行更改
Firebug编辑CSS
- 与上述基本上同时进行,在html的右侧会有显示
- 双击相应的css即可完成编辑,删除同样
- 对于padding margin的值输入,可以之间点击’ 方向键的上下键’可以微调大小
- 小技巧:小范围调整大小→ctrl+方向键:每次增大/减小=0.1个单位(shift键是10个单位)
- 直接点击超链接进入css的标签页,进行修改
评估页面的下载速度
- 网络标签页:可以看到:时间 大小 状态 等等
- 可以单独查看下载时间,时间线评估
- 缓存,cookies信息
Ajax监听
网络→XHR:Ajax请求进行监听
- 监听到所有服务端响应的请求
- 例如:百度的搜索提示
- Wd:每一个wd输入的参数
- 具体的可以实践一下
JavaScript控制台
例子:倒计时
控制台有什么变化呢?
加入:
控制台可直接输出i的值。
或者:
Console.log(i);
Console.info(i);
Console.debug(i);
Console.error(i);
小提示:
- 可以在右侧多行或下面单行输入相关的控制台命令alert(123);运行
- Tab键可以自动补全
- Console.log(‘%d年%d月%d日’,2014,5,25);
(占位符4种:%d整数、%f浮点数,%s字符串,%o对象)
日志分组:整齐美观
注意:console.dir(console):显示一个对象(这里为console)所有的属性和方法
属性:time(计算代码运行时间,从而优化算法)
JavaScript代码调试
脚本里面双击设置断点,页面上有四种设置
监控选择中有相应的变量,改变变量页面会发生变化
想知道函数是怎么被调用的:
加入:
控制台上的all或概况:就可以看到被调用的情况
进阶提示
- 点击所有可以点击的地方
- 不要忘记可以点击的地方的鼠标的右键,会有更多的惊喜
- 不要忘记所以的下拉菜单(例如css样式中)
- 小甲虫的菜单(firebug的扩展页面)
开发人员工具
Firebug没有的:
Firefox浏览器→工具→开发者→开发者工具栏:可以查看响应式模式设计,截图,模拟触摸事件
Google:控制台上可以看到更多的资源信息,时间线的信息
综合自己所需,得到自己想实现的测试的效果!
web调试工具-firebug的更多相关文章
- 工欲善其事必先利其器——web调试工具firebug
一.Firebug工具简介 firebug是firefox下的一款开发类插件.firebug集html查看和编辑,JavaScript控制台,网络状况监视器于一体,是开发JavaScript,css, ...
- Mobile Web调试工具Weinre (reproduce)
Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而 ...
- Web调试工具——Fiddler介绍
Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...
- web调试工具
Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...
- IE浏览器下web调试工具之--IE WebDeveloper介绍
做Web项目的架构设计.开发.测试,免不了要熟悉Web页面调试工具,以此来获知哪些浏览器支持Web页面的显示,哪些浏览器下显示有问题. 目前市面上比较火爆的浏览器内核提供商,有微软的IE.mozill ...
- Fiddler是最强大最好用的Web调试工具
Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...
- (转)Fiddler教程(Web调试工具)
转载地址:写得很不错的fildder教程 http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站: www.fiddler2.c ...
- Fiddler是最强大最好用的Web调试工具之一--网站抓包分析
Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...
- IE WebDeveloper--IE浏览器web调试工具
目前市面上比较火爆的浏览器内核提供商,有微软的IE.mozilla的firefox.谷歌的chrome.苹果的safari.IE浏览器下的项目过去占比非常大,近年随着其他浏览器厂商发展势头迅猛,过去的 ...
随机推荐
- webkit webApp 开发技术要点总结【转】
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 ...
- 让ORACLE LIKE 时不区分大小写
select * from t_resource_base where xdkm_id = '08975DBC-953B-42DC-AA01-65F168891CEE' and regexp_like ...
- TYVJ P1020 寻找质因数
做题记录:2016-08-08 描述 给出N个数字,试求质因数最大的数字. 输入格式 第一行,一个整数N,表示数字个数.接下来N行,每行一个整数A_i,表示给出的数字. 输出格式 一个整数,表示质因数 ...
- POJ 1177 Picture(求周长并)
题目链接 看的HH的题解..周长有两部分组成,横着和竖着的,横着通过,sum[1] - last来计算,竖着的通过标记,记录有多少段. #include <cstdio> #include ...
- linux rootfs制作
http://blog.sina.com.cn/s/blog_6795385f01011ifg.html 作一个嵌入式Linux rootfs,并且实现 web 服务 1. 文件系统简介 •理论上说一 ...
- How to override create,write,unlink method in Odoo v8
As we all know, Odoo 8 has new api which is different with v7. So how to override the create,write,u ...
- Java 的class文件关系
一个java源文件javac出多个class文件出来!是怎么回事? 1. 你在一个文件里定义了几个类的时候,会出现这种情况,比如public class A {}class B {}class C { ...
- 关于isset使用产生Can't use function return value in write context错误
在使用isset检测session的一个取值是否存在时,产生了这个问题 翻译一下:不能在填写的内容中使用函数的返回值.然后我查看了php手册看isset函数的使用:isset()只能用于变量,因为传递 ...
- Phaser.Game这个函数都有哪些参数
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- Reset RequiredFieldValidator 重置 验证控件
<td style="width:100px;">姓名<span class="must_star">*</span>< ...