對於網頁設計或開發者來說，想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手，我在發現不錯的網站都會去看一下原始碼或樣式表，雖然 Google Chrome 本身就有強大的開發人員工具可以使用，但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface Ninja、Type Sample 這類工具快速找到我要的資訊。
閱讀全文 » about CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表（Chrome 擴充功能）
JavaScript
RawGit 將 GitHub 的 Raw 檔案轉為 CDN 格式直接存取使用
HtmlWasher 網頁程式碼清理工具，快速去除雜亂代碼保留基本標籤
若你有接手編輯過他人網頁，或是複製其他頁面版型的經驗，應該會發現最困難的往往不是編輯網站，而是將現有的程式碼整理乾淨，讓它能夠格式化，呈現出一致的效果。尤其對於一些較為複雜的頁面，可能經過許多人無數次編輯後已經有些四不像，這時候就必須將不必要的部份代碼刪除，只留下最基本的部分，而這些過程大部分都是手動進行，不但很耗費時間心力，而且很可能因為修改錯誤而讓整個頁面跑掉。
CSS & JavaScript Compressor 線上程式碼壓縮工具，有效提高網站速度
在更新網站時，經常透過網站檢測工具來檢查網站有沒有可以改進的部份，例如我個人相當常用 PageSpeed Insights 和 Think With Google，通常會出現 CSS、JavaScript 程式碼可以被壓縮的最佳化提示資訊。如果沒有特別設定，大部分情況下會維持程式碼的可讀性，對於開發者在編輯來說會很有用，但其實放在網路上只要求能夠越快被下載越好，利用壓縮方式將不必要的空格、註解或換行清除，讓檔案盡量維持在最小狀態，不僅可提高下載效率，也能節省網站流量耗費。
超實用！一行程式碼將瀏覽器變身網頁編輯器，支援各種常見瀏覽器
這幾天在 Twitter 看到一則推文分享，只要一段程式碼，就能開啟 Google Chrome 瀏覽器內建開發者工具的編輯器功能，直接在網頁內進行內容編輯測試（對，直接編輯網頁中的文字），這對於網頁開發者來說很有用，尤其是當你想知道選單可以容納多少文字，或是標題、內文會在多少字以後換行，就能以更直覺的方式看到結果。相較於之前介紹過的「Edit Any Website 只要一行程式碼就能編輯任何網頁！直接把瀏覽器變身網頁測試工具」又要更簡單一些。
WhatRuns 查看網站背後使用那些第三方服務和技術（Chrome、Firefox）
對於開發或經營網站的朋友來說，應該很常會去研究其他網站使用那些技術，一來可知己知彼，另一方面也能從其他網站來找到更合適的功能。如果有經驗的話，通常透過瀏覽器或檢視原始碼就能知道一些什麼，但這比較耗費時間，因此有線上工具可以讓你在輸入網址後快速找出該網站使用的工具、第三方應用或程式庫技術等資訊，例如之前介紹過的 SimilarTech、Wappalyzer 分析網站使用什麼樣的架站程式和環境，找出其他類似的服務選項，對開發者來說很實用。