googlechrome瀏覽器開發(fā)人員工具-資料下載頁
2025-06-25 01:12本頁面
【正文】 “第一條記錄”，再新建兩個便條，分別鍵入“第二條記錄”和“第三條記錄” 在存儲面板中，您可以點擊數(shù)據(jù)庫圖標，會發(fā)現(xiàn)此頁面建立了一個名為“ WebkitStickyNotes ”的表，點擊此表，可查看里面所有的記錄。您也可以點擊數(shù)據(jù)庫圖標，然后直接在右側(cè)的命令行窗口鍵入 SQL 語句進行查詢。開發(fā)人員工具在您鍵入 SQL 語句時，具有自動補齊功能，使用起來非常方便。在 COOKIES 項下，您可以查看到該頁保存的所有 Cookies ，也可以通過右鍵菜單刪除它們。審計（Audits）面板審計面板是在 Google Chrome 瀏覽器 中新引入的模塊。它可以幫助您檢查網(wǎng)頁性能和網(wǎng)絡(luò)利用率。打開審計面板，您將看到這樣的界面：您可選擇所需檢測的項目或選擇“檢查全部”（“ Select All ”），然后點擊“運行”（“ Run ”）按鈕，開發(fā)人員工具將為您的網(wǎng)頁生成一份詳細的審計報告并給出關(guān)于網(wǎng)絡(luò)利用及性能優(yōu)化方面的建議，如下圖所示，為 Google Chrome 瀏覽器開發(fā)人員工具為更多 Google 產(chǎn)品頁所生成的審計報告：JavaScript 控制臺（Console）JavaScript 控制臺可與其它面板聯(lián)合使用，您可以借助它來審查 DOM 元素、調(diào)試 JavaScript 代碼、查看 HTML 解析錯誤等。我們再次以 Google 簡體中文首頁為例說明 JavaScript 控制臺的用法：進入 Google Chrome 瀏覽器開發(fā)人員工具的元素面板，點擊工具窗口左下角的第二個圖標打開 JavaScript 控制臺，您可以通過 $(‘element_id’) 來查看一個 DOM 元素，也可以通過“ $N ”（n=0,1,2,...）查看最近選中的元素。$0 為最近選中的元素，$1 為前一個選中的元素，以此類推：您也可以通過 inspect() 語句獲得當前窗口或頁面中的對象，例如：使用 inspect() 可獲得當前瀏覽器信息，而 inspect(profileEnd) 則會顯示 profileEnd 這個函數(shù)：因為控制臺會幫您自動補齊命令、對象名以及屬性名稱等等，所以完全不必擔心需要鍵入太多字符或者敲錯。使用 dir() 語句可獲得一個元素或?qū)ο蟮脑敿殞傩?，如輸?dir(ghead) ，您將會看到：dirxml() 語句的參數(shù)如果是函數(shù)名，如 dirxml(profileEnd) ，會顯示出這個函數(shù)，類似于 inspect(profileEnd) 語句；如果參數(shù)是元素的 id，例如 dirxml(ghead) 則以 DOM 樹形式顯示出這個元素，相當于 $(‘ghead’)。本文對 Google Chrome 瀏覽器開發(fā)人員工具的主要功能做了一個總結(jié)，希望能幫助廣大的網(wǎng)頁工作人員更好的利用這套工具解決在網(wǎng)頁開發(fā)、調(diào)試階段遇到的一些問題。23 / 23
高考資料相關(guān)推薦
鄂ICP備17016276號-1