利用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. HDU 1203 【01背包/小数/概率DP】

    I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...

  2. Codeforces Round #270 A. Design Tutorial: Learn from Math【数论/埃氏筛法】

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  3. Qt如何学习（参考官方文档）

    Designers who are familiar with web development can start with QML 一共有四种安装工具 You have following opti ...

  4. Xamarin.Android真机测试提示[INSTALL_FAILED_UPDATE_INCOMPATIBLE]

    Xamarin.Android真机测试提示[INSTALL_FAILED_UPDATE_INCOMPATIBLE]   使用真机测试的时候,出现以下错误提示:   Deployment failed ...

  5. Count Numbers with Unique Digits -- LeetCode

    Given a non-negative integer n, count all numbers with unique digits, x, where 0 ≤ x < 10^n. Exam ...

  6. AtCoder - 4130 K-th Substring

    Problem Statement You are given a string s. Among the different substrings of s, print the K-th lexi ...

  7. jsp笔记3(内置对象)

    jsp脚本中的9个内置对象: 1.application:javax.servlet.ServletContext的实例对象,该实例对象代表jsp所属的web应用本身,可用于在jsp页面或Servle ...

  8. Android基于代理的插件化思路分析

    前言 正常的App开发流程基本上是这样的:开发功能-->测试--->上线,上线后发现有大bug,紧急修复---->发新版本---->用户更新----->bug修复.从发现 ...

  9. ios学习流水账2

    1.UISearchBar自定义背景.取消按钮中文设置 UISearchBar *seachBar=[[UISearchBar alloc] init]; //修改搜索框背景 seachBar.bac ...

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

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