幾個月前,我意識到我的瀏覽器比我的程式碼註解更混亂。選項卡太多,沒有組織,浪費了大量時間。就在那時我決定為此做些什麼。
結果呢?這 10 個擴充改變了我的工作流程。讓我與您分享它們 - 是的,這些確實會產生影響。
1.VisBug
您知道當您除錯 UI 時,感覺就像在用 CSS 玩打地鼠遊戲嗎? VisBug 解決了這個問題。直接在瀏覽器中調整間距、字體和版面。節省時間、理智並防止鍵盤被砸壞。
連結:https://chromewebstore.google.com/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en
2.React開發者工具
如果你使用 React,這就是你的生命線。毫不費力地檢視元件層次結構、道具和狀態。無需再猜測重新渲染的內容以及原因。
3.Postman Interceptor
API 是我們所建構的一切的支柱。 Postman Interceptor 可讓您擷取網頁要求並直接從瀏覽器進行偵錯。這就像為您的後端提供 X 射線視覺。
連結:https://chromewebstore.google.com/detail/postman-interceptor/aicmkgpgakddgnaphhhpliifpcfhicfo?hl=en
4. Dark Reader
如果你曾經在午夜盯著令人眼花繚亂的白色螢幕,那麼你需要 Dark Reader。立即將任何網站變成暗模式。你的眼睛會感謝你的。 (你的設計師朋友可能不會。)
連結:https://chromewebstore.google.com/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh
5. 網頁開發人員
這是老式的,但仍然很強大。停用 JavaScript、驗證 CSS、調整視窗大小 - 它是前端開發人員的一體化工具。
連結:https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
6. JSON 格式化程序
閱讀縮小的 JSON 就像嘗試閱讀一本你不知道的語言的書。 JSON Formatter 對其進行清理,使其可讀且豐富多彩。因為誰有時間瞇著眼睛呢?
7. Wappalyzer
有沒有想過是什麼技術堆疊為網站提供支援? Wappalyzer 為您解析。非常適合研究或當你只是愛管閒事時。
8. lighthouse
表現。可存取性。搜尋引擎優化。燈塔做到了這一切。執行審核並在幾秒鐘內獲得可行的見解。將其視為您的個人程式碼審查員(但不那麼挑剔)。
https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
9.Octotree
在沒有 Octotree 的情況下瀏覽 GitHub 儲存庫感覺就像蒙著眼睛穿過迷宮。它向 GitHub 加入了文件樹視圖,使您可以輕鬆找到所需內容。
https://chromewebstore.google.com/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc
10. Pesticide
對於完美主義者來說,Pesticide 概述了頁面上的所有元素,以便您可以更快地除錯佈局。像素完美的設計?可以實現的。
https://chromewebstore.google.com/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi?hl=en
獎勵:Tab Wrangler
我們都經歷過這樣的情況:打開 50 多個選項卡,生產力下降。 Tab Wrangler 自動關閉不活動的選項卡,但保持它們可檢索。整理你的瀏覽器,整理你的思維。
https://chromewebstore.google.com/detail/tab-wrangler/egnjhciaieeiiohknchakcodbpgjnchh
你的工具要嘛會讓你放慢速度,要嘛會讓你提升水平。這些擴充屬於第二類。嘗試一下,讓我知道您最喜歡哪一個。
原文出處:https://dev.to/balrajola/10-modern-browser-extensions-every-developer-should-use-in-2025-1aoi