js之WEB开发调试利器:Firebug 下载


Posted in Javascript onJanuary 13, 2007

在米随随的Blog看到有关Firebug的介绍,遂下载试用了一下,确实是比较好的工具。

一、效果
js之WEB开发调试利器:Firebug 下载

二、主要功能

  • Inspect and edit HTML
  • Tweak CSS to perfection
  • Visualize CSS metrics
  • Monitor network activity
  • Debug and profile JavaScript
  • Quickly find errors
  • Explore the DOM
  • Execute JavaScript on the fly
  • Logging for JavaScript

对于WEB开发人员来说,可以非常方便的得到自己想要的信息:HTML、DOM、CSS、JS,甚至各个文件的下载时间。

刚测试了一下JS的调试功能,非常方便,可以设置断点,鼠标移至变量名上,可以得到相应值的提示。太棒了!

三、非Firefox浏览器的解决方案:Firebug Lite

对于非Firefox浏览器,Firebug也有相应的解决方案—Firebug Lite,通过使用console.log()输出错误信息至Firebug 控制台。

1.下载Firebug Lite

下载地址:http://getfirebug.com/releases/firebuglite1.0-b1.zip,解压至WEB目录,比如/js/firebug/。

在页面中增加以下代码:

  1. <script language="javascript" type="text/javascript" 
  2.             src="/path/to/firebug/firebug.js"></script>

如果不想安装Firebug Lite,只是为了避免Javascript错误,可以点击这里下载firebugx.js然后copy至代码中即可。

这个文件的代码如下:

  1. if (!("console" in window) || !("firebug" in console))
  2. {
  3.     var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
  4.     "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
  5.     window.console = {};
  6.     for (var i = 0; i < names.length; ++i)
  7.         window.console[names[i]] = function() {}
  8. }

2.使用Firebug Lite
默认情况下,打开页面后,可以按F12开启Firebug的控制台,如果不想频繁按F12来进入调试状态,也可在HTML元素上增加 debug=”true” ,如下:

  1. <html debug="true">

3.使用命令行

Firebug也包含一个命令行程序,可以使用以下快捷键Ctrl+Shift+L (or ⌘+Shift+L on Mac)

4.测试页面
按 F12 或 Ctrl+Shift+L,就可以看到效果了。

Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
react-router中的属性详解
Jun 01 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vue下的@change事件的实现
Oct 25 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
用js实现多域名不同文件的调用方法
Jan 12 #Javascript
cssQuery()的下载与使用方法
Jan 12 #Javascript
JavaScript基本对象
Jan 11 #Javascript
window.showModalDialog使用手册
Jan 11 #Javascript
新手入门常用代码集锦
Jan 11 #Javascript
javascript引用对象的方法
Jan 11 #Javascript
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 #Javascript
You might like
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
python的文件操作方法汇总
2017/11/10 Python
浅谈Python处理PDF的方法
2017/11/10 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
幼儿园春游活动方案
2014/01/19 职场文书
临床护士自荐信
2014/01/31 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
员工教育培训协议书
2014/09/27 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
欢迎新生标语2015
2015/07/16 职场文书
校园安全学习心得体会
2016/01/18 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS