文档章节

15个有用的浏览器内的web开发工具

王大叔爱编程
 王大叔爱编程
发布于 2014/11/19 09:25
字数 1773
阅读 18
收藏 0

推荐15个有用的在浏览器内的web开发工具

 

Firebug



 

Firebug 不用介绍了吧,大名鼎鼎的强大的Mozilla Firef 浏览器 HTML/CSS/DOM/JavaScript调试工具。可以点击这里查看JavaEye新闻以前对Firebug的报道:here

 

 

Web Developer



 

网页调试的辅助工具:Web  Developer  ! 它是运行在FF(指Firefox浏览器下同)环境中的插件,是目前公认为最为优秀的网页调试工具之一。Web  Developer作为FF的插件存在,主要功能表现在几个重要的方面:对页面中的文本、图像、媒体文件进行控制,对网页所应用的CSS文件的id与 class辅助查看,表格辅助查看,可以实现修改CSS文件实时显示出得到的页面效果等等。

YSlow



 

YSlow :YSlow 是由Yahoo 所发布的Firefox 扩展,其主要功能是依据高性能网站的标准来分析你的网页,并告诉你它慢的原因。这样,你便可以据此作出相应改进。

Internet Explorer Web Developer Toolbar



 

微软发布的IE的网页分析工具: Internet  Explorer Web Developer Toolbar.

 

微软官方列出的Internet Explorer Developer Toolbar的主要功能如下:
    * 查看和修改页面中的DOM对象
    * 通过不同的形式定位和选择页面中的元素
    * 开关指定的IE设置项
    * 查看HTML元素的class、ID、链接的路径、tab index和access keys等
    * 高亮显示表格、单元格、图像和指定的标签
    * 校验HTML、CSS、WAI和RSS等
    * 查看图片尺寸、文件体积、路径信息以及ALT文本等
    * 以指定的分辨率查看网页
    * 删除指定域名的cookies和缓存
    * 可精确量度页面对象尺寸的标尺
    * 查找样式规则并修改元素的样式值
    * 以格式化和高亮的形式显示HTML和CSS代码

 

Fiddler Web Debugger



 

HTTP抓包工具有很多,比如 HTTP Debugger Pro, EffeTech HTTP Sniffer,但是都不是免费的。推荐 免费的HTTP抓包分析工具:Fiddler 可以帮助你直接追踪HTTP包和内容,帮助你测试调整架构。

DebugBar



 

DebugBar IE浏览器的CSS调试工具DebugBar,详情查看JavaEye新闻以前报道过的:DebugBar.

Jean-Fabrice Rabaute目标就是在IE浏览器上面构建出来一个可以媲美FireFox浏览器上面的FireBug的工具,他把这个可以调试CSS,JS的工具集成为DebugBar项目。

HttpWatch



 

HttpWatch  强大的网页数据分析工具。集成在Internet  Explorer浏览器中。只需要选择相应的网站,软件就可以对网站与IE之间的需求回复的通讯情况进行分析并在同一界面显示其相应日志记录。每一个  HTTP记录都可以详细的分析其 Cookies、消息头、字符查询等信息。支持HTTPS及分析报告输出为XML、CSV等格式。

Live HTTP Headers



 

Web黑客工具箱之:Live HTTP Headers   a Firefox 扩展。 当我们测试Web应用程序的安全性的时候,经常需要对HTTP流量进行分析和动态修改。此外,取得对Web  应用程序流出和流入的数据的控制权不仅对Web 应用程序安全缺陷的发现和漏洞的利用等安全测试任务具有很大的帮助,而且还有利于常规的Web  应用程序测试。LiveHttpHeaders,有了这个Firefox扩展,我们不必架设代理服务器就可以方便地分析和操纵HTTP流量。

Web Accessibility Toolbar



 

 Web  Accessibility Toolbar  免费的IE和Opera扩展。Web Accessibility Toolbar  是一款用于高级用户或者网络开发者的帮助其检查结构,组成并且提供任何给定网页可利用功能的工具.该软件作为 IE或Opera  浏览器的一个工具栏安装,提供若干个用于检查样式表,表格,框架,图像和其它网页元素的综合性工具,以及广泛的多样化测试和被其它网站提供的功能,包括链 接检查, HTML 确认,页面下载速度,颜色模拟,页面分辩率以及更多方面的功能.是一款适用于网络开发者的非常好的工具箱.

 

Fangs



 

Fangs 是一个 处于browser内的工具,支持Firefox,能够在浏览网页的时候模拟屏幕阅读器所“看”到的内容。这个工具很有用,能够迅速分析结构话你的网页内容,让视觉不好的人更容易理解和使用,而不需要强制你学习使用屏幕阅读器比如 JAWS 或者 Windows Eyes.

 

Venkman JavaScript Debugger



 

