Firefox - 附加软件 - Firebug - DOM视图 - 借助Show User-defined Properties选项查看javascript全局变量

原创 2007年10月14日 19:36:00

Firefox - 附加软件 - Firebug - DOM视图 - 借助Show User-defined Properties选项查看javascript全局变量

在javascript的函数中,本地变量需要显式的用var声明,如果不用var声明,则被视为全局变量。例如下面的代码:

<script>
function func () {
  global_variable = "without var";
  var local_variable = "with var";
}
func();
</script>
虽然global_variable和local_variable两个变量都在func函数中首次使用,但是global_variable变量由于在初次使用时没有使用var标识,所以当成全局变量处理。由于标注或不标注var都符合语法,因此常常忽略标注var。
由于忽略标注var而引入全局变量有两个害处:
  1. 由于javascript采用垃圾回收机制,因此,本地变量在函数执行结束后就被释放,而全局变量在函数执行结束后不会被自动释放。对于传统的页面影响不大,而对于ajax页面,大量未释放的全局变量将引起大量的内存消耗。
  2. 不正确的定义全局变量污染全局命名空间。
在FireBug中,可以借助DOM视图的Show User-defined Properties选项查看javascript全局变量,便于清理未标注var的情况。DOM视图的Options中有五个选项:
  • Show User-defined Properties
  • Show User-defined Functions
  • Show DOM Properties
  • Show DOM Functions
  • Show DOM Constants
仅选择Show User-defined Properties选项,取消选择其他四个选项,就可以查看页面运行到当有状态时的javascript全局变量了。

[Firefox - 附加软件]

CookieSafe, 当前版本2.0.6, 常用, https://addons.mozilla.org/en-US/firefox/addon/2497
Firebug, 当前版本1.05, 常用, https://addons.mozilla.org/en-US/firefox/addon/1843
Google Toolbar for Firefox, 当前版本3.0.20070525W, 常用, http://www.google.com/tools/firefox/toolbar/FT2/intl/zh-CN/
Html Validator, 当前版本0.8.4.0, 常用, https://addons.mozilla.org/firefox/249/
MinimizeToTray, 当前版本0.0.1.2006102615+, 不常用, https://addons.mozilla.org/firefox/2110/
Tab Mix Plus, 当前版本0.3.6, 不常用, https://addons.mozilla.org/firefox/1122/
Torbutton, 当前版本1.0.4.01, 常用, https://addons.mozilla.org/en-US/firefox/addon/2275

[Firebug - 简介]

当前版本:1.05
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
在您浏览时集成在Firefox中的Firebug能让您对于大量开发工具了如指掌。您可以实时在任何浏览的页面中编辑、调试、监视CSS,HTML和JavaScript。
Visit the Firebug website for documentation, screen shots, and discussion forums:
访问Firebug站点可以获得文档、效果图和讨论论坛。

[Firebug - 发布网址]

https://addons.mozilla.org/en-US/firefox/addon/1843

[Firebug - 站点]

http://www.getfirebug.com

[Firebug - 文档]

http://www.getfirebug.com/docs.html

[Firebug - bug]

http://code.google.com/p/fbug/issues/list

[Firebug - 关键词]

Firebug

[Firebug - 论坛]

http://groups.google.com/group/firebug

[Firebug - Console控制台视图]

console API文档, http://www.getfirebug.com/console.html

console.time()用于计算时间

console.info显示(i)图标

在输出时,需要注意第一个参数被自动识别为格式字符串

需要在页面加载前启动firebug,当页面加载后启动firebug时,就没有console对象

[Firebug - HTML页面视图]

Show Computed Style不显示所有可用的样式

标记的显示也会与源代码不同,而是按照Firefox对文档结构的解析显示的

在页面上右击弹出菜单中选择Inspect Element菜单项,能起到与Inspect按钮相同的作用。

[Firebug - CSS样式表视图]

Edit编辑模式下切换文件不能保持Edit编辑模式

[Firebug - script脚本视图]

使用step into, step over等按钮需要预先设置javascript脚本的断点

