Chrome瀏覽器以其簡單、快速、安全、穩(wěn)定、擴(kuò)展豐富等特性受到了不少人的喜愛，除了這些特性，Chrome瀏覽器還提供了非常簡單方便的開發(fā)人員工具，可以為開發(fā)提高效率，加上Chrome瀏覽器對HTML5和CSS3的支持度相對比較好，很多web新技術(shù)在Chrome瀏覽器上的呈現(xiàn)效果都很不錯(cuò)，不少web設(shè)計(jì)和開發(fā)人員對Chrome瀏覽器也情有獨(dú)鐘，不少web設(shè)計(jì)和開發(fā)人員甚至表示Chrome已經(jīng)成為他們的絕對主力瀏覽器。

　　今天我們就來看看Chrome瀏覽器到底提供了怎樣方便好用的開發(fā)人員工具。

　　我們在Chrome瀏覽器中打開某個(gè)頁面，選定網(wǎng)頁元素(如通欄、文字、圖片等)，按鼠標(biāo)右鍵，從右鍵菜單中選擇“審查元素”，就可以打開Chrome瀏覽器的開發(fā)人員工具，快捷鍵為“Ctrl + Shift +?C?”，也可以直接按F12。

　　或者點(diǎn)擊Chrome瀏覽器右上角的“小扳手”按鈕，從菜單中選擇“工具”，我們就可以從子菜單中看到“編碼”、“查看源代碼”、“開發(fā)人員工具”、“JavaScript控制臺(tái)”等和開發(fā)相關(guān)的一些選項(xiàng)。點(diǎn)擊“開發(fā)人員工具”，也可以打開Chrome瀏覽器的開發(fā)輔助界面。

　　?
　　左圖：按F12打開Chrome開發(fā)人員工具　　右圖：右鍵菜單打開Chrome開發(fā)人員工具

從“扳手”菜單打開Chrome開發(fā)人員工具

　　從菜單中我們可以看到和開發(fā)相關(guān)的快捷方式：

　　Ctrl + U 鍵 可以查看源代碼
　　Ctrl + Shift + I 鍵可打開開發(fā)人員工具。
　　Ctrl + Shift + J 可打開開發(fā)人員工具并轉(zhuǎn)到“控制臺(tái)”。

　　Chrome瀏覽器的開發(fā)人員工具界面大致是下面這個(gè)樣子，開發(fā)工具窗口出現(xiàn)在瀏覽界面的下面部分，

　　點(diǎn)擊下角的

按鈕，Chrome開發(fā)人員工具可以彈出成獨(dú)立窗口，按同樣位置按鈕會(huì)恢復(fù)成“瀏覽器+開發(fā)人員工具”的合并界面。

　　點(diǎn)擊右下角的齒輪按鈕，可以打開設(shè)置面板，在這里開發(fā)人員可以根據(jù)自己的開發(fā)習(xí)慣對幾個(gè)開發(fā)工具做一些設(shè)置，比如代碼顯示方式等。

　　在Chrome開發(fā)人員工具窗口的上半部，有幾個(gè)主要的功能按鈕。開發(fā)者可以選擇合適的功能使用，不同的功能窗口底部會(huì)顯示不同的輔助按鈕。下面我們分別簡要介紹它們的功能。

　　元素(Elements)

　　以瀏覽器查看網(wǎng)頁的方式查看網(wǎng)頁的原始 HTML、原始 CSS 樣式和文檔對象模型，并進(jìn)行實(shí)時(shí)操作。

　　元素面板可以讓開發(fā)者在一個(gè) DOM 樹中查看所有內(nèi)容，并且允許您對 DOM 元素執(zhí)行檢查和即時(shí)修改。

　　元素面板有時(shí)是“查看網(wǎng)頁源代碼”更好的方式。在元素面板內(nèi)，網(wǎng)頁的 DOM 將進(jìn)行恰當(dāng)編排，可以輕松顯示 HTML 元素及其上級(jí)元素和下級(jí)元素。如果一些網(wǎng)頁的代碼不太規(guī)范，查看網(wǎng)頁的結(jié)構(gòu)會(huì)非常困難。元素面板可以解決查看網(wǎng)頁實(shí)際底層結(jié)構(gòu)方面的問題。

　　資源(Resoures)

