推薦給前端開發的 5 款 Chrome 擴充套件 🚀

dombro發表於2023-12-18

大家好,我是 dom 哥。這是我關於 Chrome 擴充套件開發的系列文章,感興趣的可以 點個小星星

工欲善其事,必先利其器。Chrome 可能是前端開發中使用最多的瀏覽器。在日常開發中,下列幾款 Chrome 擴充套件也許能讓你的開發工作事半功倍 🚀

Vue.js devtools ⚙️

vue 官方專為 vue 應用開發的除錯工具。

透過使用它,你可以快速檢視元件的狀態和屬性,分析效能瓶頸,並進行效能最佳化。同時,它還提供了方便的 Vuex 狀態管理和元件時間旅行功能。無論你是 Vue.js 初學者還是有經驗的開發人員,Vue.js Devtools 都是一個值得掌握的工具。

React Developer Tools ⚙️

React Developer Tools 專為 React 應用程式開發者設計。它提供了一系列功能,幫助開發者更輕鬆地除錯和最佳化 React 元件。

透過深入掌握 React Developer Tools,你可以更好地理解元件層次結構、跟蹤元件狀態和效能,除錯 React Hooks,以及進行元件時間旅行等操作。無論你是初學者還是有經驗的開發者,掌握 React Developer Tools 都將極大地提升你的 React 開發能力和效率。

Vimium 🚀

將 Vim 式的快捷鍵帶入瀏覽器世界。

Vimium 為使用者提供了類似 Vim 編輯器的鍵盤導航和操作方式,大大提升了瀏覽器操作的效率和速度。透過安裝和使用 Vimium,你可以像在 Vim 中一樣快速瀏覽網頁、開啟連結、搜尋內容,甚至進行高階操作和自定義設定。不管你是 Vim 使用者還是想要提高瀏覽器操作效率的使用者,Vimium 都值得一試。

Resource Override 🔀

Resource Override 提供了實時修改,重定向和除錯網頁靜態資源的能力。

前端開發者經常需要將線上資源重定向到本地,以此實現本地開發除錯,這正是 Resource Override 的用武之地。

透過使用 Resource Override,我們可以定製和最佳化網頁資源載入,滿足個性化需求,或進行除錯和最佳化。不論是開發者還是除錯專家,Resource Override 都是一個不可或缺的工具,能夠顯著提升開發和除錯效率。

GoFullPage - Full Page Screen Capture 📸

簡單快速生成網頁全頁截圖的高效工具。

下面是我截的 github 首頁長圖:

推薦給前端開發的 5 款 Chrome 擴充套件 🚀

我們經常需要生成網頁的全頁截圖,以便進行展示、分享、文件編寫或錯誤排查。GoFullPage 就是這樣一款強大而高效的網頁截圖工具,能夠快速生成高質量的網頁全頁截圖。它提供了多種截圖模式、定製化設定和高效能演算法,幫助開發者、設計師和測試人員更輕鬆地進行網頁截圖工作。無論是展示、分享、文件編寫還是錯誤排查,GoFullPage 都能為你提供便捷而優質的截圖體驗。

覺得不錯可以 點個小星星 支援一下哦 🌹