Google Chrome 是當今網際網路中最大的玩家之一。它快速、可靠、功能豐富；特別對 Web 開發者來說非常好用。Chrome 也允許安裝第三方擴充套件；Google 團隊做得很不錯，這些擴充套件只需 HTML、CSS 和 JavaScript 即可搭建。本文將介紹幾個能幫助我們開發的 Chrome 利器。
本文的原始碼在[這裡]。
開發響應式 Web 應用
現在響應式無處不在。隨著移動裝置的崛起，我們需要讓應用執行在各種不同解析度的平臺上。新版本的 Chrome 提供了很棒的工具來幫助我們減輕工作量。這裡我們先做一個簡單的頁面然後讓它變成響應式。先是HTML程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> <h1>Responsive Web Design</h1> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Concept</a></li> <li><a href="#">Examples</a></li> <li><a href="#">Frameworks</a></li> <li><a href="#">Contacts</a></li> </ul> <section class="concept"> <p>Responsive web design (RWD) is a web design approach ... </section> <section class="elements"> </p>The fluid grid concept calls for page element sizing to be in relative units ... </section> </body> |
還有一些簡單的 CSS 樣式，浮動導航連結並讓兩個章節（section）彼此相鄰。效果如圖：
準備好 HTML 和 CSS 後，我們就可以開始做些試驗了。先學習新增媒體查詢（Media Queries）斷點。重點是要根據內容選擇媒體並觀察內容在什麼範圍會變得難看。不要因為流行就僅僅設定 1024×768 之類的解析度。
設定檢視（Viewport）
我們希望瞭解在檢視多大的時候內容會斷層。此時需要調整瀏覽器的視窗大小。在 Chrome 裡，可以使用開發者工具皮膚直接調整大小。
注意當我們改變檢視大小的時候，右上角會顯示當前的大小。這個小小的提示框省去了手動檢查的麻煩。在我們的例子中，導航欄下的兩個章節在 500px 左右就會顯得過扁了。所以這裡我們放置第一個媒體查詢：
|
1 2 3 4 5 6 7 8 9 10 |
section { float: left; width: 50%; } @media all and (max-width: 550px) { section { float: none; width: 100%; } } |
如果在 550px 再低一點，我們會發現 540px 左右導航欄會讓視窗產生水平滾動條。再新增一個媒體查詢解決這個問題：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.nav { list-style: none; margin: 10px auto; padding: 0; width: 510px; } .nav li { float: left; margin: 0 20px 0 0; } @media all and (max-width: 540px) { .nav { width: auto; } .nav li { float: none; margin: 0; padding: 0; text-align: center; } } |
這就是一個適應多種解析度的網頁。雖然我們的頁面很簡陋，只有兩個斷點，但即便對於龐大的網站，選擇斷點的方法也是一樣的。
裝置模擬
有時候我們會收到 bug 顯示應用在一些特定的裝置上出錯。Chrome 可以模擬各種各樣的裝置幫助我們解決問題。它會自動設定正確的解析度和 HTTP 頭；讓我們方便地接近真實使用者的視角。檢測裝置的 JavaScript 程式碼也會正常工作因為 Chrome 改變了請求報頭。
比方說我們需要模擬一部 iPhone5 裝置。在開發者工具皮膚的頂欄有一個小小的抽屜（drawer）按鈕，然後選擇模擬（Emulation）標籤。
我們只需選擇裝置，Chrome 會自動應用所有的設定包括螢幕、使用者代理（User agent）以及感測器；甚至還模擬了觸控事件。
在元素皮膚（Elements Panel）進行修改
我們的頁面已經是響應式了，但有時候我們需要再做些修改。可以使用 Chrome 檢視 document 上應用的樣式。比如，第一個章節的文字太大了，我們希望做些修改並改變字型的顏色。
檢視具體的 CSS 規則時元素皮膚也很有用，但在這裡我們不知道這些規則是在哪裡定義的。這時在右側的視窗就可以檢視當前元素上經過計算後的樣式，我們可以在這裡去做修改。
開發者工具皮膚
有時候我們需要搜尋特定的 CSS 樣式，但是這個樣式有太多定義了找起來很麻煩。在開發者工具皮膚中有一個很好用的過濾區域。比方說我們想檢視 <section> 標籤中應用 concept 類的規則。只需這麼做：
JavaScript 除錯
Google Chrome 是一個通用的工具。它有上一節提到的工具來支援設計師，也同樣有支援開發者的工具。
整合 JS 除錯
Chrome 整合了優秀的 JavaScript 偵錯程式、控制檯和原始碼檢視器。為了說明這些工具是怎麼工作的，我們先為例子新增一小段邏輯程式碼。我們希望點選 Examples 連結後該標籤會變成 Awesome examples。藉助 jQuery 可以讓我們更好地關注到例子上。
|
1 2 3 4 5 6 7 8 |
$('.nav').on('click', function(e) { var clicked = e.currentTarget; if(clicked.innerHTML === 'Examples') { clicked.innerHTML = 'Awesome examples'; } else { console.log('do nothing ...'); } }); |
你很可能已經看出問題了，但且讓我們執行以上程式碼看看。
無論我們點選什麼都會控制檯都會列印 do nothing...。看來我們的 if 語句總是 false。先設定一個斷點看看發生了什麼。
偵錯程式在斷點暫停並顯示當前的區域性變數。可以看到，clicked 變數指向的是導航欄的元素而不是 <a> 元素。所以它的innerHTML 屬性一定不是 Exmaples。這就是每次都列印 do nothing... 的原因。要修復這個 bug，將 .nav 改成 .nav a即可。
以上是除錯的傳統方法，只有在我們知道哪裡設斷點的情況下才有用。但如果我們在大型的程式碼庫上工作，特別是要除錯一連串檔案的時候，問題就來了。我們開始到處放置 console.log 然後觀察控制檯。這個辦法是可行，但很快就會產生大量的資料，這時就很難從中過濾出需要的資訊。Chrome 對這個問題也提供瞭解決方案。我們可以在傳給 .log 的文字前新增 %c，然後利用第二個引數調整控制檯輸出的樣式。如圖：
我們還可以新增一些其它的東西。console 物件有兩個不太常見的方法 —— group 和 groupEnd。可以用來為 log 分組。
使用 Deb.js
Deb.js 庫結合了樣式控制和輸出分組。只需要在新增 .deb() 到需要檢查的函式末尾之前把 Deb.js 包含進來即可。使用.debc() 可以在控制檯顯示摺疊的輸出組。
有了這個庫，我們可以知道傳給該函式的引數，函式的堆疊跟蹤返回值和執行時間。正如上文提到的，這些資訊被很好地組織和巢狀在一起，可以更方便地跟蹤應用流。
瀏覽器終端
Google 瀏覽器的一個殺手鐗是它的擴充套件應用生態系統。它為我們提供了途徑去編寫可安裝的程式在瀏覽器中執行並提供了豐富的 API 給我們使用。最重要的是，我們不必再去學習一門新語言。只需要普通的 HTML、CSS 和 JavaScript 即可。看看這裡《Chrome 擴充套件開發入門》。
Yez!
在 Chrome 網上應用店（Web Store）中甚至有一個單獨的區域叫 Web development，裡面有許多專門為我們開發者製作的有用工具。其中有一個工具叫 Yez!。它為開發者工具皮膚提供了類似終端的功能。可以執行 shell 命令和實時獲得輸出。
該應用本身不足以執行 shell 命令，因為它沒有許可權訪問作業系統。所以這裡需要 Node.js 作為代理。Yez! 通過 web sockets 連線正在執行的 Node.js 應用。通過 Node.js 包管理器安裝 Yez!：
|
1 |
npm install -g yez |
Yez! 整合 Git
Yez! 很好的整合了 Git，它會顯示當前目錄的分支。我們可以執行終端命令並立即得到輸出。
這個擴充套件原本是作為一個任務執行器開發的。所以它提供了任務定義的介面。實際上，這不過是一系列按順序執行的 shell 命令。我們可以通過 shell 指令碼實現同樣的效果。
我們還可以實時檢視終端的輸出，所以這個擴充套件非常適合開發 Node.js 應用。通常我們需要重啟 Node.js 程式，但在 Chrome 中一切都是可見的。
執行 HTTP 請求
作為 web 開發者，我們經常需要讓我們的應用執行 HTTP 請求。也許我們開發了一個 REST API，或者有一個接受 POST 引數的 PHP 指令碼。這裡有一個命令列工具 cURL。它應該是最常用的 web 查詢工具了。
有了 cURL,我們不再需要轉到終端去。這裡可以用 DHC (REST HTTP API Client)。這個應用可以讓我們完全控制 HTTP 請求。我們可以改變請求方式、報頭、或者 GET 和 POST 引數。它還可以顯示請求的結果，連同報頭一起顯示，非常實用。
使用 Chrome Web 驅動進行測試
我們都知道測試的重要性。清楚瞭解我們的程式執行正確對我們來說極為重要。有時候測試的編寫會很困難，特別是當我們要測試使用者介面。幸運的是，這裡有一個 Node.js 模組可以控制我們的瀏覽器（Chrome）並觸發動作比如訪問頁面、點選連結或者填寫表格。它就是 DalekJS。安裝很簡單：
|
1 |
npm install -g dalek-cli |
我們做個小試驗看看它是怎麼工作的。在一個新建的目錄中，我們需要一個 package.json 檔案包含如下內容：
|
1 2 3 4 5 6 7 8 9 |
{ "name": "project", "description": "description", "version": "0.0.1", "devDependencies": { "dalekjs": "0.0.8", "dalek-browser-chrome": "0.0.10" } } |
接著在這個目錄執行：
|
1 |
npm install |
我們會在 node_modules 資料夾中看到有 dalekjs 和 dalek-browser-chrome。回到原來的目錄，新建檔案 test.js，我們會在這裡中編寫我們的測試。這是一個小指令碼用來測試 GitHub 的搜尋功能：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var url = 'https://github.com/'; module.exports = { 'should perform search in GitHub': function (test) { test .open(url) .type('#js-command-bar-field', 'dalek') .submit('#top_search_form') .assert.text('.repolist h3 a', 'dalekjs/dalek', 'There is a link with label dalekjs') .click('[href="/dalekjs/dalek"]') .assert.text('.repository-description p', 'DalekJS Base framework', 'It is the right repository') .done() } }; |
要執行測試，我們需要在控制檯中發射：
|
1 |
dalek ./test.js -b chrome |
DalekJS 會啟動 Google Chrome 瀏覽器的一個例項，然後開啟 GitHub 網站，你可以在搜尋框中輸入 dalek ，它會跳轉到正確的倉庫。最後，Node.js 會把開啟的視窗關閉。控制檯的輸出看起來是這樣的：
DalekJS 支援 PhantomJS、Firefox、InternetExplorer 和 Safari。是個很有用的工具，在Windows、Linux 和 Mac 上都可以工作。在官網 dalekjs.com 上可以獲得文件。
總結
我們在電腦前花最多時間的就是用瀏覽器了。很高興知道 Google Chrome 不僅是瀏覽網頁的程式，還是一個強大的 web 開發工具。
如今，這裡有著大量的實用擴充套件和持續增長的社群。如果你沒有打算用 Google Chrome 開發你的下一個 web 應用，我強烈建議你去試一下。