新開發的網頁須要在手機或是模擬機上運行測試，html
能夠藉助 Chrome提供的手機網頁預覽程序進行簡單調試。查看 製做的網頁是否可以適合各類手機型號使用。前端
下面因此下如何使用Chrome調試多類型手機網頁。web
首先 下載Chrome 瀏覽器：http://rj.baidu.com/soft/detail/14744.html?ald瀏覽器
在你要調試的網頁或是本地頁面中。按F12 打開調試器。(即開發者模式)性能優化
Chrome V35 版本中的開發者工具分爲 8 個大模塊，每一個模塊及其主要功能爲：網絡
- Element 標籤頁： 用於查看和編輯當前頁面中的 HTML 和 CSS 元素。
- Network 標籤頁：用於查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。
- Source 標籤頁：用於查看和調試當前頁面所加載的腳本的源文件。
- TimeLine 標籤頁： 用於查看腳本的執行時間、頁面元素渲染時間等信息。
- Profiles 標籤頁：用於查看 CPU 執行時間與內存佔用等信息。
- Resource 標籤頁：用於查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件等。
- Audits 標籤頁：用於優化前端頁面，加速網頁加載速度等。
- Console 標籤頁：用於顯示腳本中所輸出的調試信息，或運行測試腳本等。
//==============================================工具
下面來分別說下每一個Tab的做用。性能
Elements標籤頁測試
這個就是查看、編輯頁面上的元素，包括HTML和CSS：優化
你能夠直接在某個元素上雙擊修改元素的屬性，或者你點右鍵選"Edit as
Html"直接對元素的HTML進行編輯，或者刪除某個元素，全部的修改都會即時在頁面上獲得呈現。
Resources標籤頁
能夠查看到請求的資源狀況，包括CSS、JS、圖片等的內容，同時還能夠查看到存儲相關的如Cookies、HTML5的Database和LocalStore等，你能夠對存儲的內容編輯和刪除。
Network標籤頁
分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用，特別是在查看Ajax類請求的時候，很是有幫助。
注意是在你打開Chrome開發者工具後發起的請求，纔會在這裏顯示的哦。
點擊左側某一個具體去請求URL，能夠看到該請求的詳細HTTP請求狀況：HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息
Timeline標籤頁
注意這個Timeline的標籤頁不是指網絡請求的時間響應狀況哦(這個在Network標籤頁裏查看)，
這個Timeline指的JS執行時間、頁面元素渲染時間。
Profiles標籤頁
這個主要是作性能優化的，包括查看CPU執行時間與內存佔用
Audits標籤頁
這個對於優化前端頁面、加速網頁加載速度頗有用哦(至關與Yslow)
點擊run按鈕，就能夠開始分析頁面，分析完了就能夠看到分析結果了.
Console標籤頁
就是Javascript控制檯了：
這個除了查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本之外，還能夠看成Javascript API查看用。
例如查看console都有哪些方法和屬性，能夠直接在Console中輸入"console"並執行
Chrome除了簡潔、快速，如今的Chrome的插件也很是的豐富了。
對於web開發者來講，Chrome對於HTML五、CSS3等一些新標準的支 持也是比較完善的，
並且Chrome的開發者工具，我的認爲真的很是好用。