利用Firebug我们可以非常方便地对网页上的任何JavaScript代码进行断点调试。

首先，使用快捷键F12在当前页面打开Firebug，并切换到脚本选项卡。

其次，我们需要为指定的js代码添加断点，由于当前页面的js代码可能不只是在一个文件中，Firebug会列出所有包含js代码的脚本文件，我们先在列表中选择需要添加断点的代码所在文件。

当我们找到指定的js代码所在位置时，我们可以看到Firebug左侧会显示行号，其中绿色的行号表示该行可以添加调试断点。

点击指定的绿色行号位置，即可为该行代码添加断点。

添加完断点后，我们就可以通过某些操作来触发执行断点位置的js代码，比如提交某个表单、移动到某个元素、点击某个按钮，甚至刷新当前页面(类似onload类型的事件就需要先加断点，再刷新该页面即可进入断点调试)。

当执行到断点处的js代码时，Firebug会自动进入断点调试。如下图所示，右侧监控面板用于显示相关的js变量信息。编号①②③的按钮图标分别表示单步进入(F11)、单步跳过(F10)、单独退出(Shift+F11)；通过这些按钮我们可以方便地进行断点调试。

备注：将鼠标移动到左侧窗口中指定的js变量名上，也会实时显示该变量的值。

作者：软件指南针(http://www.softown.cn)，转载请保留出处！

使用Firebug进行断点调试详解的更多相关文章

  1. Zend Studio集成Xdebug断点调试详解

    转自:http://www.softown.cn/post/115.html Xdebug是PHP开发中两个常用的断点调试工具之一(另一个为Zend Debugger). 现在,我们在Zend Stu ...

  2. VisualStudio 断点调试详解

    本文详细告诉大家 VisualStudio 断点调试的功能和使用方法,本文使用的是最新 VisualStudio2019 的功能,也许在你看到这篇博客的时候这个版本已经过时 本文将会按照从简单到复杂, ...

  3. 2019-11-29-VisualStudio-断点调试详解

    原文:2019-11-29-VisualStudio-断点调试详解 title author date CreateTime categories VisualStudio 断点调试详解 lindex ...

  4. Intellij IDEA中使用Debug调试详解

    转载:https://www.linuxidc.com/Linux/2017-09/146772.htm   Intellij IDEA中使用Debug调试详解 Debug用来追踪代码的运行流程,通常 ...

  5. Linux Bash命令关于程序调试详解

    转载:http://os.51cto.com/art/201006/207230.htm 参考:<Linux shell 脚本攻略>Page22-23 Linux bash程序在程序员的使 ...

  6. Go工具和调试详解

    https://blog.csdn.net/happyanger6/article/details/78724594/ https://blog.csdn.net/u012210379/article ...

  7. chrome浏览器，调试详解，调试js、调试php、调试ajax

    1.可以看到js报错 2.可以看到php报错 3.可以看到ajax返回的信息,以及报错情况 4.可以看到调用了那些内容以及顺序 5.可以调试js代码 6.可以查看session等等 功能非常之强大. ...

  8. Chrome开发者工具调试详解

    chrome开发者工具最常用的四个功能模块:元素(ELements).控制台(Console).源代码(Sources),网络(Network). 元素(Elements):用于查看或修改HTML元素 ...

  9. 新版本Xcode 6的视图调试详解

    开发者会经常遇到视图或者Auto Layout约束中存在bug的情况,并且这种bug很难通过代码发现,所以开发者很有必要熟知如何进行简单高效的视图调试,而Xcode 6的发布使得视图调试变得前所未有的 ...

随机推荐

  1. [JSOI2017]原力

    题目大意: 一个$n(n\le5\times10^4)$个点,$m(m\le10^5)$条边的无向图.每条边有一个边权$w_i(w_i\le10^6)$和一个附加属性$t_i(t_i\in\{R,G, ...

  2. [置顶] kubernetes资源对象--limitranges

    概念 LimitRange(简称limits)基于namespace的资源管理,包括pod和container的最小.最大和default.defaultrequests等. 一旦创建limits,以 ...

  3. Linux用户配置sudo权限(visudo)

    sudo的工作过程如下: 1,当用户执行sudo时,系统会主动寻找/etc/sudoers文件,判断该用户是否有执行sudo的权限 2,确认用户具有可执行sudo的权限后,让用户输入用户自己的密码确认 ...

  4. ISP模块之彩色图像增强--ACE算法 .

    ACE(Automatic Color Enhancement),自动色彩增强算法,是一种对于彩色图像增强十分行之有效的方法.它的改进算法以及快速实现在文章Automatic Color Enhanc ...

  5. boolean类型的特殊的get和set方法

    public class D { private boolean a; public boolean isA() { return a; } public void setA(boolean a) { ...

  6. 机器学习第1课：引言(Introduction)

    1.前言 Machine Learning(机器学习)是研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能. 它是人工智能的核心,是使计算机具有 ...

  7. SparkStreaming数据源Flume实际案例分享

    一.什么是Flume? flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original genera ...

  8. Linux增加挂载盘

    命令:fdisk /dev/sdb, m 命令:m,n,e,1,p,w 命令:mkfs -t ext4 /dev/sdb,y 挂载命令:mount -t ext4 /dev/sdb /data 获取U ...

  9. ASP.NET MVC学习---（五）MVC初体验

    经过之前n多的铺垫 我们已经大概了解了这个姓m名vc的家伙了 那么今天我们就来体验一把 怎么体验呢? 就来做一个小例子吧~ mvc增删改查的例子 数据库还是之前我们的老朋友 关系图: 表中的数据已填好 ...

  10. 精通Hibernate——域对象之间的关系

    在域模型中.类之间存在四种关系 1.关联(Association) 类之间的引用关系,能够有一对一.一对多和多对多,比如customer与order之间就是一对多 public class Order ...