寫在前面

再過幾天就是1024程序員節日了，這里提前祝各位程序員同胞們節日快樂哈^_^

回歸正題，本文主要是介紹一下Chrome developer tool(開發者工具)的使用，以方便我們的日常開發與調試。其實在沒用Chrome開發之前就時不時的聽到類似這樣的話：“別用IE，IE太low了，用Chrome吧”。如今,我用過Chrome后才切身體會到，Chrome瀏覽器無疑是最受前端青睞的工具，原因除了界面簡潔、大量的應用插件，良好的代碼規范支持、強大的V8解釋器，javascript執行速度和內存占有率表現非常優秀之外，還因為Chrome開發者工具提供了大量的便捷功能，方便我們前端調試代碼，我們在日常開發中是越來越離不開Chrome，是否熟練掌握Chrome調試技巧恐怕也會成為考量前端技術水平的標桿。

對于前端技術的學習或者開發調試，瀏覽器developer tool的使用是必不可少的，下面，介紹Chrome開發者工具。

Chrome 開發者工具介紹及調試、使用技巧

1、先打開谷歌瀏覽器，然后打開調試界面，打開方式有三種 ：
第一：按F12，
第二：shift+ctrl+i，
第三：鼠標右鍵點審查元素

?

2、請看下邊的標記

Chrome開發者工具分為 8 個大模塊

Element 標簽頁： 用于查看和編輯當前頁面中的 HTML 和 CSS 元素。
Console 標簽頁：用于顯示腳本中所輸出的調試信息，或運行測試腳本等。
Source 標簽頁：用于查看和調試當前頁面所加載的腳本的源文件，可以打斷點進行調試。
Network 標簽頁：用于查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。
TimeLine 標簽頁： 用于查看腳本的執行時間、頁面元素渲染時間等信息。
Profiles 標簽頁：用于查看 CPU 執行時間與內存占用等信息。
Resource 標簽頁：用于查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件，圖片等。
Audits 標簽頁：用于優化前端頁面，加速網頁加載速度等。

?

3、使用 Chrome 開發者工具調試

?

<1>設置(條件)斷點

與 Java 調試類似，Chrome 開發者工具提供了斷點設置、刪除與斷點存儲等基本功能。同時，開發者工具也提供了設置條件斷點的功能，使開發者可以控制該斷點只有在滿足某一條件時才會被觸發。當然，也可以直接單純地設置非條件斷點。
在Source標簽元素面板中對應的JS文件中的行號處點擊右鍵，選擇添加條件斷點后，會彈出一個對話框用于輸入具體的條件或者沒有條件斷點。合理運用好條件斷點能夠提高調試的效率與準確性，使開發人員能更專注于在期望的場景下進行調試。
還有一點就是可以在Source標簽元素面板中查看元素屬性，比如通過ajax返回的數據對象封裝到data中，我們設置斷點后直接將鼠標放到數據data中可以看到其中返回的是什么樣的數據，比如data中是實體對象的每個屬性字段值。
如圖 Source標簽元素面板中添加條件斷點或斷點

設置條件斷點或斷點

?

<2>Element 標簽頁對 CSS 的控制

在網頁開發過程中，經常需要在腳本中控制不同條件下頁面的樣式展示，例如頁面中的標簽顏色，位置，大小等等，在 Chrome 開發者工具的 Element 標簽頁中，其實已經提供了包括該功能在內的一系列對樣式進行實時修改的功能，并且在修改之后能夠立即從頁面中看到變化。如圖

Element 標簽頁對 CSS 的控制

?

<3>修改 JavaScript 文件中的代碼

這是 Chrome 開發者工具提供的一種非常實用的功能，即使開發人員可直接對開發者工具的 Source 標簽頁中的代碼進行修改，并將其保存，使瀏覽器在下次執行該段腳本時，直接加載最新修改的版本。目前的 Firebug 及 IE 自帶的開發者工具都不支持對腳本的直接修改，導致在 Firefox 或 IE 中調試腳本時，如果需要對代碼進行修改，需要先去修改腳本源文件，再同步至應用服務器，再清理瀏覽器緩存，最終再次打開應用程序時，才會看到代碼修改后的效果?？梢?Chrome 開發者工具提供的這一功能，大大提供了開發者調試腳本的效果。
需要注意的是，由于這種修改是保存在瀏覽器緩存中，因此它不會影響到腳本的源文件。當開發人員決定采用修改之后的腳本時，需要將其復制到腳本的源文件中。

?

<4>使用控制臺打印變量值或方法的返回結果

當斷點被觸發進入到調試模式時，我們可以將當前任意存在的變量或方法輸入到控制臺中，按下回車后，控制臺便會返回相關的結果。該功能可使開發人員方便了解程序運行至斷點處時各個所需要變量或方法的返回值。
需要注意的是，當在控制臺中輸入的方法名字不帶括號時，控制臺輸出的是該方法所包含的代碼信息，而并不是運行結果。

寫在最后

我們借助 Chrome 開發者工具的支持，可以提高網頁應用程序開發與調試的效率。想了解更多，請參考資料Chrome Developer Tools 官方文檔

?

文／wblearn（簡書作者）
原文鏈接：http://www.jianshu.com/p/bee295965800
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。

總結

以上是生活随笔為你收集整理的程序员的你是否熟练掌握Chrome开发者工具？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。