[上班] 初階攻城師的軟體清單 @ 熱血青年很向上

前情提要：某植物現職為專案工程師，工作範圍包括寫程式、掰文件。這裡介紹一下她工作的電腦裡必備的小玩意兒。

（軟體的擷圖我都是抓我目前使用版本的長相，點縮圖可以到 flickr 看原尺寸圖片。）

正規表示式的好幫手：RegexDesigner

有時候有一堆文字等著你幫小雞分公母，譬如說，判斷使用者在表單裡填的電話對不對，或者是移除掉 HTML tag、乾乾淨淨地取出內文來。如果你能從這些文字裡找出規則來，何不把這些 pattern 寫成正規表示式 (regular expression)？徒手撰寫、反覆測試這些狀似亂碼的玩意實在太難纏，就讓 RegexDesigner 來陪你吧。右側有正規表示式的參考文件，左側可以測試目前設計的規則是否正確 match、也可以預覽取代效果。

在 Firefox 的最佳網頁除錯工具：Firebug (Firefox add-on)

這隻被我們暱稱為「小蟑螂」的螢火蟲，可以幫忙 JavaScript 除錯、CSS 調校。想嘗試換一下自己的 blog 樣式、又懶得在密密麻麻的 CSS 設定檔裡撈設定值？也許你該請螢火蟲先飛到你要設定的目標上。你也可以利用它為網頁暫時插入特定元素、加上某些 CSS 設定，有些時候想要做點雛型給客戶看，犯不著另存原始碼大肆修改，點一下你的 Firebug，它可以幫上忙。

在 IE 的最佳網頁除錯工具：IE 開發者工具 (IE )

嚴格來說它不是一個獨立的軟體，但它是我第一時間升級到 IE 8 最大的原因。和 Firebug 用途接近，身為前端工程師，別忘了打開 IE 時按下 F12 鍵，請它陪你安撫亂七八糟的網頁內容。（題外話，IE 9 推廣網站上有一系列《邊做邊學 Internet Explorer 9 開發》，其實是和 CSS / JavaScript / HTML 標準有關的超實用文章，翻譯品質很棒，在此誠心推薦。）

IE6 滅亡前的自保工具：IETester + Debug Bar

寫網頁應用程式，不免會碰到跨瀏覽器問題，例如你試圖調校相同網頁在不同版本的網頁瀏覽器中的畫面。雖然大家口口聲聲喊著 "IE6 must die"，但在 IE6 正式滅亡之前，還是得繼續測試網頁在 IE6 上跑起來的樣子。除了借用鄰座的電腦、在 VM 裡建置復古環境之外，你也可以選擇透過 IE tester 來模擬 IE 各種版本 (IE 6 ~ IE 9)。搭配 Debug Bar，你可以比較輕鬆愉快的找回在 IE6 失落的網頁元素。

陪你一起測試網頁：Web Developer (Firefox add-on)

為什麼 DIV 對不齊？表單試著填滿以後會發生什麼事？可以暫時先關掉 JavaScript 嗎？視窗大小在 400*300 的時候版面看起來是什麼感覺？可以在你電腦上切換到 mobile 版的 CSS 讓我看看嗎？還有，嘿，告訴我右上角那一區的寬度和高度好嗎？麻煩請打開你的 Web Developer，上述問題都可以快速得到答案。身為網頁設計師，有了 Web Developer，可以便利快速的掌握網頁的許多狀態與資訊。

螢幕擷圖工具：FSCapture

身為專案工程師，常常需要抓取螢幕擷圖、寫文件。有了好的抓圖工具，寫操作手冊會輕鬆很多。可自動存檔、也可以設定抓取到系統剪貼簿，可以自動幫你滾動捲軸抓取完整內容、也可以自己框出畫面上的局部。隨手抓圖、隨手黏貼到操作手冊文件檔裡……喔拜託，別再繼續依賴小畫家了。

放大你的重點：ZoomIt

簡報時刻，一定要有它隨侍在側，幫你畫重點、補充文字、放大局部。平常乖乖縮在系統列，設定頁上面就有使用說明，是一個超簡潔的小工具。下課時間到了，它還有倒數計時器。

外掛超多的好強大純文字編輯器：VIM (gVIM)

偶爾總是需要 Syntax highlight，但你未必想開肥滋滋的 Viusal Studio，好的純文字編輯器可以幫你一把。──W 社多數人好像比較喜歡 UltraEdit 或 notepad++，我之所以選 VIM 不是想要特立獨行，只是因為出校門前吳老師一邊對我說「學一次可以用到老 / 一整個完美阿XD」，傳了一招半式給我，從此堅定不移。