⑴ 前端工程师都有用哪些比较靠谱的小工具
1、TakeColor 取色器
对于前端开发来说，和颜色、图片打交道是难免的，有的时候想要在ps外面获取颜色.
2、CoolFormat 源代码格式化工具
CoolFormat，不仅仅适用于前端，因为它支持很多语言源代码的格式化，可以在上面的开始菜单中选择你要格式化的语言种类，这里我选择的是js，然后将一串很乱的js代码粘贴到下面的文本框里面，点击快速格式化.
3、做笔记的小帮手——有道云笔记
其实这有道云笔记不算是小工具了，在这之前，我一直都是用txt记事本记东西的
⑵ 前端开发都需要哪些工具
每个前端开发人员都有自己喜欢的开发工具，用这些工具能让编码更容易并且“令人愉快”。分享一些我认为真的很棒的很棒的Web开发工具！
1.Glitch
https://glitch.com
好的，这不仅仅是一个工具，还是一个非常棒的编码平台以及一个很棒的技术社区。我可以在内置代码编辑器的帮助下托管我的项目。支持多种语言，但最适合NodeJS。
2.Shadows
https://brumm.af/shadows
这个网站提供生成平滑阴影的CSS代码，可以创建平滑的边框阴影。它看起来真的很流畅，令人满意。
3.Coolors
https://coolors.co
这是一款非常好的在线工具，可以为项目生成匹配的颜色方案。如果不喜欢当前的方案，按下空格键，它会重新生成一个配色方案，直到你满意~
4. Blobmaker
https://blobmaker.app
Blobmaker可帮助你随机生成各种尺寸，不同颜色和形状的SVG Blob。你可以用作背景或创建看起来很酷的动画。
5.Getwavs
https://getwaves.io
与Blobmaker相似，Get Waves能够随机生成不同颜色和不同数量的波浪。用作网页的页脚或页眉看起来不错。
6. Undraw.co
https://undraw.co
开放源代码项目的SVG插图集，可用来做登录页面，404页面等，当然普通页面也能用!上面的插图可以不带归属地版权的使用，无需支付任何费用。
7. Marcdown
https://liyasthomas.github.io/marcdown
由Liyas Thomas提供的在线实时的Markdown网页编辑器，它可预览Markdown代码，将其发布到GitHub上。它提供一个非常漂亮的暗黑模式。还可脱机工作，这使得它显得更出色。
8.postwoman
https://postwoman.io
这是Liyas Thomas构建的另一个工具。Postwoman是一个API请求构建工作。开发者可以不使用代理来测试 API。这是一个渐进式Web应用程序，可以保存到桌面来用。它是轻量级的产品，基本上可以是Postman的在线替代品。
9. Screely.com
https://screely.com
它可以帮助你创建超级漂亮的网站截图模型。如果你不是MacBook用户，但需要更好的网站图片作为自述文件，它非常适合我们。
10. CSS网格生成器
https://cssgrid-generator.netlify.com/
这是Sarah Drasner的创建的优秀网站，它使用CSS创建动态网格布局。
以上是10款web前端开发工具分享，希望对你有帮助。
⑶ web前端开发常用工具有哪些
1、jQuery
jQuery由于其无限的教程，没有跨平台/浏览器问题，优秀的用户界面，大量的插件以及它的轻量，快速和快速学习等特点而脱颖而出。超过70％的受访者选择jQuery作为他们的前端库，它是一个快速，轻量级和简洁的JavaScript库，主要用于HTML文档遍历、事件处理、动画和用于快速Web开发的Ajax交互。从本质上讲，jQuery最适合需要快速开发的应用程序。
2、Bootstrap
超过65％的开发者选择Bootstrap作为他们最喜欢的框架来使用，它是一个用HTML、CSS和JS开发的开源工具包。Bootstrap的广泛流行主要是因为它的简单使用、优秀的社区以及大量的文章和教程、第三方插件和扩展、主题构建器等。
3、Angular
如果你打算构建一个动态且强大的单页应用程序，Angular就是你需要的框架。Angular是高度模块化的，因此非常适合与团队分开大型工作，并且使测试和调试变得轻松。功能优先的方法使Angular更加专注于功能，使开发人员的工作更轻松。此外，它还有来自Google社区的出色工具和支持。
4、NPM
NPM是Node的包管理器。借助NPM，开发人员可以安装各种模块进行Web开发，共享和借用软件包，并管理私有开发。它由网站、命令行界面（CLI）和注册表三个不同的组件组成。
5、Webpack
Webpack是现代JavaScript应用程序的模块打包程序，它将前端开发所需的所有资源（如JavaScript、字体和图像）集中到一个地方。如果你正在开发复杂的前端，这特别有用。你可以去通过部署具有的WebPack Web应用程序，以获取有关的WebPack起来和运行。
除了以上工具，还有Sass、React等，根据企业所用工具的不同，你需要掌握的工具也不一样。
⑷ web前端开发工具排名是什么
编辑器: sublime, webstorm, atom, vim等
调试工具: 浏览器自带的devtools，移动端页面远程调试等
构建工具: gulp, grunt, webpack
包管理工具: bower
远程服务器工具: filezilla/shell
工具主要作用就是帮工程师减少工作量，自动化处理，如压缩css, 合并js/css, 上传cdn, 图片优化, 管理jquery等三方库
前端入门操作都是非常简单
1、学习css，这个css没有包含css3，通常我们看到对于web前端工程师要求是要会使用css+div或css+html对界面进行布局，因此 css是辅助html来展示以及布局的，称之为css样式。上面说的css+div中的div就是html主要用在布局上的，div是核心要掌握的东 西。
而且css是一定需要配合div进行使用，所以学css要熟悉掌握position、height、float、width，并对于界面的最大最小、能 使用百分百、margin、overflow、padding等。这些关系到布局样式的一定要能够熟练掌握，实在不明白可以到杭州有码互联咨询 下，有码讲师都是有超过三年以上的项目经历。
2、html是web前端开发工具中最为基础和最简单的，在html中要掌握的有form table、span、p、div、ul li 、font这各类标签。 尤其是table和div，table虽然也能布局使用，但是不方便，通常是用table和数据打交道的。而div是用来布局。
3、学习web前端开发的话要是能够会些java、php等后台语言更是加分了。因为web前端的界面数据都是在后台那过来的，要是会后 台语言的话，就更节约时间，不仅知道如何于后台交互数据是最好的，也知道怎么写前端的代码会更加规范。就不会出现写法和后 端的数据不匹配，要重现编写的尴尬现象了。
4、掌握js，也许前面提到的大家都觉得还可以。但一说到js就晕了吧？事实上js的入门非常的简单，只要能够会根据某个name、 或id拿到网页的样式、值和dom。以及会给某些name或id的元素标签赋值、追html、追加数据，在按照逻辑推断。至于效果无疑就 是弹框、跳转、隐藏等。再把这些结合到其他的，代码其实就一点也不不会难了。学会了基础的js之后，其他的方面结合学习资料 多看多用基本上是没问题的。
5、学习jquery.jquery是把js封装了一套的一个js插件。最终就是希望代码简化、操作更方便。jquery入门也不难，它需要学的和 js一样，不同的是换成了jq的代码。其他结合别的学习资料就可以了。
6、最后是学习css3+html5了，这个目前是最流行的了，如果是搞后端的话，在工作里面也不怎么会用到，一般是在网站中出现问 题了，那就需要用到css3+html5去修改一下。
⑸ 前端开发常用哪些工具软件
前端开发的编译器在选择上还是很多的。在学校里，老师主要讲三个前端开发软件：
1、WebStorm
帮助编写HTML、CSS、Less、Sass和Stylus代码，并且支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。但是付费软件。
2、IntelliJ idea
页面很简单，乍一看像是一个记事本，它也确实可以当记事本用。有很多特色插件可以使用，支持多种编程语言的语法高亮显示，具有代码折叠功能。
2、HBuilderX
HBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。
⑹ 现在比较好用的前端开发工具有哪些啊
1. node.js + npm， 这个是前端工具的一个平台，没有他们就没有以下的工具，建立开发环境，下载开发工具，运行开发工具的利器
2. bower, 库依赖管理器，类似于npm，但针对浏览器JavaScript的依赖管理，减少寻找库，下载库和升级库的烦恼
3.grunt，流程自动化管理工具，将你非编程的开发步骤减到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5无尽地狱，发布和开发各种无压力。以下大部分开发工具，都有grunt的相对应的插件，也就是说他们都能利用grunt进行自动化运行
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文件大小更小。