googlechrome瀏覽器開發(fā)人員工具-預覽頁
【正文】 讓您可以隨時隨地對任何網(wǎng)頁的 CSS、 HTML 和 JavaScript 進行實時編輯、調(diào)試以及監(jiān)控。 如何使用元素 (Elements) 面板 如何使用剖析 (Profiles) 面板 （如果您想試用最新版本的的開發(fā)人員工具，可以下載開發(fā)版或測試版（英文網(wǎng)頁）Google Chrome 瀏覽器。 右鍵點擊網(wǎng)頁上的任一元素，在彈出菜單中選擇“審查元素”。 在 Mac 上，使用 Command+Option+I 快捷鍵打開開發(fā)人員工具（或使用 Command+Option+J 直接進入 JavaScript 控制臺）。 窗口右下角顯示的是錯誤和警告計數(shù)，點擊它們也會打開控制臺。在工具窗口右側(cè)，顯示的是被選元素的樣式信息，如有興趣，可以嘗試通過雙擊現(xiàn)有屬性來修改該元素的 style 屬性或應(yīng)用的某個選擇器中的屬性值，也可以通過取消勾選的方式去掉一些屬性，同時觀察頁面的實時變化。拖動工具窗口最右側(cè)的滾動條，在展開的 Styles 模塊下方還有 Metrics、Properties、Event Listeners 幾大模塊。通過 Event Listeners 項右側(cè)的“齒輪”圖標，您可以選擇是只顯示選中節(jié)點上的注冊的事件，還是顯示整個事件流中所有注冊的事件。資源（Resources）面板在資源面板中，你可以看到從網(wǎng)絡(luò)上下載的所有資源。這是加載此網(wǎng)頁使用網(wǎng)絡(luò)資源的時間表。在了解了網(wǎng)頁各部分加載所花費的的時間后，您可以進行有效改進從而提高網(wǎng)站的效率。打開“ Headers ”標簽頁可以查看完整的頭信息。圖中的①—③的3個圖標分別代表： ① 單步調(diào)試，不進入函數(shù)體內(nèi)部 ② 單步調(diào)試，進入函數(shù)體內(nèi)部 ③ 跳出當前函數(shù)設(shè)置斷點后按 F5 刷新，頁面會在執(zhí)行到斷點語句處停下，如圖：單步調(diào)試，進入函數(shù)體內(nèi)部Shift+Ctrl+。從加載資源到解析 JavaScript 腳本、計算樣式表及頁面渲染的所有步驟，您都可以在這里看到它們消耗的時間和內(nèi)存。您還可以拖動上半部分區(qū)域的時間軸上的灰色豎條，設(shè)定下方詳細數(shù)據(jù)區(qū)的時間范圍，如下圖所示： CPU 分析器顯示的是 JavaScript 腳本里的每個函數(shù)分別占用了多少執(zhí)行時間 點擊開始按鈕，并刷新測試頁面，開始信息收集。在頁面載入的過程中，您可以在任意時刻點擊內(nèi)存信息采集按鈕，獲取那一時刻內(nèi)存使用狀況信息。例如在搜索框里輸入“ 30KB ”，您會看到所有大于30KB的記錄條被標為淺橙色，同時左側(cè)的內(nèi)存使用記錄旁也會有數(shù)字表明在這個記錄中有多少條滿足搜索條件的結(jié)果。在存儲面板中，您可以點擊數(shù)據(jù)庫圖標，會發(fā)現(xiàn)此頁面建立了一個名為“ WebkitStickyNotes ”的表，點擊此表，可查看里面所有的記錄。打開審計面板，您將看到這樣的界面：使用 dir() 語句可獲得一個元素或?qū)ο蟮脑敿殞傩裕巛斎?dir(ghead) ，您將會看到：160
高考資料相關(guān)推薦
鄂ICP備17016276號-1