Firebug功能异常强大,不仅可以调试DOM,CSS,还可以调试JS代码,下面介绍一下调试JS。

1、认识console对象

  console对象是Firebug内置的对象,该对象可以在代码中写入,可以在控制面板中写入。

1)有五个方法来显示信息。依次为:

  1、console.log(),可以用来取代alert()或document.write()

  2、console.info(),一般信息

  3、console.debug(),除错信息

  4、console.warn(),警告提示

  5、console.error(),错误提示

2)经常用的几个方法:

  1、console.group()和console.groupEnd(),用于分组显示信息,如:

     console.group("第一组信息");

  console.log("第一组第一条");

   console.log("第一组第二条");

  console.groupEnd();

  console.group("第二组信息");

   console.log("第二组第一条");

   console.log("第二组第二条");

   console.groupEnd();

  2、console.dir()可以显示一个对象所有的属性和方法。

3、console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。比如,先获取一个表格节点,

    var table = document.getElementById("table1");

    然后,显示该节点包含的代码。

         console.dirxml(table);

   4、console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。

  5、console.trace()用来追踪函数的调用轨迹。 如果想知道这个函数是如何被调用的,只需在该函数体中加入console.trace()方法就可以了。

   6、console.time()和console.timeEnd(),用来显示代码的运行时间。如:

      console.time("计时器一");

    for(var i=0;i<1000;i++){

    for(var j=0;j<1000;j++){}

    }

    console.timeEnd("计时器一");

  7、console.profile()和console.profileEnd(),分析程序各个部分的运行时间,找出瓶颈所在。

2、认识控制面板

  如图所示为firebug的控制面板,左边为信息显示区域,右边为js代码调试区域,代码编辑完之后,可以点击运行,即可在坐左边显示出来。

3、js代码断点调试

  先来认识控制面板,左边为代码区域,右边为监测区域,可以在行号前面单击添加断点,再单击取消断点,F8为继续调试,F10为单步跳过,F11为单步进入,shift+F11为单步跳出。

Firebug调试js代码的更多相关文章

  1. Google Chrome调试js代码,开发者工具之调试工具常用功能

    参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂 ...

  2. 【JS学习】-利用谷歌浏览器调试JS代码(转)

    谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作. 首先,打开谷歌浏览器,按快捷键F12或者ctrl+shift+j,就可以打开谷歌浏览器的开发 ...

  3. 如何用浏览器调试js代码

    按F12打开调试工具

  4. 使用浏览器,调试js代码

    1:创建html网页和js文件 <!doctype html> <html> <head> <meta charset="utf-8"&g ...

  5. Firebug控制台详解,让调试js代码变得更简单

    http://www.open-open.com/lib/view/open1373120100347.html Firebug是网页开发的利器,能够极大地提升工作效率. Firebug控制台详解 控 ...

  6. Javascript系列: Google Chrome调试js代码(zz)

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  7. firebug调试js时提示调试器未激活处理办法

    firebug是web开发中最常用的分析调试软件,不过我今天使用在调试百度在线编辑器UEditor时一直提示调试器未激活. 从使用经验来看不应该啊,我都下了断点了为什么会提示调试器未激活呢!多次载入网 ...

  8. Google Chrome调试js代码

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  9. 利用Google浏览器调试js代码

    1.js有两种引入方式,外链和内嵌: 内嵌在浏览中直接调试,外链要在断点处写debugger; 示例代码: <!DOCTYPE html> <html lang="en&q ...

随机推荐

  1. JavaScript求两个数字之间所有数字的和

    这是在fcc上的中级算法中的第一题,拉出来的原因并不是因为有什么好说的,而是我刚看时以为是求两个数字的和, 很显然错了.我感觉自己的文字理解能力被严重鄙视了- -.故拉出来折腾折腾. 要求: 给你一个 ...

  2. 【干货分享】流程DEMO-制度发文和干部任免

    流程名: 制度发文和干部任免  业务描述: 当员工在该出勤的工作日出勤但漏打卡时,于一周内填写补打卡申请.  流程相关文件: 流程包.xml  流程说明: 直接导入流程包文件,即可使用本流程  表单: ...

  3. Python学习实践------正向最大匹配中文分词

    正向最大匹配分词: 1.加载词典文件到集合中,取词典文件中最大长度词的length 2.每次先在句子中按最大长度分割,然后判断分割的词是否存在字典中,存在则记录此词,调整起始点. 3.不存在则按最大长 ...

  4. [学习笔记]JavaScript之函数式编程

    欢迎指导与讨论:) 前言 函数式编程能使我们的代码结构变得简洁,让代码更接近于自然语言,易于理解. 一.减少不必要的函数嵌套代码 (1)当存在函数嵌套时,若内层函数的参数与外层函数的参数一致时,可以这 ...

  5. 一步步开发自己的博客 .NET版(5、Lucenne.Net 和 必应站内搜索)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  6. AutoMapper(七)

    返回总目录 Null值替换 如果源类型的成员链上的属性值为Null,Null值替换允许提供一个可替换的值.下面有两个类Person和PersonInfo类,都有一个属性Title(头衔),从Perso ...

  7. Android的编码规范

    一.Android编码规范 1.学会使用string.xml文件 在我看来,当一个文本信息出现的次数大于一次的时候就必须要使用string.xml 比如一个保存按钮 , 不规范写法: <Butt ...

  8. 解析大型.NET ERP系统核心组件 查询设计器 报表设计器 窗体设计器 工作流设计器 任务计划设计器

    企业管理软件包含一些公共的组件,这些基础的组件在每个新项目立项阶段就必须考虑.核心的稳定不变功能,方便系统开发与维护,也为系统二次开发提供了诸多便利.比如通用权限管理系统,通用附件管理,通用查询等组件 ...

  9. .NET 程序集单元测试工具 SmokeTest 应用指南

    Smoke Test(冒烟测试),也称Regression Test(回归测试),是对软件的安装和基本功能的测试.一般地我们使用脚本来实现Smoke Test的自动化,可借用虚拟机的snapshot机 ...

  10. [3D数学基础:图形与游戏开发]专栏前言

    期待的书终于到了,接下来我会把自己的学习笔记以及心得整理出来,形成专栏,每一章都进行记录和学习总结,今天是2016年12月30日,再过一天就是元旦了,就要迎来美好的2017年了!!!加油~ 上面的书就 ...