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 相关文章推荐
Javascript中Eval函数的使用
Mar 23 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
js命名空间写法示例
Dec 18 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
用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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
chrome原生方法之数组
2011/11/30 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python实现实时监控文件的方法
2016/08/26 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python把一个字符串切开的实例方法
2020/09/27 Python
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
教师敬业奉献模范事迹材料
2014/05/18 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
初一英语教学反思
2016/02/15 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python