14个前端开发人员必备的有用工具

浅浅的花香味﹌ 2023-01-13 09:00 254阅读 0赞

![62c75f65ca24b74f81a455aa08a9e3e9.png][]

英文 | https://javascript.plainenglish.io/14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8

翻译 | web前端开发

我从事网站开发多年，我不认为保留自己使用的工具会给我在就业市场竞争中带来强大优势。

我知道Web开发真的会令人沮丧，但是，借助在线工具，我们可以使工作变得越来越快，提升我们的工作效率。

因此，我很高兴分享我使用的工具，这些工具使我的Web开发任务更加轻松。

# **1、Metatags.io** #

在Google，Facebook或Twitter上查看时，我使用此工具来测试和查看我的网站的预览。你将完全按照访问者看到的方式看到网站的标题，描述和图像。

![de6807478accc0ab41dc5ed26c77f709.png][]

你也可以上传你自己的图片并修改你网站的标题和说明标签，而无需更改网站上的任何内容。

# **2、ExtractCSS** #

我使用此在线工具，主要从HTML文档中提取ID元素，类和内联样式，并将其输出为CSS样式表。除了键入或复制/粘贴HTML外，无需执行任何其他操作，此工具即可完成工作。

![6117bd67cdf7c3c0c312608184f8d5de.png][]

# **3、****WhatRuns** #

这个工具可以帮助我窥视其他站点的主题，插件和服务器信息。WhatRuns可以安装在Firefox和Chrome上，而不会占用计算机内存的太多空间。![a386b7855acad6c338688779060fdf30.png][]

# **4、****Unminify** #

免费解压缩或反混淆JavaScript，CSS，HTML，XML和JSON代码的工具，使其代码可读性强。

![2525dd8963904493f56c5de0cf736a9c.png][]

# **5、****Octotree** #

如果你确切知道要查找的内容，就可以使用此工具，请按键盘上的“ T”并立即在存储库中搜索文件名，这将节省你一些时间。

![9ea2a80cb25d68cd9978adfe5cc625b3.png][]

# **6、 优化网站检索工具** #

我有时会忘记检查我的网站元素。当我开始使用此工具时，让我想起从前端SEO到移动网站上要检查的重要事项。

![4740ab02b36656ef70451292d9c8f617.png][]

# **7、表单填写器** #

该工具将方便开发人员测试表单功能。这不仅可以节省你输入所需详细信息的时间，而且可以帮助你更快地完成工作。

![ab5b02eef45961df59b10189e0fe1bbc.png][]

# **8、EditThisCookie** #

老实说，这对于Web开发人员来说都是必须具备的工具。我很高兴能够轻松修改Cookie。我喜欢这个工具，简单易用。你只需单击一下，即可获得所有的功能。

![3bd281c0d5288169186ef4e0828cfa38.png][]

# **9、GTMetrix** #

一旦解决了所确定的问题，这便使我能够确定是哪些因素导致我的网站速度下降，并提高了转化率。有时，这些问题通常与服务器有关，或者与超大图像，代码问题以及许多其他可帮助你解决的问题有关。

![cd9bad7b77f8956fcc6a7115ee3f9eea.png][]

# **10、Google Page Speed** #

我使用此工具扫描任何网站，以查找任何需要改进的后端问题，例如，导致页面加载速度变慢的原因。

![49fcffc169dcc8c0fb1b585a2614c808.png][]

**11、****Browserling**

这使我可以在不同的浏览器（例如Opera，Chrome和Firefox）中查看任何网站。我还可以更改要访问的操作系统，例如Windows或Android技术。

![91cc0c7e8df935a5cb4e718ad5237d29.png][]

# **12 、响应式应用设计** #

该工具旨在帮助你在不同的技术设备上查看网站的外观效果。当我的工具箱中没有此工具时，我会一次在不同的设备上检查该网站。想象一下，我要花多少时间才能完成？而使用此工具可以快速完成。

![6378e21e77790b7cee9cb18daefa70d1.png][]

# **13、Compressior.io** #

我使用此工具来减少在手机和DSLR相机上捕获的图像，因为默认情况下，它们的文件大小超过1MB，这对于图像来说很重。质量保持不变，但大小差异很大。

你可以使用此工具在线优化和压缩JPEG，PNG，SVG，GIF和WEBP图像。

# **14、DrawKit** #

我使用此工具在网页设计中查找免费的矢量插图。这些设计干净，专业，专为没有署名的网站而设计。

本文完~

[62c75f65ca24b74f81a455aa08a9e3e9.png]: /images/20221022/399c5a7179a74fa6b0b8585a2f90547d.png
[de6807478accc0ab41dc5ed26c77f709.png]: /images/20221022/0e2a1f3023134bf48b29a06df3fb492b.png
[6117bd67cdf7c3c0c312608184f8d5de.png]: /images/20221022/24a3790ab4674f2db67d0affff17b19a.png
[a386b7855acad6c338688779060fdf30.png]: /images/20221022/fb2cca3c82c34b7fac884371a950255b.png
[2525dd8963904493f56c5de0cf736a9c.png]: /images/20221022/3bae7b4e7da9493e97be115bdbdfed80.png
[9ea2a80cb25d68cd9978adfe5cc625b3.png]: /images/20221022/1367d2a85bc84038aceba270012fd955.png
[4740ab02b36656ef70451292d9c8f617.png]: /images/20221022/05178607b662428bab050f4f57255c96.png
[ab5b02eef45961df59b10189e0fe1bbc.png]: /images/20221022/089d8b0361754e458ffdda804cfe6c61.png
[3bd281c0d5288169186ef4e0828cfa38.png]: /images/20221022/68c1872010b347e8a5ffd956bcd3666f.png
[cd9bad7b77f8956fcc6a7115ee3f9eea.png]: /images/20221022/42f3d99b62a846b5a50bd22de8b19141.png
[49fcffc169dcc8c0fb1b585a2614c808.png]: /images/20221022/9b24e777a91b4ef5b8d2c794ff3710e6.png
[91cc0c7e8df935a5cb4e718ad5237d29.png]: /images/20221022/43de152816eb41a9a6706a7a8428a359.png
[6378e21e77790b7cee9cb18daefa70d1.png]: /images/20221022/48e87e935d134e498766f8826a7bf6ff.png