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