iCross交叉查榜系統站長蔡昌富，曾擔任Yahoo軟體工程師，現為iCross交叉查榜系統站長，營運管理網站已有6年時間，而該網站自成立至今的點閱數，已突破400萬人次。
推薦1 網頁開發｜Google Chrome內建的協助網頁開發工具: Chrome Developer Tools
Google Chrome瀏覽器除了可以上網瀏覽網頁以外，也有內建的 Developer Tools可以協助網頁開發，按下「Command + Option + J」就可打開Developer Tools。常用的功能與Firefox上的 Firebug，以及Safari內建的Web Development Tools相較下大同小異。
傳統的網頁開發是先去修改程式碼，再回頭重新整理網頁。但是這樣的方法非常沒有效率，用Developer Tools開發的好處，就是可以即時在瀏覽器上顯示修改的效果，確定好效果之後再回去改程式碼，操作時間就會快得多了。
在使用上的步驟分享給大家。
以Google首頁為例，在Developer Tools中對著「Google搜尋」的按鈕點擊右鍵，選取「檢查元素」，再把input value裡的值改成「我要搜尋」。結果就會如圖所示，把按鈕的文字改掉了。
而設定JavaScript中斷點時，同樣以Google首頁為例，不過你可以改用較熟悉的JavaScript網頁。
1. 切換到Sources面板。
2. 在面板左側找到要編輯的 js 檔案。
3. 可以先點一下Pretty Print功能（圖案有點像「{ }」），讓程式碼好看一點。
4. 選一個想要有中斷點的地方。
5. 按下重新整理，或是想辦法讓 js 可以跑到剛剛設的中斷點。
6. 程式跑到中斷點並成功中斷後，就有一般IDE偵錯時常用的「Pause script execution」、「Step over next function call」等功能可以用。
除此之外，也可以到Console面板，直接輸入想執行的JavaScript，甚至可以把當時變數的值也改掉。
不僅如此，我們也能在網頁上即時修改CSS，這次我們對著最上面黑色的Google Bar點右鍵，一樣選「檢查元素」，找到想要修改的 CSS 屬性，就可以直接看到修改後的結果。
-P44-600(1).png)
我們可在面板中用游標按住某一個DOM元素，任意的拖拉到想要的位置，甚至按下Delete鍵，就可以刪除這一個DOM元素。
| 軟體資訊 |
●軟體名稱：Chrome Developer Tools ●價格：免費 ●版本：26.0.0.0 ●檔案大小：48MB ●支援瀏覽器：Google Chrome |
【註：規格與價格由廠商提供，因時有異動，正確資訊請洽廠商。】
推薦2 終端機｜可替代MAC內建終端機: iTerm2
網頁開發時通常都會需要一個終端機介面，Mac OS X雖然有內建的終端機，但是並不若iTerm2的功能強大。
下面舉出一些一般人較常用得到，但是目前Mac OS X版本內建終端機沒有但iTerm2有的功能。
如垂直分割面板、按「Command + f 」搜尋關鍵字時，可以顯示全部符合的關鍵字，按「Command + ; 」可以自動完成目前視窗中的關鍵字。或者用滑鼠選取文字，同時自動複製在剪貼簿裡。在分頁頁籤的右鍵選單中，可以指定分頁頁籤的顏色。
除此之外，我們可以設定全域按鈕，在別的程式中可以直接跳到 iTerm2 去。這項設定可以在 Preferences→Keys頁籤→Hoykey裡找得到。而我自己是設定成Ctrl+Enter為快捷鍵。
-P44-600_02(1).png)
在iTerm2可設置水平與垂直分割視窗，在圖中左邊是Vim編輯畫面，右上畫面是指令提示視窗，右下角則是系統資源監控的Htop畫面。
| 軟體資訊 |
●軟體名稱：iTerm2 ●價格：免費 ●版本：1.0.0 ●檔案大小：3MB ●支援系統：Mac OS X |
【註：規格與價格由廠商提供，因時有異動，正確資訊請洽廠商。】
推薦3 程式文字編輯器｜設定程式碼片段: TextExpander
這套軟體可以先設定好你常用的程式片段（snippet），之後就可以少打很多字，因此降低打錯字的機會。TextExpandar目前已可支援 Mac OS X 大部份軟體的輸入區。
安裝TextExpandar完畢後，程式會在右上角的 Menu Bar 中出現。我們可以先點選「Create New Snippet」來建立一個新片段。目標是希望輸入 blockquote 後，就自動把片段展開，並且游標自動放置在正中間，以等待輸入。步驟如第一張圖所示：
1. 在Content區輸入設定的片段。
2. 接著先把游標停在片段的中間，並且在下方選單中，選取「Cursor Position Cursor Here」。如第二張圖所示。TextExpander 這時候會幫你插入一個「%」的代碼。
3.在下面的Abbreviation區，輸入想設定的關鍵字，例如blockquote，至此就設定完成。
4. 然後就可以到任一個文字編輯的軟體中試試效果了。
-P44-600_03(1).png)
在紅1處可輸入程式片段；紅2處有些特別的功能，例如游標定位等；紅3處為觸發該片段的關鍵字。
| 軟體資訊 |
●價格：34.95美元 ●版本：4.0.5 ●檔案大小：6MB ●支援系統：Mac OS X |
【註：規格與價格由廠商提供，因時有異動，正確資訊請洽廠商。】
推薦4 網站測試｜不須架設虛擬機，也能在各瀏覽器下測試網站運作: Sauce
以往若想測試網站在不同作業系統上的瀏覽器表現，需要安裝很多虛擬機器，不但耗費硬體資源，操作起來又不見得方便。
例如一般人可能會需要測試Windows XP下的不同IE版本，以及Chrome與Firefox，而且為求保險起見，同樣的事可能又要在Windows 7下再做一次。
有時需要準備具有IE 10的虛擬機器，但是灌了IE 10以後，就不會有IE 6可以測試了。如此的排列組合下，不知道要安裝與運行多少臺虛擬機器才足夠，若是主機不夠高檔，測試的過程可能也要跑很久。而且視需求還可能要準備不同的Snapshot環境，每一次新的測試，也有可能會因為測試環境的單純程度，而被之前的測試過程而影響到之後的結果。
如此繁複的測試環境，會消耗掉大量的測試人力，也可能會有「漏網之魚」的錯誤沒被測試出來。
Sauce是一套由Sauce Labs出品的「雲端測試工具」，可以不用在自己電腦安裝一堆虛擬機器，而是直接連到「雲端」上的虛擬機器測試。這樣的好處是，由於虛擬機器是由「雲端」上的機器代為運行的，使用者端只是單純連過去看畫面以及操作的，所以連較低階的電腦也可以輕易執行。而Sauce支援可模擬的作業系統有Windows XP、7、8、Linux、Mac OS X，甚至連手機的iOS作業系統都有。
這邊有幾個使用步驟分享給大家。
1.使用者在啟動服務後，先點選「New Session」按鈕，然後在URL欄位填一個想測試的網頁，這樣模擬器一開好就會直接幫你連上網頁。我們在這裡是選擇在iPhone上iOS 6.0來測試；需要注意的是，雖然文字顯示是「iPhone 6」，不過其實是指用iPhone模擬器執行iOS 6，不是真的有未上市的iPhone 6可以玩。
2.這時需要等待大約30秒鐘，一臺全新的測試機器環境就會準備好。由於每次重開，都是全新的環境，所以不易受到之前測試的影響，例如Cookie或各種暫存檔等。
3.機器開好後，你就可以進行想做的測試。中間不管你在裡面怎麼測試，就算是系統出現問題，都不會影響到使用者端原本的操作機器。
4.當測試完畢後，點選End按鈕，或直接關閉頁籤就可以結束測試了。
Sauce也提供在測試過程中協助錄影或是擷取畫面的功能，如此可更加的方便除錯，以及將畫面分享給其它團隊。
若是有自動化測試的需求，Sauce也支援Selenium，WebDriver支援Java、Python、Ruby、PHP、C#……等，可以在官網上看到更多範例程式。
而Sauce未來也會逐步支援TravisCI，讓需要整合測試平臺的使用者，在測試網站時更加如虎添翼。
-P44-600_04(1).png)
在啟動程式後，先點選New Session按鈕，然後在URL欄位填一個想測試的網頁，這樣模擬器一開好就會直接連上網頁。
| 軟體資訊 |
●價格：12美元起 ●版本：1.05 ●檔案大小：34MB ●支援系統：Mac OS X |
【註：規格與價格由廠商提供，因時有異動，正確資訊請洽廠商。】
推薦5 網頁開發｜可在雲端虛擬環境測試網頁程式碼: jsFiddle
隨著網頁設計專案越來越複雜，有時候會需要有一個簡單的環境，來獨立測試某些 JavaScript或CSS；或者需要有一個網站，可以放置一些簡單的範例，以便與人遠距合作。若是每次有這樣的需求，就要重新架一個網站，就略嫌麻煩。
jsFiddle算是一套可以處理前述問題的網路服務。也由於是網路服務，所以資料都存放在「雲端」上，不需要費心考慮網站維護的問題。
jsFiddle的介面包含四個面板，分別是HTML、CSS、JavaScript、Result。我們可以直接在上面編輯開發程式，再按Run按鈕，執行的結果就可以直接在Result面板裡看到。
jsFiddle還支援Fork功能，你可以把別人的程式Fork一個新的Fiddle，改成你的版本後，再把這個新網址分享給別人，別人就可以看到這個新Fiddle版本。另外還有Update按鈕，每按一次就可以儲存一個程式版本，方便日後回溯到同一Fiddle之前的版本。
而jsFiddle也包含很多JavaScript框架，例如 jQuery與YUI。在下面這個範例網址中（jsfiddle.net），還另外加進來Twitter Bootstrap，如此就可以在上面直接測試Twitter Bootstrap的效果。
而在jsFiddle裡，已內建常見的JavaScript Framework網址，如jQuery、YUI、MooTools等，jsFiddle可自動幫你載入到頁面中，讓你不用在HTML區域載入這些語法。而這個軟體可以在雲端建立全新資料庫，並且有很方便的操作介面可以測試。將網址直接傳給朋友，就可以看到一樣的畫面，以便互相討論。
-P44-600_05(2).png)
這是jsFiddle測試Twitter Bootstrap的範例。在這個面板上，我們可以直接登入並編輯程式碼，按下Run按鈕，就可以直接看到測試結果。
| 軟體資訊 |
●價格：免費 ●支援瀏覽器：IE、Google Chrome、Firefox |
【註：規格與價格由廠商提供，因時有異動，正確資訊請洽廠商。】
熱門新聞
2024-04-22
2024-04-22
2024-04-22
2024-04-22
2024-04-22
2024-04-22