Photo by Austin Distel on Unsplash
網頁工程師每天面對密密麻麻的程式碼，若能妥善搭配外掛套件，節省重複性和檢查時的工作時間，就能有效大幅提升工作效率，把時間拿去做更重要的開發！ASTRO Camp 特別為大家介紹五款實用 Chrome 套件，讓工程師工作起來可以更得心應手：
1. Page Ruler Redux：測量網頁畫面尺寸的工具
可以幫你計算網頁區塊的尺寸或是區塊間的距離，更可以自行輸入數字來調整區塊的大小，除此之外還可以透過追蹤工具檢視區塊的層級和樣式。對前端工程師來說，是個十分實用的尺寸工具唷！
使用者平均評分：4.5 顆星/ 5 顆星
2. CSS Peeper：可以透過視覺化檢視網站 CSS 樣式
可以幫助網頁工程師快速找到網頁中的樣式細節，無論是使用的字型、字體大小、行高、顏色等，最重要的是還可以匯出頁面中所出現的圖片。
使用者平均評分：4.7 顆星/ 5 顆星
3. GoFullPage：一鍵網頁就能長截圖
對設計師在檢視網頁來說，無法一次截完整個頁面這件事是相當麻煩的，而這個套件只要一鍵就能辦到，截好的圖片還能選擇要存為 PDF 或是 JPG ，非常方便。
使用者平均評分：4.7 顆星/ 5 顆星
4. Emmet Re:view：可檢視網頁頁面在不同瀏覽器和不同裝置間顯示的樣子
為了要避免自己的網頁在別的瀏覽工具上大跑版，我們會寫入 RWD，好讓使用者可以有更好的使用體驗。網頁工程師可透過這個工具來了解頁面在不同裝置所顯示的樣子。
使用者平均評分：4.4 顆星/ 5 顆星
5. Wappalyzer：可以分析網頁裡用了什麼程式框架
透過這個工具可以了解並參考其他網頁架站時，所使用到的技術和程式語言框架。這個工具也可以分析網頁裡所使用的框架和工具有被哪些知名網站使用，更可算出工具佔市場使用比例，對網頁工程師來說，這是一個很棒的評估工具。
使用者平均評分：4.6 顆星 / 5 顆星
結語
身為一名工程師，最重要的是能夠在有限的時間內確保開發品質，而適時的搭配外掛套件，提升開發效率！
你曾嘗試過這些 Chrome 套件了嗎？有什麼使用上的心得都歡迎留言跟我們分享和交流唷！