前端开发都需要哪些工具？

Posted 2023-02-28

每个前端开发人员都有自己喜欢的开发工具，用这些工具能让编码更容易并且“令人愉快”。分享一些我认为真的很棒的很棒的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前端开发工具分享，希望对你有帮助。

参考技术A

分享一下Web前端开发用什么软件。

1、Sublime Text

Sublime Text是一个代码编辑器也是html和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。

2、Dreamweaver

Adobe Dreamweaver使用所见即所得的接口，亦有HTML(标准通用标记语言下的一个应用)编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。 访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。使用视觉辅助功能减少错误并提高网站开发速度。

3、Visual Studio Code

Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增php语法高亮。

4、HBuilder

HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。

5、WebStorm

WebStorm 是jetbrains公司旗下一款javascript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

想知道“Web前端开发用什么软件”，通过网上搜索你可以发现很多，而能否很好的借助这些软件完成项目，关键还要看你的技术。

参考技术B 前端 web 开发是一个令人兴奋的领域，越来越多的需求，形成了一个高薪的职业。同时，Web 领域还有很多可靠的工作，使得 Web 开发者能够更加高效的工作。
1. Wappalyzer
这个工具可以让你了解到某个网站是用什么搭建的，即它的内容管理系统、电子商务平台或营销自动化工具。研究如何创建一个网站，这是一个很棒的工具。
2. Window Resizer
响应式设计是现代网站最重要的特性之一。你需要测试你的网站是否可以在各种各样类型的设备上查看。我使用Window Resizer来调整我的网页浏览器窗口的大小，以模拟不同的屏幕分辨率。
3. Marmoset
程序员工作的一部分就是向客户或上级展示他们的代码，但是常规的屏幕截图可能不那么吸引眼球，所以你要让它们变得生动起来。我用Marmoset为我的代码拍了一些很酷的快照，然后把这些快照放在我的幻灯片上，从而给人留下好印象。
4. Web Developer Checklist
作为一个前端开发者，很容易忘记需要做的每一件事。当你在截止时间前急着完成项目的时候，你可能跳过了关键的步骤。这就是 Toptal 的Web Developer Checklist，它可以节省你的时间。
5. Code Cola: Source Code Viewer
如果你使用 Chrome 并且想要在页面上编辑 CSS，那么可以使用审查元素特性（译者注：Google Chrome 浏览器打开网页后，点击右键出现的菜单：Inspect/ 审查），但是它可能太过于灵活。是一个 Chrome 扩展，使用起来容易得多。

这是 Chrome 上最好的 CSS 编辑器，对初学者有特别友好的界面。我已经用了很多次，尝试在我的网页上编辑 CSS。
6. CSSViewer
如果你只需要查看网页上的 CSS 属性，CSSViewer非常棒。只需单击图标并将光标悬停在要检查的任何元素上，就可以看到它的 CSS 属性。
7. JSONView
经常用于那些需要处理数据传输的网站，任何前端开发者都需要掌握并熟悉它。使用 JSON 时，通常需要查看和验证页面上的 JSON 文档。
JSONView是一个简单的工具。多年来，我学到了简单至上，没有比 JSONView 更简单的了。
8. Lighthouse
如今，自动化越来越成为前端开发的必要条件。Lighthouse是一个开源的自动化工具，用于提高网页质量。你可以使用它来检测页面性能、可访问性、搜索引擎优化 SEO 等等。
9. Clear Cache
每当需要清除网页浏览器上的缓存时，通常必须手动转到“设置”页。这是前端开发者经常做的一项任务，用于测试他们正在处理的网页。
用一个 Chrome 扩展来做这件事，更有效率。我一直在使用Clear Cache扩展，只需单击一下就可以完成，避免浪费宝贵的时间。 参考技术C

1: sublime 是个代码编辑器, 有很好扩展能力和完全开放的用户自定义配置与神奇实用的编辑状态恢复功能.

2: webstorm 是一个WEB前端开发神器,功能非常强大(强推)

3: eclipse 就其本身而言，它只是一个框架和一组服务，但他有很强大的插件集,用于通过插件组件构建开发环境, .用来进行扩展.

5: Dreamweaver一个非常经典的开发工具

6: notepad++ 文本编辑器,软件小巧高效，支持27种编程语言;

7: EditPlus 一个功能比较强大的文本编辑器,也支持多种编程语言. 而且他还有文本对比功能.

听说国内有一个HBuilder 很多人用了说不错.也可以了解下.这个我们没用过。

你应该还需要 一个图片转ICO图标 的软件.和 一个取色 软件。

图片处理用Photoshop 作为切图、P图的首选工具

PxCook 这个软件也用到.当你不知道白色背景图要设置宽高为多少好时，PxCook是个不错的选择

以上是给大家的推荐，希望对于你有帮助。

参考技术D 比较流行的前端开发工具主要有WebStorm、Vscode、Sublime、HBuilder、notepad++、EditPlus、记事本等
前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。