前端测试工具Web前端用什么工具调试

Web前端性能测试工具除了Dynatrace Ajax Edition还有什么

随着 jQuery、Dojo、YUI 等框架的兴起让构建 Web2.0 应用更加容易，但随之带来的定位等应用问题也越来越难，尤其是与性能相关的。

dynaTrace Ajax Edition 是一个强大的底层追踪、前端性能分析工具，该工具不仅能够记录浏览器的请求在网络中的传输时间、前端页面的渲染时间、DOM 方法执行时间以及 JavaScript 代码的解析和执行时间，还可以跟踪 JavaScript 从执行开始，经过本地的 XMLHttpRequest、发送网络请求、再到请求返回的全过程。

dynaTrace Ajax 目前有两个版本，免费版和商业版，它们之间的区别可查看 版本比较，本文主要是针对免费版本的介绍。

在 3.0 之前的版本只支持运行在 IE 浏览器下，包括 IE6、IE7、IE8， 在 3.0 Beta 版之后可同时支持在 IE 和 Firefox 浏览器上的性能跟踪。

前端工程师都有用哪些比较靠谱的小工具

1.node.js + npm， 这个是前端工具的一个平台，没有他们就没有以下的工具，建立开发环境，下载开发工具，运行开发工具的利器 2. bower, 库依赖管理器，类似于npm，但针对浏览器JavaScript的依赖管理，减少寻找库，下载库和升级库的烦恼 3.grunt，流程自动化管理工具，将你非编程的开发步骤减到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5无尽地狱，发布和开发各种无压力。

以下大部分开发工具，都有grunt的相对应的插件，也就是说他们都能利用grunt进行自动化运行 4.liveReload, 本来是一套解决方案，自从grunt watch出现后，我们只要安装他的chrome或者firefox插件就行了。

它的目的很简单，只要发现目标文件中有任何一个文件有改动，立刻通知浏览器刷新页面，这样就免除了手动按F5。

如果和grunt watch合用，就是只要发现任何文件有改动，立刻运行自动化流程中的所有任务，然后通知浏览器刷新。

5. 本人用less比较多，因为基本无缝兼容历史遗留系统中的css，（而Sass语法比较特殊，还没有专门用过，应该开发新系统的css比较好），一套css预编译语言，可以把less语法转成css语法，lessc是less语言编译器，配合grunt less，编写大型css文档毫无压力。

6.Phantomjs，没有界面的浏览器，用js脚本控制其操作网页。

测试，抓图，网页流程自动化利器。

配合casperjs的语法简化功能真强库后，控制Phantomjs就更加容易了 7. grunt PhotoBox, 利用phantomjs抓图功能和ImageMagick图片比较功能，在利用live-reload即时刷新功能，可以让你开发css的时候，快速对n多个页面进行观察，看其前后变化。

不过缺点也比较明显，就是速度慢。

但比起手动对比来看，还是非常快的。

值得css开发时拥有 8. phantomCSS，这个和grunt photobox类似，都用于css开发的，差别是photobox是全局观察差别，而这个是单元组件观察差别，它方便你就抓页面中某一块元素然后进行前后比较，更加注重细节上的差异，这个比较合适组件开发时候使用。

9. jshint，帮助你快速定位JavaScript的语法错误和潜在的跨浏览器兼容性问题。

在部署你JS前，用jshint检查一下是没错的 。

10.UglifyJS，压缩JavaScript代码，使你的JS代码可以更加快速的加载。

有grunt的插件 11. browserify允许你在浏览器里面使用CMD标准模块，但本人认为它的另外一个优势是合并代码，开发时候可以把代码模块化，分成很多很多小文件，然后有调理的放到相对应文件夹下，然后最后合成单一文件。

本人曾经利用browserify开发greasemonkey代码，大大简化了greasemonkey的开发难度和增强了greasemonkey代码的质量。

browserify有grunt插件，这样又减少的开发步骤。

12. Karma， google开发的一个单元测试运行器，这个自己本身不是一个单元测试框架，而是配合测试单元框架的一个工具。

由于前端浏览器众多，就算你有live-reload这样自动化工具，但是还是要手动打开各种浏览器，手动把你的单元测试在各个浏览器都运行一遍。

这个工具目的是目的就是让电脑能自动化打开各种浏览器，然后把单元测试在个个浏览器中自动运行一遍，让这个步骤也能自动化了。

13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin实际上背后使用的是clean-css工具，这个工具就是用来压缩精简css的，让css文件大小更小。

还有些有名气的工具，应该不错，但是自己没有用过，所以也就没有提，但可以参考一下 yeoman 项目初始化工具 buddy.js 魔术数字检查器 Image minifier.压缩图片工具 html-minifier html压缩 jade html预编译语言 jsdox JS代码注释文档生成器 jscs JS代码风格检查器

前端开发使用哪些工具来测试代码的性能

Chrome有一个插件叫PageSpeed，谷歌官方出品。

以当前页面为例存在下面的问题 Suggestion Summary Click on the rule names to see suggestions for improvement. Minimize payload (M)Serve scaled images, (L)pression, (L)Minify HTML, (L)Optimize images Minimize delay in page load (L)Avoid CSS @import, (L)Minimize request size, (L)Specify image dimensions, (L)Specify a character set Other (L)Leverage browser caching/app/?L)Enable Keep-Alive, (L)Remove query strings from static resources, (L)Specify a Vary: ept-Encoding header HML分别代表问题的严重程度，高、中、低

前端工程师都有用哪些比较靠谱的小工具

你好 很高兴回答你的问题 主要有： Fetcher: 一个 HTTP Client，可以发送各种 HTTP 请求，用来调试 API 很方便 Charles: Mac 下的 Fiddler，比 Fiddler 还好用些，目前不支持 Retina 屏幕 Frank DeLoupe: 支持 Retina 的屏幕拾色器 xScope: 每个前端工程师心中都有一把尺 Kaleidoscope: 最好用的 Diff 工具 iA Writer: Markdown 写文档的工具，开始写文档的那天就是一个前端工程师走向成熟的标志 Tower: Git 的 GUI 工具，支持 GitHub，而且比 GitHub 自己的客户端功能要强大，推荐使用 Git 又对 terminal 命令没有强迫症的人使用 Dash: 各种语言和工具、框架的文档Fetcher 替换成了 Postman: 尤其是 Packaged App 的版本，功能上比 Fetcher 有很大提升 iTerm2 + oh my zsh: 终端其实对前端开发并不是必须的东西，完全不用也有各种 GUI 工具可以帮助你完成任务，但是用过的人才知道这个看起来最原始的东西却能极大提高生产力。

Skitch: 其实截图工具在 QQ 有了 Mac 版本之后就不是那么重要了，但是 Skitch 却始终在我的工具名单上，除了强大的标注功能外，还能和 Evernote 整合，一旦习惯了就很难离开。

ControlPlane: 最初用这个 app 是想在不同的 Wi-Fi 环境下自动切换 location 达到不用手动切换代理的目的，后来发现这个 app 的功能非常强大，拿来模拟各种网络环境、切换测试网络等等都是可以的

前端工程师必备的最佳开发工具有哪些？

过去几年一直不断地提到 Web 应用新世代的成长，这些 App 内容变得越来越丰富，带动了前端整体的复杂度大幅增加。

像是 Backbone(藉由提供模型)、AngularJS 和 EmberJS 框架都是创造新 App 非常好的框架，增强了所有 Web 的功能;同时，Web 程式语言 Javascript 在普及度和成熟度上已经进步了非常多，而且还能和 NodeJS 在后端协同工作。

但为了能持续面对复杂度的新挑战，开发者已经创造更多工具使整体开发过程更加流畅，从测试框架到分析工具，这些成熟又有用的工具把最棒的体验带给我们的使用者。

就如同刚刚所提到的，我们喜欢能够帮助我们提供最棒品质的软体，同时也能使得生活变得更加简单方便，本文要分享给大家 5 个我们每天面对挑战所使用最棒的工具和框架： Chrome dev tools 这是目前最好的前端开发工具! Chrome 自从它诞生后，就已经大量投资在开发者工具软体，至今仍不断的在改善它，每一个发布会(每六周一次)都会伴随着它自己的全新开发功能。

这个开发工具是一个完整的多元软体套件，你可以实时编辑 DOM(HTML)/CSS，当进行一个深入的效能分析时，可以一步步找出 Javascript 的错误，甚至能增加终端机指令。

感谢有它，近来解决了回报效能的问题。

DOM/CSS 编辑器是非常强大的工具，能即时回馈给你的团队，能够在 UI/UX 的新功能上很快地执行迴圈。

官方网站和 Google Developers YouTube 管道都是资讯的金矿，比如说，命令列的 API(应用程式介面，Application Programming Interface)包含非常多有用的指令，比如说从控制台功能中的复制指令，复制到剪贴簿上。

许多详细的使用手册同样在 HTML5 Rocks 里都能参考。

如果你的好奇心很强，并且想了解浏览器究竟是如何运作的，那么你会在这些教学里学到很多东西，帮助你全面掌控开发周期。

除了上述的之外，最重要的是，透过网络工具你能知道现在在介面之下到底发生了什么事情，以及优化你的下载速度，时间轴会以更深入的角度来告诉你浏览器做了哪些事情。

如果你跟我们一样充满好奇心，你可以学到更多关于浏览器、Web 是如何运作的，如此一来，你就可以反过来完整的操控应用程式的生命周期。

以我个人观点来说，如果它们依照现在的路线持续发展下去，肯定会变成 Web 供应开发商最终的IDE(Integrated Developer Environment)，最强大的放入整合发展空间。

Grunt 说到工作自动化，Grunt 是我们的首选。

它是 Javascript 跑任务的专家，针对一般的任务提供大量整合性的外挂程式，扩展程度仍很高，提供很多选项让你能够自由的写任何符合需求的工作内容。

最棒的是，你能够将这些任务结合创造更强大而复杂的工作。

Grunt 的范畴超出仅仅是自动化前端相关的工作，举例来说，当我们在开发时，我们利用它来测试 PHP： 我们同样也用它暂时解决在 Vagrant 中自动监测与保护的 rsync(Unix 下的一款应用软体)一些效能问题，这是近来才被引进的方法。

Grunt 提供很广泛的外挂程式，从浏览档案夹、诊断讯息、编译程式到最简化你的程式码。

它的句法是一致且容易学习的，可以让琐碎的工作变得简单。

LiveReload 你有没有算过，每天平均有多少次会按键盘上的重新整理键呢?非常多，对吧! LiveReload 是一个简单的 Web 协议，不论档案在哪时候被修改而触发事件，客户都能自行处理事情;客户端和伺服器端都能进入各种不同的实作。

说到 Chrome 的扩充功能，Chrome 商店就是一个很强大的例子。

去体验看看吧，你一定能发现很多让生活变得更简单的东西。

以下几个是我们最喜欢的： 1. WhatFont：你可以透过它知道在任何网站上内容的字型是什么，当你在找最适合的文字编排时，或是重新调整美化你的字型风格时，它是非常好用的小工具。

2. Page ruler：另一个很好用的应用程式，主要是因为任何前端开发者，都对像素要求百分之百的完美。

3. Proxy SwitchySharp：说到找出在地化资讯错误最佳的工具就非它莫属，在地化资讯是哪些?比如说电话号码、预设货币等等。

想知道更多吗?在 Chrome App 中你能得到更多资讯! Mocha/Chai/Sinon 测试测试，测试到你很想吐吗?这是很常发生的，因为需要一大堆引导指令，而且在前端开发的初始阶段没有设??计好测试，那么后面的工作往往会变得非常困难。

很幸运的是，我们现在有很棒的测试架构，就和你已经在使用的其他语言一样，非常的有用和强大。

两个主要的框架是Jasmine 和 Mocha。

过去我两个都有使用过，最终选择了后者，Mocha。

它最主要的优势在于，当你必须和非同步的编码一同运作的时候，在 Javascript 的发展中它最普遍使用的方法。

比如说，举一个非常简单的例子，这里有两个不同的规格，一个由 Jasmine 写，另一个则是 Mocha/Chai： Jasmine 的句法选择是预设的，并以官方的文档作说明，非官方的扩充功能增进了 Jasmine 非同步特色，提供和 Mocha 一样的功能。

花一些时间，来了解这个范例以及观察 Mocha 的语法有多清楚。

不像 Jasmine，Mocha 只提供行为的测试架构，更多关于 BDD(Behavior-driven development)，而不是假物件(mock，主要存在的目的是协助单元测试程式可以顺利进行)或是断言(assertion，放在程式中的一阶逻辑，如果一个结果为真或为假的逻辑判断式)架构，因为它整合专用架构非常棒，就像是 Chai 和 Sinon，几乎没什么不好的地方。

Sinon 有完整的功能来 mock 假物件和 stub 假物件(用途和 mock 很接近)。

举例来说，你可以如何评估的方法，一直以来都使用 Sinon 的间谍类型(撷取自很杰出的文档)： Chai 的功能是在断言这方面是非常杰出的，以和平常的语言非常相似的语法，举例来说你可以看到以下的程式码，就知道它很清楚简单： Karma 最后一个是 Karma，Karma(一个测试程式是否符合需求的测试工具)是 Javascript 的程式测试工具，由 AngularJS的团队写的，现在你可以徜徉在 Mocha、Chai 和 Sinon 中写测试程式，何不同时用它们持续地测试、跑程式，给你实时的回馈呢? Karma 可以让你从你的工作站到持续整合制造(CI，Continuous Integration)执行你的测试，它能同时发布到多个浏览器(Chrome、Firefox、IE 和 PhantomJS 等等)，除此之外，还能跑你的测试来挑战它们，给予你对你的程式码最大的信心。

当然，我们甚至还没有提到任何文字编辑器，SublimeText 和 Vim 我们都有用，它们是我们生产力最最重要的基础。

然而在做开发的过程中，最真实的快乐就是你第一次写的程式进行监测然后得到结果，这是一种实时的成就感，然后接下来你就能将它们发布到浏览器上。

现在你已经非常有能力成为前端的忍者，在你的开发旅途中已经准备好要迎接每个挑战了。

。

Web前端用什么工具调试

Web前端开发中，为编写高效的HTML/CSS/JavaScript，优化Web前端性能，不可避免要分析HTTP请求头和响应头，调试HTML/CSS/JavaScript。

这时候，我们就需要用到一些Web前端的开发调试工具。

以下的工具，是Web前端工程师最常用的： 1.FireBug 2012年以前，火狐狸几乎是所有前端开发者最喜欢的浏览器，基于FireFox的插件FireBug成了Web前端工程师开发调试网页的首选利器。

2.Chrome Developer Tools 自从2011年FireBug的开发者J.Barton跳槽到Google，负责开发Chrome Developer Tools后，Chrome Developer Tools就有了本质性的变化。

于是，Web前端开发工程师最喜欢的浏览器又变成了Chrome，Chrome Developer Tools也就顺理成章成为开发调试网页的不二利器了。

3.Fiddler 2 FireBug和Chrome Developer Tools虽好，只是分别针对FF和Chrome，那么有没有针对所有浏览器或者针对HTTP协议的调试工具呢？那就是Fiddler 2了。

这些工具都提供了种类繁多的功能，要完全掌握并非易事。

初学者打开一看，密密麻麻的，往往有无从下手的感觉。

其实呢，工具的使用很简单，无它，唯手熟尔。

初学者有无从下手的感觉，是因为不了解工具背后的原理而已。