工欲善其事必先利其器——web调试工具firebug

1、Firebug工具简介

firebug是firefox下的一款开发类插件。firebug集html查看和编辑，JavaScript控制台，网络情况监视器于一体，是开发JavaScript，css，html和ajax的得力助手。

YSlow是插件。

2、Firebug应用

一、禁用标签

下拉菜单启用禁用标签。

二、查看页面元素快捷键

ctrl+shift+c快捷键

三、html编辑

双击元素或者右键“编辑HTML”进入编辑页面，在编辑页面再点"编辑"便可退出。

四、css字体大小

方向键 调1个单位

ctrl+方向键 调0.1个单位

shift+方向键调10个单位

五、评估页面下载速度

网络标签页：能够看到请求的时间，大小，地点，和状态。

200表明从服务器完整加载。304表明未按预期修改文档，因此从本地缓存加载。

点击每一个请求能够查看详情详情：包括请求头，返回结果，cookie等。

六、Ajax监听

网络面板下的XHR就是用来监听ajax请求的。

输入firebug，参数中wd就表明输入的参数即firebug。

七、javascript控制台

7.一、点运行执行js代码

右边面板中输入js代码，点运行便可执行。

7.2控制台命令

控制台预置了不少命令。最经常使用的console.log()简单的记录日志；此外还有

console.info()在消息前面显示信息图标。

console.debug()记录调试信息。

console.warn()在消息前面显示警告图标。

console.error()在消息前面显示错误图标,而且附上行号的超连接。

这些命令会用不一样的颜色和符号标识出来以下。

7.3tab键补全提醒

好比输入con，按下tab键浏览器会给出提醒方便补全代码。

7.四、4种占位符

以下输出某年某月某日，%d表明整数。

有点相似c语言的格式化，控制台有4种占位符。

• %d 整数
• %f 浮点数
• %s 字符串
• %o 对象

应用：可使用占位符格式化日志输出：

好比要输出2016年04月22日，能够在月份前加上%s字符串占位符，这样传入参数也须要加引号以下。

7.5日志多时归类分组

使用console.group()和console.groupEnd()来分组。

7.六、console.dir()显示一个对象的全部属性和方法

console.dir(console);

dir显示一个对象全部的属性和方法,很是方便。

7.七、时间跟踪

经过console.time()和console.timeEnd()记录代码运行时间，优化代码和算法。

可是我屡次执行的实际耗时并不同。

7.八、js代码调试

脚本中显示全部的代码，包括index.html和jquery代码。

设置断点，刷新页面，当执行到断点处的js代码时，页面再也不执行，等待操做。

经过监控面板能够看变量值。

经过堆栈面板(Call true)点击其中函数查看调用者。

经过断点米娜包查看全部的断点列表。

能够经过4个图标来操做，从左到右分别是：继续(F8)，单步进入(F11)，单步跳过(F10)，单步退出(shift+F11)。

 删除断点：

在断点处单击或者在断点面板中取消勾选，或直接点右边的红色x删除断点。

经过console.trace()能够在控制台看出函数是怎样被调用的。

<script type="text/javascript">
    $(document) .ready(function(){
        var el=$("h1 span").first();
        var i=9;

        var interval=setInterval(function(){

            console.trace();
            el.html(i);
            i--;
            if(i<0){
                clearInterval(interval);
            }
        },1000);
    });
</script>

经过概况能够进行简单的性能分析。

刷新页面，点击概况，概况就在收集过程当中，

页面执行完再次点击概况标签标签栏，就能够看到概况详情。

能够看到interval()函数被调用了9次，占用时间等性能相关参数。

3、Firebug进阶提示

• 点击全部能够点击的地方
• 点击鼠标右键
• 下拉菜单
• 主菜单

firebug插件的扩展，好比YSlow等，一个插件的扩展也表明了它的好坏。

开发人员工具配合firebug一块儿使用，有一些其余功能，好比响应式模式：

 

参考慕课网课程：http://www.imooc.com/learn/137

 

本文做者starof,因知识自己在变化，做者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5416895.html有问题欢迎与我讨论，共同进步。