現在比較少有機會從頭到尾、以原始碼編寫一個網頁，記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站，最早的網頁就是直接用 HTML 文字編輯器寫出來，後來有了所見即所得編輯器，很多事情變得很方便，也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容，看看呈現出來的結果是否正確，可試試接下來的免費工具。
HTML.cafe 線上即時 HTML 編輯器，修改原始碼立即查看效果變化
網頁編輯
如何讓網頁變成黑白？使用 CSS Filter 套用濾鏡樣式表教學
上個月台灣發生震驚社會的宜蘭普悠瑪列車出軌事故，造成許多旅客輕重傷甚至死亡，也對台灣交通運輸安全打上一個大大的問號，各種資訊隨著時間不斷被揭露出來，讓我懷疑需要多好的運氣才能平安度過每一天？發生憾事後再多道歉和賠償也無法撫平傷痛，或許平常就該認真謹慎面對所有大小事情，扣除天災更多的是人禍，往往都是過於疏忽怠慢、不夠嚴謹造成的。
Site Palette 從網站獲取配色，快速產生完整調色盤資訊（Chrome 擴充功能）
最近介紹過一些令人印象深刻的色彩工具，多半都是 Google Chrome 外掛，例如我個人很喜愛的「CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表」，能以更簡單、有組織性的方式呈現網站樣式和各元件，對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多，包括一行程式碼將瀏覽器變成網頁編輯器，直接從網頁中修改內容，在開發網站測試時會省時省事很多。
CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表（Chrome 擴充功能）
對於網頁設計或開發者來說，想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手，我在發現不錯的網站都會去看一下原始碼或樣式表，雖然 Google Chrome 本身就有強大的開發人員工具可以使用，但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface Ninja、Type Sample 這類工具快速找到我要的資訊。
HtmlWasher 網頁程式碼清理工具，快速去除雜亂代碼保留基本標籤
若你有接手編輯過他人網頁，或是複製其他頁面版型的經驗，應該會發現最困難的往往不是編輯網站，而是將現有的程式碼整理乾淨，讓它能夠格式化，呈現出一致的效果。尤其對於一些較為複雜的頁面，可能經過許多人無數次編輯後已經有些四不像，這時候就必須將不必要的部份代碼刪除，只留下最基本的部分，而這些過程大部分都是手動進行，不但很耗費時間心力，而且很可能因為修改錯誤而讓整個頁面跑掉。
超實用！一行程式碼將瀏覽器變身網頁編輯器，支援各種常見瀏覽器
這幾天在 Twitter 看到一則推文分享，只要一段程式碼，就能開啟 Google Chrome 瀏覽器內建開發者工具的編輯器功能，直接在網頁內進行內容編輯測試（對，直接編輯網頁中的文字），這對於網頁開發者來說很有用，尤其是當你想知道選單可以容納多少文字，或是標題、內文會在多少字以後換行，就能以更直覺的方式看到結果。相較於之前介紹過的「Edit Any Website 只要一行程式碼就能編輯任何網頁！直接把瀏覽器變身網頁測試工具」又要更簡單一些。
HTML Editor 線上所見即所得編輯器，將內容快速轉為 HTML 原始碼
記得以前剛開始接觸網頁製作時都是使用 Microsoft FrontPage 編輯器，也正因為有所見即得編輯器，才能讓原本複雜難懂的 HTML 原始碼變得更簡單易懂，它將原始碼轉換成可視化內容，只要直接輸入文字、圖片、超鏈結後修改樣式即可將網頁製作出來，當然這些頁面背後仍是有所謂的 HTML 程式碼存在，只在需要時才會切換原始碼模式。
Type Anything 從瀏覽器測試建立完美網頁排版，一鍵匯出 CSS 樣式
不怕說出來讓大家知道，其實我對網頁設計很挑剔，尤其在排版方面。如果你經常回來免費資源網路社群，應該會發現這裡更新頻率很高，不單單只有文章內容汰舊換新，連最細節的文字設定我都費盡心思，主要是希望能帶給讀者最好的閱讀感覺。儘管沒有一項設計能符合所有人喜好，我仍在不斷測試、交換中找到最適合大多數人閱讀習慣的排版風格。
Font Fit 在你的網站上測試各種字型排版，即時預覽字體大小顏色樣式
設計網頁時排版和色彩選擇非常重要，其中色彩可以參考「BrandColors」從世界知名品牌標準色來獲得靈感，或是一些我曾經介紹過的配色工具；排版的話考量到字型和字體大小、間距、行高等等，這也是我平時不斷調整及測試的部分。對內容網站來說，提供閱聽者良好閱讀體驗不僅是考驗也是需要努力的目標，試著以讀者角度想，當你在閱讀網站時，會想要得到什麼樣的感覺，這麼說好像有點抽象，你可以利用 Font Fit 來找出最合適的排版設計。
Edit Any Website 只要一行程式碼就能編輯任何網頁！直接把瀏覽器變身網頁測試工具
瀏覽器書籤列（Bookmarklet）也就是網址列下方那排區域，除了可以加入常用鏈結，其實它有許多我們意想不到的功能，國外有開發者利用一段簡單程式碼打造出可任意編輯網頁內容的小工具，請放心，編輯過程並不會對網站造成任何問題，只有使用者自己看得到變化，對於要測試網站即時顯示效果（尤其是文字排版）非常好用，以下我會簡單介紹這項功能。