Venkman  是一个代码名称,用于Mozilla内部使用的JavaScript调试环境。为啥叫做Venkman,按照网上解释的,Javascript所出的 bug经常神出鬼没,象鬼一样很难逮住。而Venkman是著名的打鬼专家,跟钟馗一个意思。这个Firefox工具很牛的,实时查看变量的值,设置断点 (可编程,很强大),动态修改变量的值,它自己还有一套命令可以直接调用页面上的对象等等。

 

ColorZilla



 

ColorZilla  是一个异常简单,非常有用的Firefox扩展。拥有高级吸管、取色器、页面缩放和其他色彩应用功能。利用 ColorZilla  您可以从浏览器中的任一点读取色彩值,快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。内建的调色板浏览器允 许您从预定义的颜色集中选择颜色或将最常用颜色保存到自定义调色板。DOM 侦测功能让您可以快速、容易地获得关于 DOM  元素的各种信息。还有更多功能……

FireShot



 

FireShot  支持Firefox和IE。Fireshot来源于截图软件Screenshot  Studio的开发商,是一个Firefox扩展或者说是Firefox版的Screenshot  Studio(一款很强大的且与众不同的截图软件),用于创建网页截图。重要的是,Fireshot与Screenshot  Studio不同,它是免费使用的。如果你仅需要网页截图和简单的编辑,Fireshot就是最好的选择。FireShot截图可以保存到磁盘,格式可以 为PNG、JPEG和BMP,也可以保存在粘贴板中,或者使用邮件发送给他人。

Web Inspector



 

Web Inspector  是开源浏览器Webkit的一部分,Web  Inspector是Safari上最强大的调试器之一。支持Elements和Resources外,增加了令人振奋的Scripts调试和 Profiles功能,以及一个很上流的功能Databases(一个用来调试HTML5的Database storage)。建议阅读:safari Web Inspector 更新了

 

FireFTP



 

FireFTP 免费的跨平台Firefox插件用于FTP 传输文件。FireFTP 是出品 LiteServe/LiteWeb/LiteFTP 等工具的公司又一个新简单小巧,且容易上手的 FTP 客户端工具,支持多线程文件传输。


本文转载自:http://www.iteye.com/news/4254-15-useful-web-browser-with-the-development-tools

共有 人打赏支持
王大叔爱编程

王大叔爱编程

粉丝 35
博文 113
码字总数 63525
作品 0
成都
程序员
私信 提问
[Share]2008年国外最佳Web设计/开发技巧、脚本及资源总结

今天是2008年的最后一天,彬Go为大家奉上今年的最后大餐,这篇文章将为大家总结08年国外一些比较不错的前端开发相关的教程、技巧、脚本、实 例及工具资源等,有一些是曾经彬Go发表过的翻译文...

吞吞吐吐的
2017/10/05
0
0
对Web设计和开发人员有用的15个Chrome插件

最近我才把谷歌浏览器设为默认浏览器,而与此同时我开始将它用 于我的兼职Web设计和开发项目中。由于我所依赖Firebug的插件,在Chrome浏览器并没有完全的对应插件,所以我还是时不时要用Fir...

jobBole
2011/02/18
1K
2
Web前端开发工程师必读的15个设计博客

Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具,设计博客都是很不错的去处。本文向大家推荐15个非常不错...

疯狂的流浪
2011/07/01
2.4K
1
Web 开发与设计之 Google 兵器谱

Google 的使命是 Web,在 Google 眼中,未来的一切应用都将 Web 化,一直以来,Google 为 Web 开发与设计者推出了大量免费工具,让他们更好地创建,维护,改善他们的 Web 站点,这些工具包含...

红薯
2010/04/19
847
4
[荐] 为开发者准备的 29 个顶级 CSS 工具和应用

当你需要编辑或改变网站设计时,CSS 起着重要的作用。 透过一些 CSS工具可以让新手开发人员和设计人员轻松地学习这门语言和它的功能。 今天,我们为你编制了30个有用的CSS工具和应用程序。使...

oschina
2012/08/23
11.2K
20

没有更多内容

加载失败,请刷新页面

加载更多

java.util.Concurrent.Exchanger源码

类图 源码: package java.util.concurrent;import java.util.concurrent.atomic.AtomicInteger;import java.util.concurrent.atomic.AtomicReference;import java.util.concurrent......

狼王黄师傅
29分钟前
4
0
Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
4
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
3
0
使用 React 和 Vue 创建相同的应用,他们有什么差异?

在工作中应用 Vue 之后,我对它有了相当深刻的理解。 不过,俗话说「外国的月亮比较圆」,我好奇「外国的」 React 是怎么样的。 我阅读了 React 文档并观看了一些教程视频,虽然它们很棒,但...

阿K1225
昨天
4
0
2天闭门培训|以太坊智能合约从入门到实战(北京)

2天培训 16个课时 探寻技术原理,精通以太坊智能合约开发 以太坊智能合约是现在应用的最广泛的区块链应用开发方式,HiBlock区块链社区针对以太坊智能合约的学习特别推出2天闭门研修班,通过2...

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部