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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
js控制frameSet示例
Sep 10 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 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
Sony CFR 320 修复改造
2020/03/14 无线电
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
Django框架模板用法入门教程
2019/11/04 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
应付会计岗位职责
2013/12/12 职场文书
施工安全责任书
2014/04/14 职场文书
工作表扬信
2015/01/17 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
小学德育工作总结2015
2015/05/12 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android