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读取ASP设定的COOKIE
Feb 15 Javascript
DHTML Slide Show script图片轮换
Mar 03 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
Element实现动态表格的示例代码
Aug 02 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警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
Javascript 链式作用域详细介绍
2017/02/23 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python中正则表达式的用法总结
2019/02/22 Python
python装饰器代替set get方法实例
2019/12/19 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
暑期教师培训方案
2014/06/07 职场文书
团日活动总结怎么写
2014/06/25 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
二年级学生期末评语
2014/12/26 职场文书
于丹论语心得观后感
2015/06/15 职场文书
职位证明模板
2015/06/23 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
幼儿园安全管理制度
2015/08/05 职场文书