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

翻譯 | web 前端開發

我從事網站開發多年，我不認爲保留自己使用的工具會給我在就業市場競爭中帶來強大優勢。

我知道 Web 開發真的會令人沮喪，但是，藉助在線工具，我們可以使工作變得越來越快，提升我們的工作效率。

因此，我很高興分享我使用的工具，這些工具使我的 Web 開發任務更加輕鬆。

1、Metatags.io

在 Google，Facebook 或 Twitter 上查看時，我使用此工具來測試和查看我的網站的預覽。你將完全按照訪問者看到的方式看到網站的標題，描述和圖像。

你也可以上傳你自己的圖片並修改你網站的標題和說明標籤，而無需更改網站上的任何內容。

2、ExtractCSS

我使用此在線工具，主要從 HTML 文檔中提取 ID 元素，類和內聯樣式，並將其輸出爲 CSS 樣式表。除了鍵入或複製 / 粘貼 HTML 外，無需執行任何其他操作，此工具即可完成工作。

3、WhatRuns

這個工具可以幫助我窺視其他站點的主題，插件和服務器信息。WhatRuns 可以安裝在 Firefox 和 Chrome 上，而不會佔用計算機內存的太多空間。

4、Unminify

免費解壓縮或反混淆 JavaScript，CSS，HTML，XML 和 JSON 代碼的工具，使其代碼可讀性強。

5、Octotree

如果你確切知道要查找的內容，就可以使用此工具，請按鍵盤上的 “T” 並立即在存儲庫中搜索文件名，這將節省你一些時間。

6、 優化網站檢索工具

我有時會忘記檢查我的網站元素。當我開始使用此工具時，讓我想起從前端 SEO 到移動網站上要檢查的重要事項。

7、表單填寫器

該工具將方便開發人員測試表單功能。這不僅可以節省你輸入所需詳細信息的時間，而且可以幫助你更快地完成工作。

8、EditThisCookie

老實說，這對於 Web 開發人員來說都是必須具備的工具。我很高興能夠輕鬆修改 Cookie。我喜歡這個工具，簡單易用。你只需單擊一下，即可獲得所有的功能。

9、GTMetrix

一旦解決了所確定的問題，這便使我能夠確定是哪些因素導致我的網站速度下降，並提高了轉化率。有時，這些問題通常與服務器有關，或者與超大圖像，代碼問題以及許多其他可幫助你解決的問題有關。

10、Google Page Speed

我使用此工具掃描任何網站，以查找任何需要改進的後端問題，例如，導致頁面加載速度變慢的原因。

**11、**Browserling

這使我可以在不同的瀏覽器（例如 Opera，Chrome 和 Firefox）中查看任何網站。我還可以更改要訪問的操作系統，例如 Windows 或 Android 技術。

12 、響應式應用設計

該工具旨在幫助你在不同的技術設備上查看網站的外觀效果。當我的工具箱中沒有此工具時，我會一次在不同的設備上檢查該網站。想象一下，我要花多少時間才能完成？而使用此工具可以快速完成。

13、Compressior.io

我使用此工具來減少在手機和 DSLR 相機上捕獲的圖像，因爲默認情況下，它們的文件大小超過 1MB，這對於圖像來說很重。質量保持不變，但大小差異很大。

你可以使用此工具在線優化和壓縮 JPEG，PNG，SVG，GIF 和 WEBP 圖像。

14、DrawKit

我使用此工具在網頁設計中查找免費的矢量插圖。這些設計乾淨，專業，專爲沒有署名的網站而設計。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/iNtOcG6E3Kr5TfAqgAKKNg