寫在前面
再過幾天就是1024程式員節日了，這裡提前祝各位程式員同胞們節日快樂哈_
回歸正題，本文主要是介紹一下Chrome developer tool(開發者工具)的使用，以友善我們的日常開發與調試。其實在沒用Chrome開發之前就時不時的聽到類似這樣的話：“别用IE，IE太low了，用Chrome吧”。如今,我用過Chrome後才切身體會到，Chrome浏覽器無疑是最受前端青睐的工具，原因除了界面簡潔、大量的應用插件，良好的代碼規範支援、強大的V8解釋器，javascript執行速度和記憶體占有率表現非常優秀之外，還因為Chrome開發者工具提供了大量的便捷功能，友善我們前端調試代碼，我們在日常開發中是越來越離不開Chrome，是否熟練掌握Chrome調試技巧恐怕也會成為考量前端技術水準的标杆。
對于前端技術的學習或者開發調試，浏覽器developer tool的使用是必不可少的，下面，介紹Chrome開發者工具。
Chrome 開發者工具介紹及調試、使用技巧
<h5>1、先打開谷歌浏覽器，然後打開調試界面，打開方式有三種 ：
第一：按F12，
第二：shift+ctrl+i，
第三：滑鼠右鍵點審查元素</h5>
<h5>2、請看下邊的标記</h5>
Chrome開發者工具分為 8 個大子產品
Element 标簽頁： 用于檢視和編輯目前頁面中的 HTML 和 CSS 元素。
Console 标簽頁：用于顯示腳本中所輸出的調試資訊，或運作測試腳本等。
Source 标簽頁：用于檢視和調試目前頁面所加載的腳本的源檔案，可以打斷點進行調試。
Network 标簽頁：用于檢視 HTTP 請求的詳細資訊，如請求頭、響應頭及傳回内容等。
TimeLine 标簽頁： 用于檢視腳本的執行時間、頁面元素渲染時間等資訊。
Profiles 标簽頁：用于檢視 CPU 執行時間與記憶體占用等資訊。
Resource 标簽頁：用于檢視目前頁面所請求的資源檔案，如 HTML，CSS 樣式檔案，圖檔等。
Audits 标簽頁：用于優化前端頁面，加速網頁加載速度等。
<h5>3、使用 Chrome 開發者工具調試</h5>
<h6><1>設定(條件)斷點</h6>
與 Java 調試類似，Chrome 開發者工具提供了斷點設定、删除與斷點存儲等基本功能。同時，開發者工具也提供了設定條件斷點的功能，使開發者可以控制該斷點隻有在滿足某一條件時才會被觸發。當然，也可以直接單純地設定非條件斷點。</br>
在Source标簽元素面闆中對應的JS檔案中的行号處點選右鍵，選擇添加條件斷點後，會彈出一個對話框用于輸入具體的條件或者沒有條件斷點。合理運用好條件斷點能夠提高調試的效率與準确性，使開發人員能更專注于在期望的場景下進行調試。</br>
還有一點就是可以在Source标簽元素面闆中檢視元素屬性，比如通過ajax傳回的資料對象封裝到data中，我們設定斷點後直接将滑鼠放到資料data中可以看到其中傳回的是什麼樣的資料，比如data中是實體對象的每個屬性字段值。</br>
如圖 Source标簽元素面闆中添加條件斷點或斷點
設定條件斷點或斷點
<h6><2>Element 标簽頁對 CSS 的控制</h6>
在網頁開發過程中，經常需要在腳本中控制不同條件下頁面的樣式展示，例如頁面中的标簽顔色，位置，大小等等，在 Chrome 開發者工具的 Element 标簽頁中，其實已經提供了包括該功能在内的一系列對樣式進行實時修改的功能，并且在修改之後能夠立即從頁面中看到變化。如圖
Element 标簽頁對 CSS 的控制
<h6><3>修改 JavaScript 檔案中的代碼</h6>
這是 Chrome 開發者工具提供的一種非常實用的功能，即使開發人員可直接對開發者工具的 Source 标簽頁中的代碼進行修改，并将其儲存，使浏覽器在下次執行該段腳本時，直接加載最新修改的版本。目前的 Firebug 及 IE 自帶的開發者工具都不支援對腳本的直接修改，導緻在 Firefox 或 IE 中調試腳本時，如果需要對代碼進行修改，需要先去修改腳本源檔案，再同步至應用伺服器，再清理浏覽器緩存，最終再次打開應用程式時，才會看到代碼修改後的效果。可見 Chrome 開發者工具提供的這一功能，大大提供了開發者調試腳本的效果。</br>
需要注意的是，由于這種修改是儲存在浏覽器緩存中，是以它不會影響到腳本的源檔案。當開發人員決定采用修改之後的腳本時，需要将其複制到腳本的源檔案中。
<h6><4>使用控制台列印變量值或方法的傳回結果</h6>
當斷點被觸發進入到調試模式時，我們可以将目前任意存在的變量或方法輸入到控制台中，按下回車後，控制台便會傳回相關的結果。該功能可使開發人員友善了解程式運作至斷點處時各個所需要變量或方法的傳回值。</br>
需要注意的是，當在控制台中輸入的方法名字不帶括号時，控制台輸出的是該方法所包含的代碼資訊，而并不是運作結果。
寫在最後
我們借助 Chrome 開發者工具的支援，可以提高網頁應用程式開發與調試的效率。想了解更多，請參考資料Chrome Developer Tools 官方文檔