教你如何使用firebug调试功能了解javascript闭包和this_javascript技巧

对于跟我一样,自学javascript且没有其他语言学习经验的人来说,一开始的时候,javascript的调试也是一个比较大的难点,很多基础的东西都需要自己去摸索,这个过程是非常苦闷的。

想着趁机会将上面那篇闭包博文的配图用firebug再来演示一遍,也算是一点调试经验分享。

示例代码如下:

复制代码 代码如下:

function fn(){
  var max = 10;
  return function bar(x){
    if (x > max) {
      console.log(x);
    }
  }
}
var fl = fn(),
  max = 100;
fl(15);

  

选择firebug——脚本

右侧监控栏可以window对象以及变量max、fl、fn。

同时下面也可以看到window的属性,以location为例,可以直接在“控制台”运行window.location输出,进一步可以window.location.href输出location的href属性值。当然,一般在引用window对象的属性和方法时,不需要用“window.xxx”这种形式,而直接使用“xxx”。

言归正传,

回到“脚本”栏,通过打“断点”的方式调试javascript和查看变量值。

有几个概念可以先了解下:断点、单步进入、单步跳过、单步退出。这里就不详叙了。

本次主要是采用设置断点、单步进入的方式。

可以在左侧行标处单击设置断点,断点右键可以正则判断。

可以设置多个断点,“断点”栏内可以删除已设置的断点。

这里就直接在script标签的开始处打断点并刷新页面。

此时

1、右边监控区域原window对象处变成this,并指向window。在“控制台”输出this.location会得到location一样的结果。

2、全局变量max、fl初始化为undefined

3、fn()是函数声明,因为解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问)

点击右上角的“单步进入”按钮

逐次执行代码并在监控区域查看this、各个变量的值变化以及堆栈的情况。可以和推荐的那篇博客相互参照来看。

然后再来一个this的例子
代码如下:

复制代码 代码如下:

var name = 'The Window';
var obj = {
  name: 'The local',
  getNameFunc: function () {
    console.log(this.name);
    return function () {
      console.log(this.name);
    };
  }
};
var c = obj.getNameFunc();
c();

依然“单步进入”,可以看到在执行c()这行代码的时候,进入到getNameFunc里面,this从指向window对象变为obj,控制台输出‘The local'。

逐步执行可以非常清晰的看到整个代码的运行逻辑。

以上就是本文关于使用Firebug的调试功能了解javascript闭包和this的方法总结了,希望大家能够喜欢

时间: 2025-01-21 03:56:48

教你如何使用firebug调试功能了解javascript闭包和this_javascript技巧的相关文章

Visual Studio .NET的调试功能概述

Visual Studio .NET提供的调试功能,主要讨论对于某些开发人员来说是新内容的部分.调试所涉及的主要技术是设置断点,使用它们在代码的执行过程中检查某处发生的情况. 1.断点 在Visual Studio .NET中,可以在执行的代码中给任意一行设置断点.最简单的方式是在代码编辑器中单击该行,即在文档窗口左边的阴影区域中单击该行(或者选择该行,按下F9键),这样,就在该行设置了一个断点,只要代码执行到该行,就会中断,把控制权交给调试程序.Visual Studio .NET则把该该行的

工具-Dev-c++ 调试功能如何设置

问题描述 Dev-c++ 调试功能如何设置 1.在"工具"->编译选项->"Add following commands when calling complier"下面的编辑框里加上:-g3 2.在下面的"Add these commands to the linker command line" 下的编辑框上加上:-g3 3.转到programs页,把gcc行修改为:gcc.exe -D__DEBUG__ 4.把g++行修改为g+

CodeBlocks调试功能快捷教程

在程序设计中,单步调试能够跟踪程序的执行流程.跟踪过程中,还可以观察变量的变化,从而发现其中存在的问题.单步执行除了可以帮助我们发现设计的程序中存在的问题,对于初学者,还可以帮助我们理解语言的机制. 所以,对于初学者,掌握所用的集成开发环境的一般用法,是一件非常重要的事情. 由于其重要性,再引用中国的一句古话"工欲善其事,必先利其器",单步调试就是程序设计者最重要的工具之一,这种工具的形态是软件.程序员用软件当工具,正常得不得了. 本文介绍CodeBlock的调试功能.因为面向初学者,

VC使用CRT调试功能来检测内存泄漏

信息来源:csdn     C/C++ 编程语言的最强大功能之一便是其动态分配和释放内存,但是中国有句古话:"最大的长处也可能成为最大的弱点",那么 C/C++ 应用程序正好印证了这句话.在 C/C++ 应用程序开发过程中,动态分配的内存处理不当是最常见的问题.其中,最难捉摸也最难检测的错误之一就是内存泄漏,即未能正确释放以前分配的内存的错误.偶尔发生的少量内存泄漏可能不会引起我们的注意,但泄漏大量内存的程序或泄漏日益增多的程序可能会表现出各种 各样的征兆:从性能不良(并且逐渐降低)到

pgadmin3开启函数调试功能报错

问题描述 pgadmin3开启函数调试功能报错 OS: win10 pro 64bit DB: postgresql 9.4.7 设置debug插件路径后,重启服务就报错了,postgresql.conf恢复后服务可启动,明显是插件设置导致的启动失败,但是在同事机器上按上面的操作就能成功,实在想不出是哪里不一样.

onclick-js 在IE/chrome 可用,在Firefox失效,并且用firebug调试时正常

问题描述 js 在IE/chrome 可用,在Firefox失效,并且用firebug调试时正常 html <div class="weilu-ft"> <a id="weilu-66" onclick="qa_weilu_delete(this.id)" href="javascript:void(0);"> <font color="#8DA8D5">删除</f

myeclipse的调试功能

问题描述 大家对Myeclipse的调试功能有何感想啊....特别是开发web项目 解决方案 解决方案二:啥意思啊?怎么了我用着还可以啊解决方案三:还不错呀!

《jQuery与JavaScript入门经典》——2.4 调试jQuery和JavaScript

2.4 调试jQuery和JavaScript 前面介绍了如何在JavaScript控制台中查找JavaScript和其他脚本的错误.如果脚本并未导致浏览器错误,只是运行方式不符合预期,该如何办呢?Firebug集成了一个优秀的调试器,可助一臂之力. 2.4.1 JavaScript调试器JavaScript调试器让您能够查看随网页加载到浏览器中的JavaScript脚本.除查看脚本外,您还可以设置断点.监控变量值以及查看调用栈,就像使用其他调试器时一样. 图2.21显示了Firebug提供的J

《jQuery与JavaScript入门经典》——第 2 章 调试jQuery和JavaScript网页 2.1JavaScript控制台

第 2 章 调试jQuery和JavaScript网页 本章介绍如下内容: 到哪里寻找jQuery和JavaScript脚本输出的信息: 如何调试HTML元素存在的问题: 如何轻松地找出并修复CSS布局问题: 如何在Web浏览器中实时地查看和编辑DOM: 如何快速找出并修复JavaScript问题: 有哪些信息可供用来分析浏览器和Web服务器之间的网络流量. 编写JavaScript和jQuery应用程序时,面临的一项重大挑战是找出并修复脚本中的问题.简单的语法错误和无效值可能令您万般沮丧,浪费