Options中的BreakOnErrors项用于捕获javascript出错事件,不受javascript脚本中的try/catch影响

[Firebug - DOM文档结构视图]

页面中包含不断执行的AJAX时,DOM视图也将不断刷新,此时可以在script视图中AJAX脚本处设置断点避免DOM视图刷新。

[Firebug - Net网络视图]

  • 有进度条,绿色,正在读取
  • 有进度条,深灰色,向服务器端发送请求,从服务器端返回文件
  • 有进度条,浅灰色,向服务器端发送请求,服务器端返回未修改,加载本地缓存文件
  • 无进度条,未向服务器发送请求,直接从本地缓存加载文件

[Firebug - 其他问题]

不支持IE Tab
版权声明:本文为博主(@胡争辉)原创文章,未经博主允许不得转载。

Chrome浏览器,搜索JS方法。

想爬其他网站的数据,但是,不知道怎样获取,可以用火狐浏览器获取到URL,但是,URL被拦截,想找到 点击方法的JS,怎么办? 可以用chrome的文件搜索功能。 我想要搜索的方法名称是:c...
  • u012246342
  • u012246342
  • 2016年05月30日 11:54
  • 5885

掌握好写js代码相应的调试工具之——火狐调试工具-DevTools

我们如果掌握好相应的调试工具,那么就可以比较游刃有余的解决js的调试问题。工欲善其事,必先利其器。...
  • villainy13579
  • villainy13579
  • 2017年07月19日 10:00
  • 492

如何使用firefox进行网页js调试

irebug插件-如何使用firefox进行网页js调试 什么是Firebug 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码;要编写精致的CS...
  • u012054869
  • u012054869
  • 2016年12月06日 16:47
  • 3420

关于改善js语言编程质量的个人小结之减少全局变量污染

Javascript的变量的scope是根据方法块来划分的,在函数外声明的都是全局变量。全局变量的不合理使用会给我们的编程带来很多头疼的问题,总结下什么时候用全局变量以及如何改善全局变量的使用。 定...
  • u012778836
  • u012778836
  • 2016年04月24日 11:16
  • 1181

Firefox中利用javascript调用本地程序

http://blog.csdn.net/jensonhjt/article/details/1765557 script>function hello () {  netscape.securit...
  • ztguang
  • ztguang
  • 2016年03月30日 10:36
  • 838

前端开发推荐的火狐插件扩展

前端开发推荐的火狐插件扩展 火狐好用的插件有很多,主要看你是做什么工作了,比如我是做网站前端的,有一些调试页面的插件就不可缺少了,如firebug、web developer等。 秀一...
  • jsd2honey
  • jsd2honey
  • 2016年08月23日 14:37
  • 1646

【cocos2d-x从c++到js】使用FireFox进行JS远程调试

一、四种调试方式 目前为止,cocos2d-x jsbinding的调试方法有四种: 1.在基于Native的手游开发中,脚本语言一般都不支持在原生IDE中的调试,除非有专门的IDE...
  • Kaitiren
  • Kaitiren
  • 2014年03月26日 11:55
  • 4590

Firefox中利用javascript调用本地程序

Firefox中利用javascript调用本地程序 2007-08-30 16:03 2577人阅读 评论(3) 收藏 举报 javascriptfirefoxfuncti...
  • qq5132834
  • qq5132834
  • 2014年05月31日 12:34
  • 1293

如何自动获取网页页面元素的xpath(基于火狐浏览器)

xpath获取步骤: 1、打开火狐浏览器; 2、选择  “打开菜单” -> "附加组件"  如下图所示: 3、在 “搜素所有附加组件” 输入框中搜索Firebug 4、搜索到 ...
  • u013372487
  • u013372487
  • 2015年05月10日 12:30
  • 4505

捕获页面中全局Javascript异常

捕获页面中全局Javascript异常
  • github_38823514
  • github_38823514
  • 2017年07月03日 11:17
  • 1155
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: Firefox - 附加软件 - Firebug - DOM视图 - 借助Show User-defined Properties选项查看javascript全局变量
举报原因:
原因补充:

(最多只允许输入30个字)