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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
js取整数、取余数的方法
May 11 Javascript
javascript常用函数(2)
Nov 05 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
vue实现记事本功能
Jun 26 Javascript
vue+element tabs选项卡分页效果
Jun 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 操作文件的一些FAQ总结
2009/02/12 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
浅说js变量
2011/05/25 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
python基础教程之循环介绍
2014/08/29 Python
python查询sqlite数据表的方法
2015/05/08 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
python多线程同步之文件读写控制
2021/02/25 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
经典婚礼主持词
2014/03/13 职场文书
企业授权委托书范本
2014/04/02 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
爱心捐款活动总结
2015/05/09 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技
MySQL创建管理HASH分区
2022/04/13 MySQL
vscode内网访问服务器的方法
2022/06/28 Servers