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

翻譯 | web前端開發(fā)

我從事網(wǎng)站開發(fā)多年，我不認為保留自己使用的工具會給我在就業(yè)市場競爭中帶來強大優(yōu)勢。

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

因此，我很高興分享我使用的工具，這些工具使我的Web開發(fā)任務(wù)更加輕松。

1、Metatags.io

在Google，F(xiàn)acebook或Twitter上查看時，我使用此工具來測試和查看我的網(wǎng)站的預(yù)覽。你將完全按照訪問者看到的方式看到網(wǎng)站的標題，描述和圖像。

你也可以上傳你自己的圖片并修改你網(wǎng)站的標題和說明標簽，而無需更改網(wǎng)站上的任何內(nèi)容。

2、ExtractCSS

我使用此在線工具，主要從HTML文檔中提取ID元素，類和內(nèi)聯(lián)樣式，并將其輸出為CSS樣式表。除了鍵入或復(fù)制/粘貼HTML外，無需執(zhí)行任何其他操作，此工具即可完成工作。

3、WhatRuns

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

4、Unminify

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

5、Octotree

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

6、 優(yōu)化網(wǎng)站檢索工具

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

7、表單填寫器

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

8、EditThisCookie

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

9、GTMetrix

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

10、Google Page Speed

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

11、Browserling

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

12 、響應(yīng)式應(yīng)用設(shè)計

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

13、Compressior.io

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

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

14、DrawKit

我使用此工具在網(wǎng)頁設(shè)計中查找免費的矢量插圖。這些設(shè)計干凈，專業(yè)，專為沒有署名的網(wǎng)站而設(shè)計。

本文完~