前端开发必备工具-网页调试工具

转载 2015年11月17日 23:40:09


前端开发必备工具-网页调试工具

在前端开发中我们经常会要调试页面,主要html、css调试和js调试,这里整理一些工具:

一、firefox网页调试插件

1.firefox插件Firebug

主要用于html、css的调试和js调试;推荐指数:


从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码;要编写精致的CSS样式表展示每个页面模块;要调试javascript给页面增加一些更活泼的要素;要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面,才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员,在这里为大家介绍一款轻巧灵活的辅助开发工具。(转载请注明出处:WEB前端开发 http://www.css88.com/)
介绍下载请参见: http://www.css88.com/archives/130

 

2.firefox插件Web Developer 1.1.6(最新版本,中文版)

主要用于html、css、js的查看和编辑;推荐指数:
Firefox上开发和调试web站点的不二之选。Web developer toolbar包含了一系列工具,从cookie管理到CSS调试,从导航线到屏幕标尺,功能简直是多得说不完。
仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口,就能一窥它的强大。推荐网页开发者和网页设计者使用,能够帮助你方便的对页面进行调整和完善;

介绍下载请参见:http://www.css88.com/archives/417

 

3.firefox插件JavaScript Debugger Venkman:

主要用于JavaScript调试;推荐指数:
一个基于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调试器既是一个图形,也是一个控制台调试器。下载并安装Venkman JavaScript调试器后,就可以通过“工具|Web开发|JavaScript调试器”菜单启动它。这个附加产品允许你查看和调试位于源文件或网页中的JavaScript.(转载请注明出处:http://www.css88.com)
Venkman相关下载:https://addons.mozilla.org/zh-CN/firefox/addon/216

 

二、ie网页调试插件

 

1.SuperPreview微软的网页开发调试利器


主要用于html、css的调试和各个浏览器(目前只能针对IE6-IE8)的页面呈现测试;推荐指数:


SuperPreview 是微软将推出的 Expression Web 3 的一部分,主要用于页面的调试,目前的 Expression Web SuperPreview 允许用户对比他们的站点在 IE 6 与 IE 7, IE 8 中的外观,而在将来的完整版中,还将支持 Firefox, Safari, Google Chrome(可能)以及更多浏览器;
介绍下载请参见:http://www.css88.com/archives/760

 

2.Internet Explorer Collection让你同时拥有IE1-IE8
主要用于Internet Explorer 浏览器(IE1-IE8)各个版本的页面呈现测试;推荐指数:
Internet Explorer Collection可以使你的计算机同时安装IE1-IE8,不过这个工具对vista系统支持不是很好,最近还有一个发现,Internet Explorer Collection和IE8正式版似乎有冲突,IE8正式版的下拉框会不能使用,提示“阻止了什么弹出窗口…”,尝试了几百次无法解决,最后我卸载了Internet Explorer Collection,这个问题就再也没出现过。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/687

 

3.IE Developer Toolbar及IE8 开发人员工具

主要用于html、css的调试和js调试;推荐指数:

虽然这玩意改了时髦的名字,但是却也不是什么新玩意,它的前身是“IEdevtoolbar”。但是,以前只是IE的一个插件而已。而在IE8中,浏览器已经自动集成了这玩意,不仅改了个有点土鳖的名字,而且功能也加强了很多。开发人员工具在IE8的工具菜单下,或者直接点击F12快捷键也可以呼叫出来。(转载请注明出处:http://www.css88.com)


微软的英特网探索者开发工具条是IE上最好的DOM检查和CSS调试工具。由于IE具有高市场占有率而又在整个渲染模型上充满缺陷(比如臭名昭著的hasLayout边距重叠BUG),调试IE是web开发必不可少的步骤——没有这个工具条,IE的调试将会成为一场噩梦。虽然IE Developer Toolbar要比Firebug稍微弱智一点,不过他至少能帮你驯服IE这头怪兽。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/1005http://www.css88.com/archives/1008

4.IE下的调试工具IE WebDeveloper

主要用于html、css的调试和js调试;推荐指数:


IE WebDeveloper可以让你检查和编辑你的HTML DOM, 显示错误信息, 日志信息, 显示网站源代码, 监视DHTML事件和HTTP流量. 如果你是一个开发人员或设计人员, 但平常又喜欢使用IE, 那IE  webdeveloper是个不错的选择.它的功能可以和火狐下的Firebug相媲美,甚至有些功能还强于Firebug。
IE WebDeveloper允许直接地在浏览器窗口中浏览、传输和更新HTML DOM。该软件可以实时分析网页并且显示为一种允许你察看表格风格、Javascript脚本,表格以及其它网页元素的树形风格。该软件还可以在浏览器中交互式地突出显示被选择的网页元素,因此你可以在实际网页中定位其代码。 查看style元素,定位div等等。且支持一键w3c检查(包括HTML/XHTML/CSS/Javascript tutorial等)。虽然用起来不如Firebug那么得心应手,但是毕竟解决了我们在ie上调试工具不足的问题。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/967

 

5.IETester-同时拥有IE6、IE7、IE8(Vista兼容)

主要用于Internet Explorer 浏览器各个版本的页面呈现测试;推荐指数:


虽然以前我写过IE6、IE7、IE8共存的解决方案,但是看到IETester这个软件以后那些都已经没有意义了(那些办法副作用比较大,而且实现起来有些难度)。使用IETester能够较好的解决,测试网页兼容性的多IE版本的需求。暂时已经支持IE5.5——IE8beta1,我想这已经足够了。还在苦苦找寻IE6和IE7共存或者IE7和IE8共存的朋友,可以试试这个软件。当然这个软件也不是万能的,在最后,官方非常厚道的给出了暂时存在的重要bug列表。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/345http://www.css88.com/archives/564

 

6.前端调试利器DebugBar

主要用于html、css的调试和js调试;推荐指数:

前端调试工具有很多,比如FireFox firebug, FireFox Web Developer, DOM Inspector,遨游的PageView,IE WebDeveloper V2,还有IE8自带的开发工具 等等,这里我再推荐一个DebugBar;
大家肯定都知道ieTester(点击查看ieTester相关信息),大家都用ieTester来测试各个IE版本的页面兼容性,其实新版的ieTester(点击下载目前最新版的ieTester v0.3.2 )还有一个很强大的页面调试插件:DebugBar。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/785

  

7.用vs2008调试Javacscript

主要用于js调试;推荐指数:



面对一大段的JavaScript脚本,以前总是会很头疼,找不到调试这些代码的方法。如果出现什么错误或异常,总是要从头分析,然后插入很多Alert(),调试起来很麻烦。
Visual Studio 2008中JavaScript所具有的另外一个特性,是它提供了更加强大的JavaScript调试功能,这使得JavaScript的使用及构建AJAX应用都变得容易很多。同样,这项功能在免费的Visual Web Developer Express版本中和Visual Studio中都具有。(转载请注明出处:http://www.css88.com)
介绍下载请参见:http://www.css88.com/archives/982

 

三、其他调试工具

 

1.用Aptana调试JavaScript教程


主要用于js的调试和各个浏览器;推荐指数:

     

1.       你必须安装firefox浏览器;
2.       到http://support.aptana.com/asap/browse/STU-1769 下载并安装aptanadebugger 及 firebug;这两个都是firefox插件;这样我们就可以调试脚本了。
介绍下载请参见:http://www.css88.com/archives/685

2.Opera Developer Tools
Opera下的DOM,CSS查看工具,类似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/
3.webkit
Safari下的开发调试工具
http://nightly.webkit.org/





Web前端调试工具——神奇的Console

前言       先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:            今天要给大家介绍的是Web前端调试工具,应该...
  • zwk626542417
  • zwk626542417
  • 2014年12月29日 21:18
  • 25705

前端chrome浏览器调试总结

前端chrome浏览器开发者模式的调试方法总结:1.选择箭头按钮;2.手机设备调试;3.Elements的css调试;4.Console控制台调试;5.Sources js资源页面检查;6.Netwo...
  • gl0ry
  • gl0ry
  • 2016年12月28日 23:07
  • 4739

前端调试工具--上

常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏...
  • houbin0912
  • houbin0912
  • 2017年01月19日 19:48
  • 264

web前端性能测试在线工具

web前端性能测试在线工具:WebPageTest
  • aovenus
  • aovenus
  • 2016年06月05日 20:07
  • 998

前端调试工具--下

五.Profiles 这个主要是做性能优化的,包括查看CPU执行时间与内存占用等。 例述如下:原文地址:http://www.smashingmagazine.com/2012/06/12...
  • houbin0912
  • houbin0912
  • 2017年01月19日 19:49
  • 165

移动端前端开发调试

通过移动端使用 Web 服务的比率越来越大,例如淘宝 2014 年双十一,移动端交易份额就达到 42.6%。由此可见,掌握移动端的前端开发和测试是非常有必要的。 本文只介绍与调试有关的内容,至于...
  • bamboolsu
  • bamboolsu
  • 2015年11月18日 00:02
  • 2935

几款web调试工具

只要是设计开发,就需要进行调试,尽管相对来说,前端的调试要简单一些,但使用一些调试工具或插件还是能提高你的工作效率。下面是一些主要用于IE浏览器环境和firefox浏览器环境等的调试工具简介。 一、...
  • High_Mount
  • High_Mount
  • 2011年09月01日 16:43
  • 8579

前端开发浏览器兼容测试工具Lunascape

前端开发浏览器兼容问题,选择好的测试工具,介绍下其中几种使用方法
  • zhangluo123__
  • zhangluo123__
  • 2017年05月15日 16:59
  • 1032

H5开发工具之sublime 和 hbuilder 全方位对比

用过sublime,最后转到hbuilder。一开始的时候hbuilder很多问题,甚至无法媲美sublime。由于hbuilder更新很快,如今都已经算是超越sublime了。对于选择,个人有如下看...
  • LONG_IOS
  • LONG_IOS
  • 2017年02月13日 16:55
  • 5343

10大H5前端框架浅析,让你开发不愁

作为一名在前端死缠烂打6年并且懒到不行的攻城狮,这几年阅过很多从知名到很知名的前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿...
  • jsd2honey
  • jsd2honey
  • 2016年10月13日 12:14
  • 1940
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端开发必备工具-网页调试工具
举报原因:
原因补充:

(最多只允许输入30个字)