利用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. POJ 1862 Stripies【哈夫曼/贪心/优先队列】

    Stripies Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 18198   Accepted: 8175 Descrip ...

  2. linux之vim命令

    :tabe fn     在一个新的标签页中编辑文件fngt     切换到下一个标签页gT     切换到上一个标签页:tabr     切换到第一个标签页:tabl     切换到最后一个标签页: ...

  3. JsonDataObjects序列和还原

    JsonDataObjects序列和还原 JsonDataObjects号称DELPHI最快的JSON库,且支持跨平台. // cxg 2017-9-12// Use JsonDataObjects( ...

  4. iOS GCD 拾遗

    GCD里就有三种queue(分派队列)来处理. 1. Main queue:(主队列) 顾名思义,运行在主线程,由dispatch_get_main_queue获得.和ui相关的就要使用Main Qu ...

  5. 关于使用ueditor时候遇到的情况

    在使用百度ueditor的时候遇到的一下情况 1.点击图片之后图片无法在编辑器内显示 2.从数据库取出图片的时候无法在编辑器内显示 3.内容存放入数据库取出来之后,HTML效果不显示 流程: 1.引入 ...

  6. 使用Spring boot整合Hive,在启动Spring boot项目时,报错

    使用Spring boot整合Hive,在启动Spring boot项目时,报出异常: java.lang.NoSuchMethodError: org.eclipse.jetty.servlet.S ...

  7. 2017.6.30 安装IDEA的插件mybatis plugin(破解版)

    参考来自:http://blog.csdn.net/u011410529/article/details/54098067 正常情况下的安装: 但是我的界面中找不到这个插件,而且这个插件是收费的. 1 ...

  8. 微信小程序 - 获取用户信息的几种方式

    1. 老接口(上线使用-测试用button先获取用户信息) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, ses ...

  9. InnoDB事务和锁

    InnoDB支持事务,MyISAM不支持事务. 一.事务的基本特性 ACID特性 1.原子性(Atomicity):事务是一个原子操作单元,其对数据的修改,要么全都执行,要么全都不执行. 2.一致性( ...

  10. <转>创建支持eclipse的多模块maven项目

    如何使用eclipse创建Maven工程及其子模块 1,首先创建一个父类工程   子模块继承父类工程      并在父类工程的pom.xml文件中定义引入的jar及其版本号     子模块可以引用 2 ...