WEB调试工具－－FireBug的使用技巧

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

 

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

（1）在线代码测试工具：http://www.lvyestudy.com/tools/run_code.aspx；
（2）在线调色板：http://www.lvyestudy.com/tools/color_picker.aspx；

（3）CSS3圆角生成器：http://www.lvyestudy.com/tools/border_radius.aspx

 

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

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

 

 

FireBug窗口功能：

控制台：JavaScript命令行操做、显示JS错误信息、提示信息、日志信息，右侧可写本身的JS命令。

HTML：显示页面的HTML源码。

CSS：编辑页面的CSS源码。

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

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

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

Cookies：显示页面请求的Cookies，及查看和修改。

标签能够经过点击其下拉菜单控制设置为‘启用’或者‘停用’。

小甲虫能够设置显示或者不显示某些标签。

标签栏左侧的搜索框能够进行相应的搜索。

 

 

打开Firebug的四种方法：

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

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

三、使用快捷键F12。

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

 

 

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

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

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

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

 

评估页面下载速度：

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

二、能够查看http请示的详细信息，是否成功、是否缓存、请求参数、响应的结果等

三、缓存状态304

四、在调节宽度和高度这些数字值是可使用键盘上下键来增长或者是减小，同时也能够经过shift+上下键 表示每按一下增长减小10 ctrl+上下键 表示每按一下增长减小0.1

 

 

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。
一、AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于建立快速动态网页的技术。
经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。
二、Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。
三、XHR的做用就是对Ajax请求进行监听。
四、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");

会输出运行时间

 

一、查看JS代码，设置断点（点击左侧行号便可）

二、调试js功能代码

F8：继续

F10:单步跳过

F11：单步进入

Shift+F11：单步退出

三、console.trace()能够知道函数如何被调用

点击概况

等待页面执行完毕

再次点击概况，就会……

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

 

 

进阶提示

1)不要放过全部能够点击的地方

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

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

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

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