　　審查已載入審查頁面/可以在審查頁面中使用的資源。它可讓開發(fā)者與包含框架資源(HTML、JavaScript、CSS、圖片、字體等)的框架樹、HTML5 數(shù)據(jù)庫、本地存儲(chǔ)、Cookie 和應(yīng)用程序緩存進(jìn)行交互。

　　網(wǎng)絡(luò)(Network)

　　網(wǎng)絡(luò)面板可以讓用戶檢查通過網(wǎng)絡(luò)下載的資源。了解自己的網(wǎng)頁或應(yīng)用程序的正在從網(wǎng)絡(luò)服務(wù)器中請求哪些組件、這些請求花費(fèi)了多長時(shí)間、需要多少帶寬，還可以查看每個(gè)資源的 HTTP 請求和響應(yīng)標(biāo)題。有效幫助開發(fā)者提高網(wǎng)頁的載入速度。

　　腳本(Scripts)

　　深入查看網(wǎng)頁的 JavaScript，可以在這里找到網(wǎng)頁所需的腳本列表和功能完整的腳本調(diào)試程序，并且可以在 JavaScript 代碼中設(shè)置斷點(diǎn)做調(diào)試，甚至可以更改運(yùn)行中的 JavaScrip，。

　　時(shí)間線(Timeline)

　　主要針對網(wǎng)頁應(yīng)用的時(shí)間和速度分析，全面了解在載入網(wǎng)絡(luò)應(yīng)用程序和網(wǎng)頁時(shí)，時(shí)間到底用在什么地方。從載入資源到解析 JavaScript、計(jì)算樣式以及重繪，所有事件都將繪制在時(shí)間軸上，了解瀏覽器要花費(fèi)多長時(shí)間處理 DOM 事件、呈現(xiàn)網(wǎng)頁布局和繪制窗口等。

　　分析(Profiles)

　　分析面板幫助開發(fā)者分析網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)頁的執(zhí)行時(shí)間和內(nèi)存使用情況。分析面板包含兩種分析器：CPU?分析器 (CPU profiler) 和堆分析器 (Heap profiler)。CPU 分析器顯示在網(wǎng)頁的各個(gè) JavaScript 函數(shù)中執(zhí)行時(shí)間花在了哪些地方，堆分析器按網(wǎng)頁的 JavaScript 對象顯示內(nèi)存分配。這兩種分析器可以幫助開發(fā)者了解資源的使用位置，進(jìn)一步優(yōu)化代碼。

　　檢查(Audits)

　　這個(gè)功能主要是對網(wǎng)頁載入進(jìn)行分析。點(diǎn)擊run按鈕，就可以開始分析頁面，之后就可以看到分析結(jié)果，它甚至可以分析出頁面上樣式表中有哪些CSS是沒有被使用的。這個(gè)功能對于優(yōu)化前端頁面、加速網(wǎng)頁加載速度很有用。

　　控制臺(tái)(Console)

　　控制臺(tái)的用途非常廣泛，可以用于檢查 DOM、調(diào)試 JavaScript 或分析 HTML 解析錯(cuò)誤。在開發(fā)人員工具狀態(tài)下，我們隨時(shí)可以按Esc鍵快速切換到控制臺(tái)。

　　以上我們介紹了Chrome瀏覽器內(nèi)置的開發(fā)人員工具的基本功能和界面，每種功能面板中還有一些具體的功能細(xì)節(jié)，相信web設(shè)計(jì)和開發(fā)人員都能很快上手，這里就不贅述了。

　　我們知道Chrome瀏覽器是采用的Webkit內(nèi)核，Chrome瀏覽器提供的開發(fā)人員工具也主要基于 WebKit 網(wǎng)絡(luò)檢查器(開放源代碼 WebKit 項(xiàng)目的一部分)。借助Chrome瀏覽器內(nèi)置的這些開發(fā)人員工具，Web設(shè)計(jì)和開發(fā)人員可以非常方便地深入查看、研究和調(diào)試網(wǎng)頁應(yīng)用代碼，有效提高工作效率。

　　Chrome瀏覽器專區(qū)：http://soft.yesky.com/chrome/

總結(jié)

以上是生活随笔為你收集整理的不仅仅是浏览器 走近Chrome开发人员工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。