寫在前面
再過幾天就是1024程序員節(jié)日了，這里提前祝各位程序員同胞們節(jié)日快樂哈_
回歸正題，本文主要是介紹一下Chrome developer tool(開發(fā)者工具)的使用，以方便我們的日常開發(fā)與調(diào)試。其實在沒用Chrome開發(fā)之前就時不時的聽到類似這樣的話：“別用IE，IE太low了，用Chrome吧”。如今,我用過Chrome后才切身體會到，Chrome瀏覽器無疑是最受前端青睞的工具，原因除了界面簡潔、大量的應(yīng)用插件，良好的代碼規(guī)范支持、強大的V8解釋器，javascript執(zhí)行速度和內(nèi)存占有率表現(xiàn)非常優(yōu)秀之外，還因為Chrome開發(fā)者工具提供了大量的便捷功能，方便我們前端調(diào)試代碼，我們在日常開發(fā)中是越來越離不開Chrome，是否熟練掌握Chrome調(diào)試技巧恐怕也會成為考量前端技術(shù)水平的標(biāo)桿。
對于前端技術(shù)的學(xué)習(xí)或者開發(fā)調(diào)試，瀏覽器developer tool的使用是必不可少的，下面，介紹Chrome開發(fā)者工具。
Chrome 開發(fā)者工具介紹及調(diào)試、使用技巧
<h5>1、先打開谷歌瀏覽器，然后打開調(diào)試界面，打開方式有三種 ：
第一：按F12，
第二：shift+ctrl+i，
第三：鼠標(biāo)右鍵點審查元素</h5>
<h5>2、請看下邊的標(biāo)記</h5>
Element 標(biāo)簽頁： 用于查看和編輯當(dāng)前頁面中的 HTML 和 CSS 元素。
Console 標(biāo)簽頁：用于顯示腳本中所輸出的調(diào)試信息，或運行測試腳本等。
Source 標(biāo)簽頁：用于查看和調(diào)試當(dāng)前頁面所加載的腳本的源文件，可以打斷點進行調(diào)試。
Network 標(biāo)簽頁：用于查看 HTTP 請求的詳細信息，如請求頭、響應(yīng)頭及返回內(nèi)容等。
TimeLine 標(biāo)簽頁： 用于查看腳本的執(zhí)行時間、頁面元素渲染時間等信息。
Profiles 標(biāo)簽頁：用于查看 CPU 執(zhí)行時間與內(nèi)存占用等信息。
Resource 標(biāo)簽頁：用于查看當(dāng)前頁面所請求的資源文件，如 HTML，CSS 樣式文件，圖片等。
Audits 標(biāo)簽頁：用于優(yōu)化前端頁面，加速網(wǎng)頁加載速度等。
<h5>3、使用 Chrome 開發(fā)者工具調(diào)試</h5>
<h6><1>設(shè)置(條件)斷點</h6>
與 Java 調(diào)試類似，Chrome 開發(fā)者工具提供了斷點設(shè)置、刪除與斷點存儲等基本功能。同時，開發(fā)者工具也提供了設(shè)置條件斷點的功能，使開發(fā)者可以控制該斷點只有在滿足某一條件時才會被觸發(fā)。當(dāng)然，也可以直接單純地設(shè)置非條件斷點。</br>
在Source標(biāo)簽元素面板中對應(yīng)的JS文件中的行號處點擊右鍵，選擇添加條件斷點后，會彈出一個對話框用于輸入具體的條件或者沒有條件斷點。合理運用好條件斷點能夠提高調(diào)試的效率與準(zhǔn)確性，使開發(fā)人員能更專注于在期望的場景下進行調(diào)試。</br>
還有一點就是可以在Source標(biāo)簽元素面板中查看元素屬性，比如通過ajax返回的數(shù)據(jù)對象封裝到data中，我們設(shè)置斷點后直接將鼠標(biāo)放到數(shù)據(jù)data中可以看到其中返回的是什么樣的數(shù)據(jù)，比如data中是實體對象的每個屬性字段值。</br>
如圖 Source標(biāo)簽元素面板中添加條件斷點或斷點
<h6><2>Element 標(biāo)簽頁對 CSS 的控制</h6>
在網(wǎng)頁開發(fā)過程中，經(jīng)常需要在腳本中控制不同條件下頁面的樣式展示，例如頁面中的標(biāo)簽顏色，位置，大小等等，在 Chrome 開發(fā)者工具的 Element 標(biāo)簽頁中，其實已經(jīng)提供了包括該功能在內(nèi)的一系列對樣式進行實時修改的功能，并且在修改之后能夠立即從頁面中看到變化。如圖
<h6><3>修改 JavaScript 文件中的代碼</h6>
這是 Chrome 開發(fā)者工具提供的一種非常實用的功能，即使開發(fā)人員可直接對開發(fā)者工具的 Source 標(biāo)簽頁中的代碼進行修改，并將其保存，使瀏覽器在下次執(zhí)行該段腳本時，直接加載最新修改的版本。目前的 Firebug 及 IE 自帶的開發(fā)者工具都不支持對腳本的直接修改，導(dǎo)致在 Firefox 或 IE 中調(diào)試腳本時，如果需要對代碼進行修改，需要先去修改腳本源文件，再同步至應(yīng)用服務(wù)器，再清理瀏覽器緩存，最終再次打開應(yīng)用程序時，才會看到代碼修改后的效果。可見 Chrome 開發(fā)者工具提供的這一功能，大大提供了開發(fā)者調(diào)試腳本的效果。</br>
需要注意的是，由于這種修改是保存在瀏覽器緩存中，因此它不會影響到腳本的源文件。當(dāng)開發(fā)人員決定采用修改之后的腳本時，需要將其復(fù)制到腳本的源文件中。
<h6><4>使用控制臺打印變量值或方法的返回結(jié)果</h6>
當(dāng)斷點被觸發(fā)進入到調(diào)試模式時，我們可以將當(dāng)前任意存在的變量或方法輸入到控制臺中，按下回車后，控制臺便會返回相關(guān)的結(jié)果。該功能可使開發(fā)人員方便了解程序運行至斷點處時各個所需要變量或方法的返回值。</br>
需要注意的是，當(dāng)在控制臺中輸入的方法名字不帶括號時，控制臺輸出的是該方法所包含的代碼信息，而并不是運行結(jié)果。
寫在最后
我們借助 Chrome 開發(fā)者工具的支持，可以提高網(wǎng)頁應(yīng)用程序開發(fā)與調(diào)試的效率。想了解更多，請參考資料Chrome Developer Tools 官方文檔
