網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(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 等資訊,非常好用!當然開發人員工具功能不少,這只是其中幾項,那還有沒有其他的應用方式呢?