googlechrome瀏覽器開發(fā)人員工具(完整版)
【正文】 ents）面板中，可以看到整個(gè)頁(yè)面的 DOM 樹結(jié)構(gòu)和每個(gè)元素的所有屬性，同時(shí)也可以實(shí)時(shí)地修改這些元素及其屬性，并可以實(shí)時(shí)看到修改后的效果。通過(guò) Ctrl+[ 和 Ctrl+] 鍵，可以在這些項(xiàng)之間進(jìn)行切換。 點(diǎn)擊位于瀏覽器用戶界面右上角的“頁(yè)面”下拉菜單 ，然后選擇“開發(fā)人員”→“開發(fā)人員工具”。 如何使用腳本 (Scripts) 面板 Google Chrome 瀏覽器開發(fā)人員工具，讓網(wǎng)頁(yè)開發(fā)變得更輕松無(wú)論是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自帶的 Developer Tools，還是 Firefox 的 Firebug ，以及 Safari 的 Web Inspector 和 Opera 的 Dragonfly，他們的宗旨只有一個(gè)——幫助程序員方便、更高效地進(jìn)行網(wǎng)頁(yè)開發(fā)。 如何使用時(shí)間軸 (Timeline) 面板 工具欄最右方還提供了一個(gè)搜索框，方便在當(dāng)前面板中進(jìn)行搜索。我們這里以 Google 簡(jiǎn)體中文首頁(yè)為例，鼠標(biāo)右鍵單擊“ Google 搜索” 按鈕，選擇“審查元素”，您會(huì)看到如下的窗口界面（注：此處使用的內(nèi)嵌工具窗口模式，如您的工具窗口為獨(dú)立窗口模式，可通過(guò)點(diǎn)擊窗口左下方的“停靠” 圖標(biāo) 將其變?yōu)閮?nèi)嵌模式）：向上拖動(dòng)工具窗口中部的滾動(dòng)條，找到“圖片”元素，點(diǎn)擊后，可看到在頁(yè)面上相應(yīng)的元素被選中，這時(shí)我們將工具窗口右側(cè)的滾動(dòng)條拖到最下方，展開 Event Listeners 中個(gè)各項(xiàng)，可看到這個(gè)鏈接（元素）的相關(guān)事件監(jiān)聽函數(shù)。選擇好后點(diǎn)擊啟用資源追蹤（“Enable resource tracking”）按鈕，你會(huì)看到如下的狀態(tài)：同時(shí)您還可以通過(guò)下拉菜單左側(cè)的“列表”選擇使用寬行或窄行的方式來(lái)查看所有資源的信息。下面的圖中標(biāo)注了在腳本面板里的幾個(gè)主要功能： 時(shí)間軸（Timeline）面板時(shí)間軸面板為您的網(wǎng)頁(yè)及網(wǎng)絡(luò)應(yīng)用程序做了一個(gè)詳細(xì)的性能分析，告訴您載入頁(yè)面的時(shí)間究竟花在哪些地方。 我們以 Webkit 演示頁(yè)來(lái)簡(jiǎn)單介紹一下此面板的使用方法： 1. 在 Google Chrome 瀏覽器中打開 Webkit 演示頁(yè)，并打開開發(fā)人員工具的存儲(chǔ)面板 2. 在“黃色便條”中鍵入“第一條記錄”，再新建兩個(gè)便條，分別鍵入“第二條記錄”和“第三條記錄” 它可以幫助您檢查網(wǎng)頁(yè)性能和網(wǎng)絡(luò)利用率。因?yàn)榭刂婆_(tái)會(huì)幫您自動(dòng)補(bǔ)齊命令、對(duì)象名以及屬性名稱等等，所以完全不必?fù)?dān)心需要鍵入太多字符或者敲錯(cuò)。dirxml() 語(yǔ)句的參數(shù)如果是函數(shù)名，如 dirxml(profileEnd) ，會(huì)顯示出這個(gè)函數(shù)，類似于 inspect(profileEnd) 語(yǔ)句；如果參數(shù)是元素的 id，例如 dirxml(ghead) 則以 DOM 樹形式顯示出這個(gè)元素，相當(dāng)于 $(‘ghead’)。您可選擇所需檢測(cè)的項(xiàng)目或選擇“檢查全部”（“ Select All
高考資料相關(guān)推薦
鄂ICP備17016276號(hào)-1