50個能幫你節省時間的開發工具

時間  2020-10-27
標籤 css 前端 git 程序員 github web 面試 正則表達式 chrome shell 欄目 CSS 简体版
原文   原文鏈接
做者：Iain Freestone

翻譯：瘋狂的技術宅css

原文：https://dev.to/iainfreestone/...前端

本文列舉出 50 個可以幫你提升開發效率，節省開發時間的 Chrome 擴展和 Web 應用，它們頗有可能會在何時派上用場。老規矩，先轉發、點贊、點再看三連，最後再慢慢閱讀，千萬別讓它在收藏夾裏吃灰。git

1. Whatruns

一個免費的瀏覽器擴展程序，只需單擊一下按鈕，就能幫你識別當前網站上所使到的技術。程序員

官網：https://www.whatruns.com/github

Whatruns

2. Sizzy

開發人員專用的瀏覽器。能夠幫你節省時間，加快開發流程web

官網：https://sizzy.co/面試

Sizzy

3. Log Rocket

LogRocket 使你能夠重播用戶在你站點上所作的操做，從而幫你重現錯誤並更快地解決問題。正則表達式

官網：https://logrocket.com/chrome

Log Rocket

4. Sentry

Sentry 的應用監視平臺幾乎能夠爲全部的開發人員提供幫助，它可以診斷、修復和優化你代碼的性能。shell

官網：https://sentry.io/

Sentry

5. Can I Use?

"Can I use"提供了最新的瀏覽器支持表，能幫你檢查支持臺式機和移動 Web 瀏覽器上的前端 Web 技術。

官網：https://caniuse.com/

Can I Use?

6. Prettier

一個代碼格式化程序，支持多種語言，可以與大多數編輯器集成。

官網：https://prettier.io/

Prettier

7. CSS Scan

讓你與「檢查元素」再見。它能當即檢查懸停的任何元素的 CSS，而且只須要單擊一下便可複製其整個規則。

官網：https://getcssscan.com/

CSS Scan

8. Bundlephobia

幫你檢查把 npm 包添加到 bundle 包中所須要花費的代價，

官網：https://bundlephobia.com/

Bundlephobia

9. Cypress

對瀏覽器中運行的全部內容進行快速、輕鬆和可靠的測試。

官網：https://www.cypress.io/

Cypress

10. Unminify

用於壓縮、解壓縮、反混淆 JavaScript，CSS，HTML，XML 和 JSON 代碼並加強可讀性的免費工具。

官網：https://unminify.com/

Unminify

11. RegEx 101

基於 PCRE 的免費正則表達式調試器，具備實時說明、錯誤檢測和突出顯示的功能。

官網：https://regex101.com/

RegEx 101

12. Clear Cache

只需單擊一下按鈕，便可清除緩存並瀏覽數據。

官網：https://chrome.google.com/web...

Clear Cache

13. Window Resizer

經過調整瀏覽器窗口的大小來模擬各類屏幕分辨率。

官網：https://chrome.google.com/web...

Window Resizer

14. Wappalyzer

Wappalyzer 是一個可以現網站上所用技術的實用程序。它可以檢測內容管理系統、電子商務平臺、Web框架、服務器軟件，分析工具等。

官網：https://chrome.google.com/web...

Wappalyzer

15. MDN

MDN Web Docs 站點提供有關開放的 Web 技術的信息，包括用於 Web 站點和漸進式 Web 應用的 HTML、CSS 和 API 等技術。

官網：https://developer.mozilla.org...）

MDN

16. Axe

可訪問性測試標準。被 Microsoft、Google 和大量的開發測試團隊所選擇，Axe 是世界領先的可訪問性工具包。

官網：https://www.deque.com/axe/

Axe

17. Git Graph

Visual Studio Code 的 Git Graph 擴展。幫你查看存儲庫中的 Git 圖，並輕鬆地從視圖中執行 Git 操做。能夠隨心配置爲你想要的樣子！

官網：https://marketplace.visualstu...

Git Graph

18. Kontrast-WCAG 對比度檢查器

可以在瀏覽器中實時快速檢查和調整對比度，以知足 WCAG 2.1 的要求。

官網：https://chrome.google.com/web...

Kontrast

19. Octotree

可加強 GitHub 代碼的檢查和瀏覽功能的瀏覽器擴展。

官網：https://chrome.google.com/web...

Octotree

20. Postwoman

Postman 的替代品，可以幫你更快地建立 HTTP 請求，節省寶貴的開發時間

官網：https://postwoman.io/）

Postwoman

21. Responsively App

把開發響應式 Web 應用的速度提升了 5 倍！全部前端開發人員必備的開發工具，使你的工做更加輕鬆。

官網：https://sensitively.app/

Responsively App

22. FullStory

