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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
玩转方法:call和apply
May 08 Javascript
浅谈javascript回调函数
Dec 07 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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 SQLite类
2009/05/07 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP常用处理静态操作类
2015/04/03 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python动态监控日志内容的示例
2014/02/16 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python简单实现9宫格图片实例
2020/09/03 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
毕业设计计划书
2014/01/09 职场文书
夜不归宿检讨书
2014/02/25 职场文书
美术毕业生求职信
2014/02/25 职场文书
主题实践活动总结
2014/05/08 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle