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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 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中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP文件与目录操作示例
2016/12/24 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
numpy.where() 用法详解
2019/05/27 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
浅谈Python 函数式编程
2020/06/20 Python
Python脚本调试工具安装过程
2021/01/11 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
自考毕业生自我鉴定
2013/11/04 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
入职担保书怎么写
2014/05/12 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
化验室岗位职责
2015/02/14 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers