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

Posted 2023-04-16

作为曾经的web前端工程师，来答一发。

jsonView Chrome插件



这是一个Chrome浏览器的json视图的插件。这个插件非常强大的，不仅可以把你在浏览器输出的json数据格式化，也可以将浏览器的xml格式的文件格式化，非常非常的方便，尤其是前端同学在查看api数据的时候，无需再去各种json格式化网站逐个匹配了~~~~强烈推荐！！

WebStorm IDE开发工具



这是款前端开发的ide。基本上前端开发中你能想到的，他都可以帮你实现了，语法高亮，代码补全提示，terminal终端连接，mysql操作功能，集成一体，甚至php都可以写，异常的强大，非常重的一个前端开发工具，推荐。

Hbuilder 一个可以云打包html5app的开发工具



Hbuilder是一个国内互联网公司DClound开发的ide，这款ide非常的强大，专门为了Html5所打造的一款ide，如果你不想做原声的android和ios APP，那么你可以通过在Hbuilder上开发webapp，之后通过Hbuilder的云打包打包成自己的apk或者.ipa的文件，一秒钟可以打包你的安卓或者iOS APP。如果你不想云打包的话，你可以本地打包，可以下各种插件，是一款非常强大的免费前端H5的ide，强烈推荐！

SessionBox 可以随意切换你的Session的Chrome插件



sessionBox是一块可以让你随意切换你的session的Chrome插件~ 用户还可以给不同的session设置各种颜色，方便地标识session；SessionBox只对那些把网页的状态保存到session中的才有效果。顺便提供一下SessionBox的官网：https://sessionbox.io   ；对于起那段同学来说，切换Sesssion几乎成了必不可少的一项工作，如果你使用了sessionbox，将会大大的减轻你的工作量，同时这个插件对于后端开发的RD同学也将是大大的帮助。

目前介绍了以上四款工具，建议题主可以尝试一下，都是非常不错的工具，虽然我现在不在是前端，但是对于除了webstorm之外的三款工具我都是经常会使用的；至于我为什么不使用webstorm是有原因的，因为我现在已经是作为一枚后端RD的存在，目前在公司开发机上只能用vim开发~~

参考技术A

做前端攻城狮几年了，在这里推荐一些前端开发中可以是你提高开发效率的小工具，既小巧又方便；

一、看图软件，ACDSee和PicaView

-----------------------------------------------

主要用途：图片及图片属性浏览

ACDSee是非常流行的看图工具之一。它提供了良好的操作界面，简单人性化的操作方式，优质的快速图形解码方式，支持丰富的图形格式，强大的图形文件管理功能等等。

PicaView对单个图片查看特别适合，菜单上会出现这个图形文件的略图、格式、尺寸，还可以直接打印、转换该图片！PicaView支持常见的图像文件格式，另外可挂接各种格式插件和功能插件。

二、开发调试工具，火狐、Firebug插件。

-----------------------------------------------

前端要看网页，浏览器是必备的，但为什么要选择火狐浏览器而不是谷歌、IE、opera、360？首先，IE就不要谈了，360那些国产的也不要提
了，opera 国内使用率并不高。使用谷歌浏览器也是一个好的选择，但是我本人倾向于使用火狐。因为在之前的使用过程中，感觉 chrome
是拿来上网用的，而 Firefox
才是拿来开发用的，特别是下面介绍的一些功能插件都是基于火狐浏览器的。当然谷歌浏览器上面也有一套不错的开发工具。查看选中部分源代码如下图：

这个插件具有非常强大的功能，它把网页的 HTML 结构进行了整理，查看和修改 CSS 也非常方便。这只是基础的功能，还有控制台等可以调试 javascript 等，是前端不可缺少的工具。具体使用方法不再赘述。

三、开发工具，EditPlus

-----------------------------------------------

非常小巧好用的文本编辑器。用来快速高效的搜索修改代码。如果你想修改一点小代码的时候，却要忍受几秒的编辑软件启动时间，那么就用这个吧。无论是
写代码还是修改代码，个人觉得都比那些功能齐全的编辑软件好很多。当然文本编辑器也有很多，但是用了一遍我个人觉得这是最好的。

参考技术B

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代码风格检查器

本回答被提问者采纳 参考技术C 1、TakeColor 取色器
对于前端开发来说，和颜色、图片打交道是难免的，有的时候想要在ps外面获取颜色.
2、CoolFormat 源代码格式化工具
CoolFormat，不仅仅适用于前端，因为它支持很多语言源代码的格式化，可以在上面的开始菜单中选择你要格式化的语言种类，这里我选择的是js，然后将一串很乱的js代码粘贴到下面的文本框里面，点击快速格式化.
3、做笔记的小帮手——有道云笔记
其实这有道云笔记不算是小工具了，在这之前，我一直都是用txt记事本记东西的

如何选择靠谱的web前端开发培训班?

Web前端近几年相对来说比较火爆，且市场需求大，职位薪资高，越来越多的人入行web前端，走上了升职加薪路。出于对学习周期以及学习效果考虑，大部分人都是选择了参加培训班，不过如何选择靠谱的WEB前端开发培训班?今天小u来简要分析一下，让你在这个问题上一目了然。

选择靠谱的web前端开发培训班，其实需要从各个方面来考察，比如说品牌实力、师资水平、课程设置、就业服务等，了解完这些，你就能拥有一双分辨培训班好坏的慧眼。

1、品牌实力

一个培训机构的品牌实力是尤为重要的，具有品牌实力的培训机构在学员就业、师资选择上都有更多保障，其雄厚的资本实力、大规模的培训基地、过硬的教学水平、完善的就业流程等等，都是很多小机构所不具备的，所以说，大品牌意味着强实力。优就业是上市公司中公教育的IT培训品牌，上市公司实力有目共睹。品牌实力相对来说还是很靠谱的。

2、师资水平

毫无疑问，一个培训机构的师资水平决定了其教学质量，这也是培训机构赖以生存的根本，看一个机构的师资水平，我们可以从老师的从业年限、教学经验以及亲身做过的项目来考察。说到这里，就不得不说优就业的大前端讲师团队，由前大型企业web前端开发技术经理、前腾讯网游资深web前端开发工程师、多年互联网从业者组成。妥妥的高学历高资质团队。

3、课程设置

课程方面主要体现在知识点以及项目上，靠谱的培训机构，其课程设置一定是科学合理的，知识点全而新，课程项目契合企业需求，优就业web前端课程是调研了上万家用人企业需求研发而成，每15天调研一次市场变化，每个月对课程模块进行优化，每半年对课程进行一次调整，每年对课程进行升级。真正根据企业需求设置课程，保证学员掌握就业刚需技能。项目实操时间：理论教学时间=6:4，项目贯穿教学始终，每个阶段都要参与大型完整项目设计。

4、就业服务

大部分人选择web培训无非是为了找个工资高前景好的工作，想要知道一个培训机构的就业好不好，过往学员更有发言权，大家在考察的时候，可以看看该机构的就业榜单，有条件的话，也可以咨询一下毕业学员，能真实的了解一个机构的就业实力。优就业有专门的就业团队，负责学员的就业指导与就业跟踪以及终身免费推荐就业，而且不仅包括初次就业有完善服务，二次就业也管推荐，更可以签订就业培训险，未如约就业最高可获赔18000元。

说了这么多，相信小伙伴们对于如何选择靠谱的web前端开发培训班也有了一定的分辨能力，其实不光是上边说的几点需要注意，大家在选择的时候最好能够去到机构实地考察一番，试听一下课程，为大家的选择增添更多的把握，小伙伴们也可以到web学习交流群和其他准备学习或者是正在学习的小伙伴们探讨一下，群里（>>>345648424）有免费的学习资料，可以助力你的学习。

精彩回顾

●回复【GIF】GIF在线编辑工具

●回复【滚动字幕】语音识别滚动字幕

●回复【142】免费下载各种付费课程、最新音乐、电影、电子书籍

●回复【听书】一款让你深爱的听书APP

戳这里，了解更多