50個能幫你節省時間的開發工具
前端小混混 前端先鋒
// 每日前端夜話 第413篇
// 正文共：3300 字
// 預計閱讀時間：10 分鐘
本文列舉出 50 個能夠幫你提高開發效率，節省開發時間的 Chrome 擴展和 Web 應用，它們很有可能會在什麼時候派上用場。老規矩，先轉發、點贊、點再看三連，最後再慢慢閱讀，千萬別讓它在收藏夾裏喫灰。
1. Whatruns
一個免費的瀏覽器擴展程序，只需單擊一下按鈕，就能幫你識別當前網站上所使到的技術。
Whatruns
2. Sizzy
開發人員專用的瀏覽器。可以幫你節省時間，加快開發流程
Sizzy
3. Log Rocket
LogRocket 使你可以重播用戶在你站點上所做的操作，從而幫你重現錯誤並更快地解決問題。
Log Rocket
4. Sentry
Sentry 的應用監視平臺幾乎可以爲所有的開發人員提供幫助，它能夠診斷、修復和優化你代碼的性能。
Sentry
5. Can I Use?
"Can I use"提供了最新的瀏覽器支持表，能幫你檢查支持臺式機和移動 Web 瀏覽器上的前端 Web 技術。
Can I Use?
6. Prettier
一個代碼格式化程序，支持多種語言，能夠與大多數編輯器集成。
Prettier
7. CSS Scan
讓你與“檢查元素”再見。它能立即檢查懸停的任何元素的 CSS，並且只需要單擊一下即可複製其整個規則。
CSS Scan
8. Bundlephobia
幫你檢查把 npm 包添加到 bundle 包中所需要花費的代價，
Bundlephobia
9. Cypress
對瀏覽器中運行的所有內容進行快速、輕鬆和可靠的測試。
Cypress
10. Unminify
用於壓縮、解壓縮、反混淆 JavaScript，CSS，HTML，XML 和 JSON 代碼並增強可讀性的免費工具。
Unminify
11. RegEx 101
基於 PCRE 的免費正則表達式調試器，具有實時說明、錯誤檢測和突出顯示的功能。
RegEx 101
12. Clear Cache
只需單擊一下按鈕，即可清除緩存並瀏覽數據。
官網：https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=zh-CN
Clear Cache
13. Window Resizer
通過調整瀏覽器窗口的大小來模擬各種屏幕分辨率。
官網：https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
Window Resizer
14. Wappalyzer
Wappalyzer 是一個能夠現網站上所用技術的實用程序。它能夠檢測內容管理系統、電子商務平臺、Web框架、服務器軟件，分析工具等。
官網：https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg
Wappalyzer
15. MDN
MDN Web Docs 站點提供有關開放的 Web 技術的信息，包括用於 Web 站點和漸進式 Web 應用的 HTML、CSS 和 API 等技術。
官網：https://developer.mozilla.org/zh-CN/）
MDN
16. Axe
可訪問性測試標準。被 Microsoft、Google 和大量的開發測試團隊所選擇，Axe 是世界領先的可訪問性工具包。
Axe
17. Git Graph
Visual Studio Code 的 Git Graph 擴展。幫你查看存儲庫中的 Git 圖，並輕鬆地從視圖中執行 Git 操作。可以隨心配置爲你想要的樣子！
官網：https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
Git Graph
18. Kontrast-WCAG 對比度檢查器
能夠在瀏覽器中實時快速檢查和調整對比度，以滿足 WCAG 2.1 的要求。
官網：https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk
Kontrast
19. Octotree
可增強 GitHub 代碼的檢查和瀏覽功能的瀏覽器擴展。
官網：https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc
Octotree
20. Postwoman
Postman 的替代品，能夠幫你更快地創建 HTTP 請求，節省寶貴的開發時間
Postwoman
21. Responsively App
把開發響應式 Web 應用的速度提高了 5 倍！所有前端開發人員必備的開發工具，使你的工作更加輕鬆。
Responsively App
22. FullStory
幫你查明自己的用戶在何時、何地產生糾結，以及是怎樣影響你的收入和留存率的。
FullStory
23. gitignore.io
幫你輕鬆的爲自己的項目創建 .gitignore 文件
官網：https://www.toptal.com/developers/gitignore
gitignore.io
24. 1Loc
206 個只需單行代碼就能實現的 JavaScript 實用程序。
1Loc
25. Does it mutate?
它會變異嗎？
Does it mutate?
26. Keycode
獲取任意鍵的 JavaScript 事件鍵碼
Keycode
27. Worth It: 現代 JS 版
用來分析頁面的工具，幫你確定在使用模塊和無模塊模式時，在現代瀏覽器中下載的 JavaScript 減少了多少。
官網：https://module-nomodule-calculator.glitch.me/
Worth It
28. npmview
一個用於查看 npm 包文件的 Web 應用。
npmview
29. CSS to JS
在 CSS、JS 對象和 JSX prop之間進行轉換。
CSS to JS
30. All Characters
一個簡單的頁面，顯示所有不同的字符及其 HTML 代碼。
官網：https://aymkdn.github.io/characters/
All Characters
31. Shape Catcher
幫助你查找 Unicode 字符的工具。當你要查找不知道名字的特定字符時非常麻煩。在 shapecatcher.com上，你只需要知道它的大致形狀即可！
Shape Catcher
32. Mocky
在開發時不必等待後端代碼準備完畢，用 Mocky 可以生成自定義 API 響應。
Mocky
33. Explain Shell
寫下命令行並查看與每個參數相匹配的幫助文本
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
幫你獲得更高的壓縮率
Brotli pro
37. Responsive Breakpoints
輕鬆生成最佳的響應式圖像尺寸
官網：https://www.sensitivebreakpoints.com/
![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/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=zh-CN
Check My Links
40. JSON Web Token
對 JWT 進行編碼或解碼
官網：https://www.jsonwebtoken.io/
![JSON Web Token]
41. Git Kraken
適用於 Windows、Mac 和 Linux 的 Git 客戶端，免費開源。
Git Kraken
42. BEM Cheat Sheet
即使是最有經驗的 CSS 開發人員，也不會總是立即找到正確的類名，這很快會使你感到絕望。該工具爲你提供一些最常見的 Web 組件的命名建議，幫助你避免在 BEM 的世界中迷路。
官網：https://9elements.com/bem-cheat-sheet
BEM Cheat Sheet
43. Can I Email
Can I Email
44. CSS Grid Generator
只需要設置數字以及列和行的單位，然後就會爲你生成一個 CSS 網格！可以通過在框內拖動來創建放置在網格內的 div。
官網：https://cssgrid-generator.netlify.app/
CSS Grid Generator
45. Screen size map
設備無關像素的屏幕尺寸比較
Screen size map
46. Who can use?
誰可以使用這種顏色組合？
Who can use
47. Will it CORS?
告訴這臺神奇的 CORS 機器你想要什麼，它將告訴你確切的操作。
官網：https://httptoolkit.tech/will-it-cors/）
Will it CORS
48. extractCSS
從 HTML 提取 CSS
extractCSS
49. Shieldfy
在代碼正式投入生產之前，自動識別並修復代碼中的安全問題和漏洞。
Shieldfy
50. YAML Checker
YAML Checker 提供了一種快速簡便的方法來驗證 YAML。通過漂亮的語法突出顯示和錯誤信息來驗證 YAML。
YAML Checker