firefox几个好用的js,css调试插件

最新推荐文章于 2025-12-17 15:28:36 发布
转载 最新推荐文章于 2025-12-17 15:28:36 发布 · 2.2k 阅读 · 2
文章标签：

#firefox #css #javascript #mozilla #firebug #浏览器

本文介绍Firebug、WebDeveloper、CSSViewer和JavaScriptDebugger等顶级Web开发调试与设计工具，涵盖DOM结构查看、样式调节、JavaScript调试等功能，是网页开发者和设计者的必备利器。

1.Firebug
大小: 21.3 K尺寸: 449 x 199浏览: 309 次点击打开新窗口浏览全图
Firebug无论是查看DOM结构、调节样式、调试JavaScript，Firebug都无愧是“拿莫温（NO.1）”。在FireFox3还是beta版的时候，Firebug就已经发布了全面支持FireFox3beta的版本。在FireFox3正式版中，依然有强劲的表现。
安装下载：
Firebug官方网站
FireFox附加组件中心（版本更新慢）

2.Web Developer
大小: 21.57 K尺寸: 449 x 199浏览: 2 次点击打开新窗口浏览全图
仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口，就能一窥它的强大。推荐网页开发者和网页设计者使用，能够帮助你方便的对页面进行调整和完善。Firefox上开发和调试web站点的不二之选。Web developer toolbar包含了一系列工具，从cookie管理到CSS调试，从导航线到屏幕标尺，功能简直是多得说不完。
安装下载：
Firebug中文安装（推荐英文不好安装）
Web Developer官方主页
FireFox附加组件中心下载Web Developer

3.CSSViewer
大小: 20.8 K尺寸: 450 x 200浏览: 0 次点击打开新窗口浏览全图
简单易用的 CSS 查看器，可以方便的查看当前浏览页的各项 CSS。
安装下载：https://addons.mozilla.org/zh-CN/firefox/search?q=CSSViewer&cat=all

https://addons.mozilla.org/de/firefox/downloads/file/30262/cssviewer-1.0.3-fx.xpi

