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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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 current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php实现mysql封装类示例
2014/05/07 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
在Django中实现添加user到group并查看
2019/11/18 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
中学运动会广播稿
2014/01/19 职场文书
课外小组活动总结
2014/08/27 职场文书
清洁工个人工作总结
2015/03/05 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