網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌，以前會針對行動裝置另外製作一個行動版，現在比較普遍作法是使用響應式網頁設計（Responsive web design，簡稱 RWD），可自動調整為最適合閱讀的大小，但這些開發過程可能都得借助於測試工具幫忙，例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式，或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。
開發人員工具
Detailed SEO Extension 快速得知網頁的搜尋引擎最佳化相關資訊（Chrome 擴充功能）
通常在網站流量出現變化時網站管理者會去探究原因，如果你的訪客多為來自搜尋引擎的自然流量，有很大機會是搜尋引擎排名下降或類似問題，當然各家公司使用的演算法技術是商業機密，但通常都圍繞著一些大原則，像是被我視為最重要的 Google 搜尋引擎最佳化入門指南就是最核心的參考書，當中有提到使用正確語法清楚表達網頁資訊。
store-badge 判斷使用者裝置顯示對應 App Store、Google Play 商店按鈕
今天在整理瀏覽器的瀏覽紀錄時，無意間發現之前存下來的一個服務 store-badge，對於應用程式開發者來說或許會有用處，特別是開發的應用程式包括 iOS 和 Android 版本，就能提供給不同使用者特定的應用程式商店下載鏈結。簡單來說，大部分網站會顯示 App Store 和 Google Play 的下載按鈕，分別對應不同平台，使用者可依照需求點選並連接到特定的應用程式商店，透過 store-badge 就可以自動判斷使用者的裝置類型。
HEAD 網頁開發參考手冊，收錄 HTML5 在 head 可用標籤及範例說明
httpstatus.io 快速檢查網站狀態碼、回應標頭和重新轉向情形
自行架站會遇到各式各樣的狀況，其中很常發生的是要檢查某項功能有沒有正常運作（舉例來說，在 WordPress 網站使用 Cloudflare 外掛建立快取），除了檢查網頁原始碼，大多會透過瀏覽器內建的「開發人員工具」進行各項除錯工作，查看一個網頁究竟載入多少元件檔案，也會檢查相關檔案在使用時從伺服器端回傳的「Response Headers」，這些看起來複雜的資訊代表著某個文件是如何被載入使用，也能找出拖慢網頁速度的原因。
Console.chat 在瀏覽器的開發人員工具加入一個文字聊天室
趁著最近空閒時間較多，介紹一些特殊、趣味性十足的小工具吧！如果你是網站開發者，一定知道瀏覽器都會內建「開發人員工具」，也就是打開後有很多輔助開發功能，例如最常用的是檢查打開網頁時載入那些圖片、程式或檔案，這也可用於瞭解網站是否有被拖慢速度的問題，還能點選網頁中的元件，快速查看相關程式碼、CSS 等資訊，非常好用！當然開發人員工具功能不少，這只是其中幾項，那還有沒有其他的應用方式呢？