Notice: register_sidebar的调用方法不正确。“边栏1”侧边栏的参数数组中未设置id,缺省为“sidebar-1”。要消除此通知并保持现有的侧边栏内容,请手动将id设置为“sidebar-1”。 请查阅调试WordPress来获取更多信息。 (这个消息是在4.2.0版本添加的。) in /data/htdocs/seven2_blog/wp-includes/functions.php on line 3853
常用前端的调试工具 | Seventwo Blog
Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /data/htdocs/seven2_blog/wp-includes/plugin.php on line 601

常用前端的调试工具

2010-06-21 | 分类: Tools
FireFox 的插件

ColorZilla

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

Web Developer

Web Developer 作为 FireFox 的插件存在,主要功能表现在几个重要的方面:
对页面中的文本、图像、媒体文件进行控制,对网页所应用的CSS文件的id与class辅助查看,表格辅助查看,可以实现修改 CSS文件实时显示出得到的页面效果等等。
Web Developer 插件能够帮助我们对 CSS 网站进行分析,我们使用 FireFox 对网页进行浏览,运用 Web Developer 插件不仅仅只是能看到对方的源代码,还能方便的分析出页面的布局结构,CSS 书写方式,鼠标所在位置的id或class是什么等等,使 我们能迅速的理解、学习别人的成功经验,进而更加方便快捷的掌握 CSS 布局技术。

Firebug

Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和  Javascript 。要查阅文档、截图和论坛请访问Firebug的网站:http://www.getfirebug.com

YSlow

YSlow 是 Yahoo 美国开发的一个页面评分插件,基于 Firebug,  非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。YSlow 从 Firebug 收集当前网页和该网页的访问信息后进行分析,如有必要则给出如何提高页面加载速度的建议,比如减少 DNS 查询,使用外部并压缩 Javascript 等。

Page Speed

Page Speed 是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能,并获得有关如何改进性能的建议。
下载地址:
http://code.google.com/intl/zh-CN/speed/page-speed/download.html

Javascript Debugger

javascript 调试工具,比 FireBug 有更强大的调试功能.
Page Info Forms and Links 在页面信息中增加表单和链接标签

HttpWatch

HttpWatch 是一款强大的网页数据分析工具,集成在 Internet Explorer工具栏,包括网页摘要,Cookies管理,缓存管理,消息头发送/接受,字符查询,POST 数据和目录管理功能,报告输出。
HttpWatch 官方网址 http://www.httpwatch.com/

Fiddler

它还是一个 http 调试代理,它能够记录所有的你电脑和互联网之间的 http 通讯,Fiddler 可以也可以让你检查所有的 http 通讯,设置断点,以及 Fiddle 所有的“进出”的数据(指 cookie,html,js,css等文件,这些都可以让你胡乱修改的意思)。 Fiddler  要比其他的网络调试器要更加简单,因为它仅仅暴露 http 通讯还有提供一个用户友好的格式。

FireShot

fireshot 提供了一套编辑和注释工具,可以让用户快速修改捕获的图片和插入文字和图形说明。这种功能会对网页设计师,测试和内容审评特别有用。 画面可以保存到磁盘(PNG, GIF, JPEG, BMP )的,复制到剪贴板,电子邮箱和发送到外部编辑器作进一步处理。
FireShot 下载 http://screenshot-program.com/downloads.php

Library Detector

探测网页中使用了哪些JavaScript框架,并在状态栏中显示其图标,鼠标悬停在图标上可显示详细信息。目前支持jQuery、jQuery UI、Prototype、Scriptaculous、Dojo、YUI、Qooxdoo、MooTools和Spry。
———————————————————————————————————————————————

Internet Explorer 浏览器

Web Developer、Firebug 、Fiddler 、IE Developer Toolbar、HttpWatch

Microsoft SuperPreview for IE:

Microsoft Expression Web SuperPreview for Internet Explorer是微软发布的一款免费软件,它可以让我们在各个版本 IE 浏览器下调试网站,使得网站在各个版本 IE 浏览器下兼容。通过 SuperPreview For IE,我们可以迅速升级你的网站到 IE8,并且同时兼容 IE6 和 IE7。
http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en

Opera 浏览器

Opera Developer Tools  Opera下的DOM,CSS查看工具,类似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/

Safari 浏览器

webkit  Safari下的开发调试工具
http://nightly.webkit.org/

其它工具:

IETester

又一个整合的IE,不同的是,它创新式的以选项卡的方式显示不同的浏览器版本,并对IE8 Beta1进行了支持,尽管目前IE8 Beta2已经面世,不过我们仍可以坚信等IE8正式发布时,开发成员会及的对IETester进行更新。官方:http://www.my-debugbar.com/wiki/IETester/HomePage

IECollection

看名字便可以知道,又是一个整合版本的IE,可以说它就是Multiple IE的新兄弟,因为它们实在是太像了,只是Multiple IE有些更新的嫌疑,而IECollection的更新速度会让我们惊讶,刚出IE8 Beta 2,IECollection已经进行了整合。官方:http://finalbuilds.edskes.net/iecollection.htm

标签: , , ,