幫你查明本身的用戶在什麼時候、何地產生糾結，以及是怎樣影響你的收入和留存率的。

官網：https://www.fullstory.com/

FullStory

23. gitignore.io

幫你輕鬆的爲本身的項目建立 .gitignore 文件

官網：https://www.toptal.com/develo...

gitignore.io

24. 1Loc

206 個只需單行代碼就能實現的 JavaScript 實用程序。

官網：https://1loc.dev/

1Loc

25. Does it mutate?

它會變異嗎？

官網：https://doesitmutate.xyz/）

Does it mutate?

26. Keycode

獲取任意鍵的 JavaScript 事件鍵碼

官網：https://keycode.info/

Keycode

27. Worth It: 現代 JS 版

用來分析頁面的工具，幫你肯定在使用模塊和無模塊模式時，在現代瀏覽器中下載的 JavaScript 減小了多少。

官網：https://module-nomodule-calcu...

Worth It

28. npmview

一個用於查看 npm 包文件的 Web 應用。

官網：https://npmview.now.sh/

npmview

29. CSS to JS

在 CSS、JS 對象和 JSX prop之間進行轉換。

官網：https://css2js.dotenv.dev/

CSS to JS

30. All Characters

一個簡單的頁面，顯示全部不一樣的字符及其 HTML 代碼。

官網：https://aymkdn.github.io/char...

All Characters

31. Shape Catcher

幫助你查找 Unicode 字符的工具。當你要查找不知道名字的特定字符時很是麻煩。在 shapecatcher.com上，你只須要知道它的大體形狀便可！

官網：https://shapecatcher.com/

Shape Catcher

32. Mocky

在開發時沒必要等待後端代碼準備完畢，用 Mocky 能夠生成自定義 API 響應。

官網：https://designer.mocky.io/

Mocky

33. Explain Shell

寫下命令行並查看與每一個參數相匹配的幫助文本

官網：https://explainshell.com/

Explain Shell

34. Base64 Image

將圖像轉換爲 Base64

官網：https://www.base64-image.de/）

Base64 Image

35. Open Graph Check

在社交網絡上分享內容時，針對目標羣體量身定製的優化預覽能夠顯着提升點擊率。 Opengraphcheck.com 能幫助你作到最好。最棒的是，Open Graph Check 是免費的。

官網：https://opengraphcheck.com/

Open Graph Check

36. Brotli pro

幫你得到更高的壓縮率

官網：https://www.brotli.pro/

Brotli pro

37. Responsive Breakpoints

輕鬆生成最佳的響應式圖像尺寸

官網：https://www.sensitivebreakpoi...

Responsive Breakpoints

38. Is my host fast yet?

用來檢測用戶瀏覽 Web 時所經歷的真實服務器響應延遲。

官網：https://ismyhostfastyet.com/）

Is my host fast yet

39. Check My Links

「Check My Links」是一個連接檢查器，可爬取你的網頁並查找無效連接。

官網：https://chrome.google.com/web...

Check My Links

40. JSON Web Token

對 JWT 進行編碼或解碼

官網：https://www.jsonwebtoken.io/

JSON Web Token

41. Git Kraken

適用於 Windows、Mac 和 Linux 的 Git 客戶端，免費開源。

官網：https://www.gitkraken.com/

Git Kraken

42. BEM Cheat Sheet

即便是最有經驗的 CSS 開發人員，也不會老是當即找到正確的類名，這很快會使你感到絕望。該工具爲你提供一些最多見的 Web 組件的命名建議，幫助你避免在 BEM 的世界中迷路。

官網：https://9elements.com/bem-che...

BEM Cheat Sheet

43. Can I Email

官網：https://www.caniemail.com/

Can I Email

44. CSS Grid Generator

只須要設置數字以及列和行的單位，而後就會爲你生成一個 CSS 網格！能夠經過在框內拖動來建立放置在網格內的 div。

官網：https://cssgrid-generator.net...

CSS Grid Generator

45. Screen size map

設備無關像素的屏幕尺寸比較

官網：https://screensizemap.com/

Screen size map

46. Who can use?

誰可使用這種顏色組合？

官網：https://whocanuse.com/

Who can use

47. Will it CORS?

告訴這臺神奇的 CORS 機器你想要什麼，它將告訴你確切的操做。

官網：https://httptoolkit.tech/will...）

Will it CORS

48. extractCSS

從 HTML 提取 CSS

官網：http://extractcss.com/

extractCSS

49. Shieldfy

在代碼正式投入生產以前，自動識別並修復代碼中的安全問題和漏洞。

官網：https://shieldfy.io/

Shieldfy

50. YAML Checker

YAML Checker 提供了一種快速簡便的方法來驗證 YAML。經過漂亮的語法突出顯示和錯誤信息來驗證 YAML。

官網：https://yamlchecker.com/

YAML Checker

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程