前端开发都有哪些工具可以提高效率

Posted 2023-03-27

掘金 Chrome 插件

Vue.js devtools 。 Chrome 开发者工具扩展，用于调试 Vue.js 应用。

React Developer Tools，可以在 Chrome 和 Firefox 开发者工具审查 React 组件的浏览器扩展。

AngularJS Batarang  ，是适用于 Chrome 的 AngularJS WebInspector 扩展。AngularJS Batarang 是开发者工具扩展，用来调试和分析 AngularJS 应用。

ng-inspector for AngularJS

EnjoyCSS ，能够通过图形化的界面帮助你在线生成 CSS3 代码，可谓前端开发者的一大利器。

LiveReload ，会监控你指定的目录中文件，如果有文件被更改，它就自动触发浏览器刷新页面，这样我们不用每次修改文件后，都要去按下 F5 刷新页面。

jSonView，很方便地帮助你验证和查看 jSON 文档。

User-Agent Switcher for Chrome，有了 User-Agent Switcher for Chrome，只需要一个浏览器插件，你可以随时更换 UA，测试网页的自适应情况，能够帮你很好地提高开发效率。

Page Ruler， 能够帮你快速查看网页中某个具体控件或者整个网页具体尺寸的情况，测量网页元素，再也不用打开占据大片空间的「检查元素」窗口了。

工具只是我们开发过程中的辅助工具，探索好用的工具的同时，提高我们自己的实力才是真的。

参考技术A 请学习gulp，更高级的可以结合webpack。
想不手动刷新浏览器，请学习browser-sync。 参考技术B 前端开发需要熟练掌握js语言，没有工具可以替代。 参考技术C Dreamweaver sublime 等等……

前端开发工具都有哪些

前端开发工具是开发必不可少的，现在的开发工具功能很强大，但是还是有一些不同，下面详细介绍一下，看看哪款适合你

HBuilder

HBuilder工具是支持一些html和js等开发，主要编写一些c和web等语言，最大的优势就是速度比较快，强大的代码提示和代码输入，大大增加了开发者的开发效率。

Sublime Text

编辑器里边支持emmet比较好的的唯一一款。多功能插件，还可以自定义键绑定，功能有很多，包括多选择和多窗口和python api等功能，为开发者提供了开发方便。

webstorm

js开发工具，web前端开发神器，功能十分强大，界面清晰，人性化设计，使用方便。

所有编辑器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款。

phpstorm

测试后端 API 接口时非常好用。GET、POST、DELETE、OPTIONS、PUT 这些方法都支持。

idea

phpstorm、idea包括所有webstorm的功能。只是phpstorm是针对phper的，idea是针对javaer，webstorm针对前端er。 

Prettier Playground

代码格式化工具，支持格式化 JavaScript 代码，包括 [ES2017]、[JSX]、[Angular]、[Vue]、[Flow]、[TypeScript] 等。

IDE 大多支持 Prettier 工具， 也有在线版本，可以在浏览器里格式化代码。

Dreamweaver

Dreamweaver是一款网页代码编辑器，利用一些前端代码对网页进行快速的开发，可以通过智能搜索引擎对网页进行访问，开发者可以直观的开发减少出现的错误。

参考技术A 1、精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器；

2、熟悉JavaScript，了解ECMAScript基础内容，掌握1到2种js框架，如JQuery； 参考技术B 1、Bootstrap
Bootstrap是快速开发Web应用程序的bai前端工具包。它是一个CSS和HTML的集合，它使用了新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
2、蓝湖
蓝湖用于查看标注和切图下载非常方便
3、Cloud9IDE
Cloud9IDE是一个基于Node.JS构建的JavaScript程序开发WebIDE。它拥有一个非常快的文本编辑器，支持为JS，HTML，CSS和这几种的混合代码进行着色显示。Cloud9IDE还为node.js和GoogleChrome集成调试器，可以在IDE中启动、暂停和停止。
4、Notepad++
Notepad++是一款非常有特色的编辑器，是开源软件，可以免费使用。我们开发人员都是必备的。支持的语言:C,C++,Java,C#,XML,HTML,PHP,Javascript!
5、VisualStudioCode
VisualStudioCode是一个运行于OSX，Windows和Linux之上的，针对于编写现代web和云应用的跨平台编辑器。
6、GIMP
GIMP是GNU图像处理程序(GNUImageManipulationProgram)的缩写。包括几乎所有图象处理所需的功能，号称Linux下的PhotoShop。GIMP在Linux系统推出时就风靡了绘图爱好者圈。
7、SecureHeaders
SecureHeaders是Twitter送给Web开发者的一份大礼，作为一款Web安全开发工具，Secureheaders能够自动实施安全相关的header规则，包括内容安全政策(CSP)，防止XSS、HSTS等攻击，防止火绵羊(Firesheep)攻击以及XFO点击劫持等。
8、Fontello
Fontello是个图标字体生成器。这个工具允许用户把这些图标web字体放到自己的项目中。主要特性如下：缩小字形集合，减小字体大小;合并一些字体标记到单个文件中；访问大量专业级的开源图标。 参考技术C Adobe Dreamweaver CC、baiAtom、Sublime Text、Brackets、WebStorm 11、Notepad++、HBuilder、Beyond Compare