4.JavaScript Debugger
大小: 20.53 K尺寸: 449 x 199浏览: 0 次点击打开新窗口浏览全图
一个基于Mozilla的浏览器的JavaScript调试环境，是Mozilla浏览器的一个扩展。Venkman基于Mozilla JavaScript调试API（js/jsd），js/jsd API 构成了 Netscape JavaScript Debugger 1.1的基础，Netscape浏览器4.x系统都提供了这个调试工具。Venkman是目前比较流行的JavaScript调试工具。强烈推荐这个刚下 载了一个Mozilla免费调试器 JavaScript Debugger。这个调试器的前身为Netscape的JavaScript调试器，它是Mozilla的一个附加产品。Venkman JavaScript调试器既是一个图形，也是一个控制台调试器。
安装下载：
https://addons.mozilla.org/zh-CN/firefox/addon/216
https://addons.mozilla.org/zh-CN/firefox/search?q=JavaScript+Debugger&cat=all

Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)
03-28
第一步，我们需要安装Firefox30,不能高于30; http://ftp.mozilla.org/pub/firefox/releases/30.0b9/win32/zh-CN/Firefox Setup 30.0b9.exe 安装浏览器后关闭自动升级： 打开Firefox浏览器--打开菜单(右上角三条横杆)--选项--更新--不检查更新 另外可以将反馈选项中的都取消 第二步，安装前端开发人员最普及的开发工具 Firebug-2.0.16 (下载包中有) 安装方法: 打开Firefox浏览器--打开菜单(右上角三条横杆)--附加组件--扩展--点击右上角有个雪花一样的设置按钮--从文件安装附加组件--选择firebug-2.0.16-fx.xpi安装就可以 第三步，安装CSS Usage 0.2.9（下载包中有） 第四步，在Firefox浏览器中打开我们要优化的页面（本地的页面也可以），点击右上角的firebug(有个小蜜蜂图标)，打开firebug工具窗口，我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最上面的三个功能按钮的使用 Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况. Clear: 清除扫描结果,当我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始其他的扫描. AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率. 简单来说： Scan: 扫描当前页面的CSS使用情况。 Clear:清除扫描结果。 AutoScan:自动扫描每个打开的页面。 我们可以使用AutoScan的叠加结果 然后CSS文件名称后面有个export cleaned css 点击后可导出扫描的结果，结果就是干净的CSS文件。 我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态: 绿色–表示当前扫描看到的,=保留 深绿色–的以前的扫描中看到的,=保留 红色–的表示在当前和以前扫描中均未发现的.=这部分可以清除 灰色–的代表伪类的选择器CSS,这部分将会被忽视. 如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了 注意，说了这么久，大家一定知道了CSS Usage是一个扫描冗余CSS样式的工具，可以清理多余的CSS样式， 但是，你一定要扫描足够多的网页，尽可能地找到最多的样式。 同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计,就是CCS文件后面的(1 scans) 如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我，每一次页面跳转，CSS Usage 都会自动增加页面的扫描次数
Firefox 插件 JSView 查看网页CSS样式和JS脚本
03-28
在右键菜单中集成选项，查看外部样式表与 JavaScript 的源代码。手动安装扩展 在地址栏输入about:support 里面有打开配置文件夹 放在这个配置文件夹里面的“extensions”文件夹里,重启Firefox浏览器后 再到附加组件激活一下即可！该组件在Firefox组件搜索不到
JavaScript调试工具——Firefox中的插件Firebug介绍
drmeps的专栏
03-25 3234
先下载一个最新的版本吧 Firebug 1.3.3https://addons.mozilla.org/zh-CN/firefox/addon/1843下载后直接拉入到 Firefox中就可以用了。 本文是Firebug的一个概览，并不对它的所有特性进行详尽解释。不过，本文的内容对一个新手来说，应该是足够了。目录一、安装Firebug二、打开和关闭F
Firefox插件 CSS Usage
08-08
css usage是一个基于firebug的firefox扩展，可以用来查看页面中的CSS的使用情况，可以清楚的查看css文件中所有的规则在你的网站中的 真实的使用情况。可以查看一个网站中多个页面中的css使用情况——这个很好，可以看到CSS的在网站中的全局使用情况。 用法： 打开你想要扫描的网站的页面，打开Firebug，切换到CSS Usage标签，然后点击”scan”按钮。 如果是用了大量ajax或者dhtml的网站中，打开尽可能多的隐藏的div/窗口/tab，以使CSS Usage爬取尽可能多的内容。 然后访问你的网站的其它页面。 每访问一个新的页面，请按一次”scan”按钮。当然，也可以选择autoScan按钮，这样就不用每次按Scan按钮了。 扫描的结果中，绿色的规则表示当前页面中有用到，黑色表示其它页面中用到，红色表示没有被扫描到(至少在当前页面)，灰色是伪类(:hover之类) 一些特性： 可显示规则的行数 自动扫描(autoScan) 链接到CSS文件(可以在新tab中打开该CSS文件)
火狐浏览器js插件firebug最新版
04-20
火狐浏览器js插件firebug最新版下载包
Firefox浏览器兼容JS脚本供参考
kangojian的专栏
05-15 883
1.window.event兼容脚本 2.屏蔽Form提交事件 3.获取事件源 4.添加事件兼容写法 5.Firefox注册innerText写法 6.长度 7.父控件下的子控件 8.XmlHttp  1.window.event兼容脚本 function getEvent(){ //获取浏览器事件，同时兼容ie和ff的写法 if(document.all) return wind
CSS减肥工具Firefox插件CSS Usage
10-03
标题中的“CSS减肥工具Firefox插件CSS Usage”指的是一个针对Firefox浏览器的扩展，该扩展专门设计用于优化和精简CSS（层叠样式表）代码。CSS是网页设计中用于控制布局和样式的语言，但随着时间的推移，CSS文件可能...
火狐浏览器调试工具：JS、HTML与CSS插件解析
标题中提到的“火狐的JS, HTML, CSS调试插件”指的是Firebug这款流行的调试工具，它是专为Mozilla Firefox浏览器设计的，允许开发者查看和编辑各种网络层面上的代码，包括JavaScript、HTML和CSS。Firebug的调试功能...
火狐插件Firebug：CSS与JavaScript调试神器详解
这款插件集成了CSS、HTML、JavaScript的调试和查看功能，使得开发者在实时浏览网页时能够方便地进行编辑、调试和优化。 学习使用Firebug的步骤分为几个部分： 1. **安装Firebug**: 首先，确保你已经安装了Firefox...
CSS Usage CSS减肥工具(firefox插件)
12-04
这种情况下，给网站CSS文件减肥类似于海底捞针的大工程，因为稍不留神，一个不经意的删除，就会造成线上的产品的事故。下面我们就给大家推荐一款CSS减肥的工具–Firefox插件 CSS Usage. 首先，我们需要安装Firefox（点击此处下载）,或者确定你已经安装的版本已经高于3.1;第二步，安装前端开发人员最普及的开发工具 Firebug；第三步，安装CSS Usage 0.2.2(写此文时的版本)；第四步，在浏览器中打开我们要优化的页面（本地的页面也可以），点击右下角的firebug小图标，打开firebug工具窗口，我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
10-26
这篇文章将深入探讨如何使用Firefox浏览器的FireBug插件来调试jQuery中的AJAX请求，特别是在处理$.ajax()及其相关辅助方法如$.get(), $.getScript(), $.getJSON(), $.post()和$().load()时。 首先，让我们通过一个...
火狐浏览器各种老版插件（多大20多个）
06-05
火狐浏览器，全名Mozilla Firefox，是一款开源、自由的网络浏览器，以其稳定、安全和高度可定制性受到用户的喜爱。火狐浏览器的老版插件是其丰富功能的重要组成部分，它们为用户提供了各种增强浏览体验的功能，如...
使用Firefox 网格检查器调试 CSS网格布局
W3cplus
12-05 805
这篇文章介绍了Firefox DevTools的一些鲜为人知的特性，这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS和网格这两个词，那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素，而CSS Grid则是一种新的布局模式，它为开发者提供了控制这些盒子及其内容大小和位置
掌握好写js代码相应的调试工具之——火狐调试工具-DevTools
ITsource
07-19 6615
我们如果掌握好相应的调试工具，那么就可以比较游刃有余的解决js的调试问题。工欲善其事,必先利其器。
火狐浏览器添加css调试_CSS调试和优化：基于浏览器的开发人员工具
culi3118的博客
09-03 1533
火狐浏览器添加css调试The following introduction to CSS code-quality tools is an extract from Tiffany’s new book, CSS Master, 2nd Edition. 以下对CSS代码质量工具的介绍摘自Tiffany的新书CSS Master，第二版 。 On your road to becoming ...
8款经典实用的jQuery/CSS3应用插件
tthappyer的博客
01-02 417
新的一周即将开始，今天我们精选了最新8款经典实用的jQuery/CSS3应用插件，有按钮、菜单、图片等特效应用，欢迎收藏和分享。1、jQuery滑过头像图片展示个人信息效果这是一款经典的jQuery图片插件，同时，也可以是一款jQuery提示框插件。这款jQuery插件的功能是当你把鼠标滑过头像图片缩略图时，即可弹出头像对应用户的详细个人信息，弹出的标签虽然不大，但是还是能容纳很多个人信息的。 在...
火狐(FireFox)插件Sage的一个自定义css
老高的博客
02-19 1794
html *{...}{    -moz-box-sizing: border-box;}html {...}{    line-height: 1.3;    background-color: #FFFFFF;}body {...}{    margin: 0px;    color: #000000;    font-family: verdana;}h1 a #rss-link{...
Tomcat三步搭建局域网文件共享
最新发布
qq_36944952的博客
12-17 212
本文介绍了使用Tomcat搭建局域网文件共享的方法。首先从华为镜像下载Tomcat并解压，然后修改配置文件：1)设置UTF-8编码和端口号；2)配置虚拟路径映射到本地文件夹；3)启用目录列表显示功能。最后启动Tomcat服务，局域网用户即可通过浏览器访问指定IP和端口查看共享文件。整个过程简单易行，无需复杂配置即可实现基本的文件共享功能。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值