使用Firebug进行断点调试详解
利用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进行断点调试详解的更多相关文章
- Zend Studio集成Xdebug断点调试详解
转自:http://www.softown.cn/post/115.html Xdebug是PHP开发中两个常用的断点调试工具之一(另一个为Zend Debugger). 现在,我们在Zend Stu ...
- VisualStudio 断点调试详解
本文详细告诉大家 VisualStudio 断点调试的功能和使用方法,本文使用的是最新 VisualStudio2019 的功能,也许在你看到这篇博客的时候这个版本已经过时 本文将会按照从简单到复杂, ...
- 2019-11-29-VisualStudio-断点调试详解
原文:2019-11-29-VisualStudio-断点调试详解 title author date CreateTime categories VisualStudio 断点调试详解 lindex ...
- Intellij IDEA中使用Debug调试详解
转载:https://www.linuxidc.com/Linux/2017-09/146772.htm Intellij IDEA中使用Debug调试详解 Debug用来追踪代码的运行流程,通常 ...
- Linux Bash命令关于程序调试详解
转载:http://os.51cto.com/art/201006/207230.htm 参考:<Linux shell 脚本攻略>Page22-23 Linux bash程序在程序员的使 ...
- Go工具和调试详解
https://blog.csdn.net/happyanger6/article/details/78724594/ https://blog.csdn.net/u012210379/article ...
- chrome浏览器,调试详解,调试js、调试php、调试ajax
1.可以看到js报错 2.可以看到php报错 3.可以看到ajax返回的信息,以及报错情况 4.可以看到调用了那些内容以及顺序 5.可以调试js代码 6.可以查看session等等 功能非常之强大. ...
- Chrome开发者工具调试详解
chrome开发者工具最常用的四个功能模块:元素(ELements).控制台(Console).源代码(Sources),网络(Network). 元素(Elements):用于查看或修改HTML元素 ...
- 新版本Xcode 6的视图调试详解
开发者会经常遇到视图或者Auto Layout约束中存在bug的情况,并且这种bug很难通过代码发现,所以开发者很有必要熟知如何进行简单高效的视图调试,而Xcode 6的发布使得视图调试变得前所未有的 ...
随机推荐
- POJ 1044: Date bugs
题目描述 There are rumors that there are a lot of computers having a problem with the year 2000. As they ...
- POJ 3368 Frequent values(线段树区间合并)
[题目链接] http://poj.org/problem?id=3368 [题目大意] 有一个有序序列,要求区间查询出现次数最多的数 [题解] 维护每个区间左端点和右端点,以及左右的长度,还有区间的 ...
- gedit插件配置
Ubuntu用户 sudo apt-get install gedit-plugins Fedora用户 yum install gedit-plugins 使用gEdit搭配terminal来写程序 ...
- python 时间 相关
http://www.jb51.net/article/47957.htm 不管何时何地,只要我们编程时遇到了跟时间有关的问题,都要想到 datetime 和 time 标准库模块,今天我们就用它内部 ...
- OpenSessionInViewFilter的配置
OpenSessionInViewFilter是用来处理懒加载异常的. 懒加载异常的意思的就是:还用不到的东西,就先不加载,等需要的时候再来加载. 所以懒加载对性能有一定的提升,但是,这也会出现一些问 ...
- Centos7.x系统优化
1.安装常用软件 yum install tree nmap sysstat lrzsz dos2unix wget net-tools ntpdate -y 2.配置yum源 mv /etc/yu ...
- 新人补钙系列教程之:体验ApplicationDomain 应用程序域
要说应用程序域,就不得不说安全沙箱 安全沙箱在帮助文档的解释是: 客户端计算机可以从很多来源(如外部 Web 站点或本地文件系统)中获取单个 SWF 文件.当 SWF 文件及其它资源(例如共享对象.位 ...
- hive删除表报错
metastore.RetryingHMSHandler: HMSHandler Fatal error: javax.jdo.JDODataStoreException: You have an e ...
- java读取properties文件,并在配置文件中设置默认浏览器驱动
java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值"的格式,在properti ...
- 持久化配置管理 diamond 使用简介
本次为大家介绍diamond的概况和快速使用. 一.概况 diamond是淘宝内部使用的一个管理持久配置的系统,它的特点是简单.可靠.易用,目前淘宝内部绝大多数系统的配置,由diamond来进行统一管 ...