博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WEB调试工具--FireBug的使用技巧
阅读量:6802 次
发布时间:2019-06-26

本文共 2096 字,大约阅读时间需要 6 分钟。

hot3.png

FireBug是页面浏览器fireFox下的一款开发类插件,它集HTML查看和编辑,javascript的控制台,网络状况监视器于一体,是开发javaScript,html,css和ajax的得力助手。

 

Firebug是开发类插件.集编辑查看/控制台.网络状况监视一体,开发前端的得力工具.

(1)在线代码测试工具:http://www.

(2)在线调色板:http://www.

(3)CSS3圆角生成器:http://www.

 

Firebug插件下载网址:https://www.

在firefox浏览器中用F12打开,Command+F12新窗口打开

 

 

FireBug窗口功能:

控制台:JavaScript命令行操作、显示JS错误信息、提示信息、日志信息,右侧可写自己的JS命令。

HTML:显示页面的HTML源码。

CSS:编辑页面的CSS源码。

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

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

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

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

标签可以通过点击其下拉菜单控制设置为‘启用’或者‘停用’。

小甲虫可以设置显示或者不显示某些标签。

标签栏左侧的搜索框可以进行相应的搜索。

 

 

打开Firebug的四种方法:

1、在右上方点击小甲虫。

2、点击鼠标右键,选择使用Firebug查看元素。

3、使用快捷键F12。

4、使用快捷键Command+Ctrl+C。

 

 

可用方向键进行微调字体,

- 按住↑或↓,每次以1个单位调整。

- 按住Ctrl+↑或Ctrl+↓,每次以0.1个单位调整。

- 按照Shift+↑或Shift+↓,每次以10个单位调整。

 

评估页面下载速度:

1、分类别的查看下载文件和http请求

2、可以查看http请示的详细信息,是否成功、是否缓存、请求参数、响应的结果等

3、缓存状态304

4、在调节宽度和高度这些数字值是可以使用键盘上下键来增加或者是减少,同时也可以通过shift+上下键 表示每按一下增加减少10 ctrl+上下键 表示每按一下增加减少0.1

 

 

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

1、AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
2、Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
3、XHR的作用就是对Ajax请求进行监听。
4、XHR:XML HTTP REQUEST 输入字符就会有请求参数,包含关键字参数,返回结果是下列的html代码
当页面向服务器发送get或post请求是,它会监听这些请求,并在firebug下罗列起来。其中参数就是我们请求的字符或者名字(键值对)。响应是从服务器中回复的信息。

 

JS代码的调试:<br>

脚本:可查看JS代码,对其设置断点(点击左侧行号即可)<br>

方法:单步进入、单步退出、单步跳过、继续<br>

执行到断点处,切换到监控栏,可改变断点中相应的变量<br>

函数如何被调用:在代码处写入 console.trace();<br>//console.trace

概况栏:可进行简单的性能分析

 

console.log("%d年%d月%日",2015,3,30);

console.group("第一组");

console.log("101");

console.group("第二组");

console.log("101");

 

console.time("test");

运行

console.timeEnd("test");

会输出运行时间

 

1、查看JS代码,设置断点(点击左侧行号即可)

2、调试js功能代码

F8:继续

F10:单步跳过

F11:单步进入

Shift+F11:单步退出

3、console.trace()可以知道函数如何被调用

点击概况

等待页面执行完毕

再次点击概况,就会……

显示函数被调用时的一些参数信息

 

 

进阶提示

1)不要放过所有可以点击的地方

2)不断地点击右键,收获惊喜

3)通过点击下拉菜单,发现有趣的功能

4)小甲虫所在的主菜单,扩展就在里面

FireBug调试工具是火狐浏览器的组件,在火狐浏览器中添加FireBug即可在火狐浏览器打开的网页中调试代码。当然,其他浏览器也有FireBug,但比火狐的稍微差一点。

转载于:https://my.oschina.net/Nealyang/blog/709964

你可能感兴趣的文章
RabbitMQ学习系列(二): RabbitMQ安装与配置
查看>>
php将对象数组转成普通数组
查看>>
unity htc vive使用
查看>>
★商场上的十则寓言故事!
查看>>
如何将北京时间批量转为Unix时间?用Excel!
查看>>
代码备份:处理 SUN397 的代码,将其分为 80% 训练数据 以及 20% 的测试数据...
查看>>
如何利用phpize在生产环境中为php添加新的扩展php-bcmath
查看>>
学习show_space存储过程
查看>>
五险一金
查看>>
一个小时学会Oracle数据库
查看>>
换芯后的 Edge 浏览器 UI 首曝光,还是熟悉的味道?
查看>>
JavaScript深入之类数组对象与arguments
查看>>
Kafka解析之失效副本
查看>>
[20150228]启动问题.txt
查看>>
一致性哈希算法
查看>>
揭秘ASM磁盘头信息
查看>>
R1-007 Shell变量简介2
查看>>
SQL优化常用方法23
查看>>
cms无法登陆
查看>>
JavaScript中事件处理
查看>>