《JS前臺(tái)調(diào)試概述》PPT課件.ppt

IE8JS前臺(tái)調(diào)試概述,2011-05-31李元?jiǎng)?目錄,“開(kāi)發(fā)人員工具”的認(rèn)識(shí)“開(kāi)發(fā)人員工具”模式“開(kāi)發(fā)人員工具”調(diào)試JS腳本“開(kāi)發(fā)人員工具”探查器,認(rèn)識(shí)“開(kāi)發(fā)人員工具”,“開(kāi)發(fā)人員工具”概述“開(kāi)發(fā)人員工具”菜單欄。,“開(kāi)發(fā)人員工具”概述,“開(kāi)發(fā)人員工具”前身是“IEdevtoolbar”，以前只是IE的一個(gè)插件而已，而在IE8中，瀏覽器已經(jīng)自動(dòng)集成了這個(gè)工具，不僅改了名字，而且功能也加強(qiáng)了很多?！伴_(kāi)發(fā)人員工具”在IE8的工具菜單下，或者直接點(diǎn)擊F12快捷鍵也可以呼叫出來(lái)，F(xiàn)12是個(gè)奇偶快捷鍵，奇數(shù)是打開(kāi)“開(kāi)發(fā)人員工具”，偶數(shù)是關(guān)閉“開(kāi)發(fā)人員工具”。打開(kāi)之后如下圖：,開(kāi)發(fā)人員工具就是為前端開(kāi)發(fā)人員開(kāi)發(fā)頁(yè)面而設(shè)計(jì)的工具。提供一系列的小工具，讓你可以方便的查找頁(yè)面的bug，包括html代碼、css代碼和JavaScript代碼，還有取色、屏幕尺子等。ok，我們已經(jīng)看到它了，并且也知道它能干什么了。那就讓我們根據(jù)菜單的順序一一來(lái)介紹它吧,【文件】菜單【全部撤銷(xiāo)】：以前在開(kāi)發(fā)人員工具中進(jìn)行的操作全部取消，并且刷新頁(yè)面和DOM結(jié)構(gòu)?！咀远xInternetExplorer試圖源】：通俗一點(diǎn)的說(shuō)法就是：“用什么編輯器查看網(wǎng)頁(yè)源文件”。例如：如果要設(shè)置我們查看源文件使用其他工具，在“其他”中選擇即可?！就顺觥浚哼@個(gè)我就不多說(shuō)了。,菜單-文件,【查找】菜單【單擊選擇元素】：快捷鍵Ctrl+B，和點(diǎn)擊圖中的那個(gè)鼠標(biāo)ICO按鈕效果一樣（見(jiàn)圖一）。這個(gè)最最常用的功能，也是一個(gè)奇偶開(kāi)關(guān)。打開(kāi)時(shí)，用鼠標(biāo)點(diǎn)擊頁(yè)面上的元素時(shí)，就會(huì)選中改元素，并且列出該元素的DOM結(jié)構(gòu)、CSS樣式等信息（見(jiàn)圖二）。,菜單-查看,圖一,圖二,圖二中，左邊的區(qū)域顯示了此超鏈接元素的DOM信息。可以明確地看出它的父元素、子元素以及兄弟元素?！緲邮健坑颐娴膮^(qū)域顯示了該元素樣式信息。其中被線(xiàn)劃掉的樣式，表示該樣式因?yàn)閮?yōu)先級(jí)不夠高，已經(jīng)不再起作用了。調(diào)試的時(shí)候，前面的勾可以鉤掉的，鉤掉的時(shí)候表示強(qiáng)行刪除此樣式。而且，每個(gè)樣式的屬性，用鼠標(biāo)點(diǎn)擊后都可以立即修改。從而即時(shí)的看到修改后的頁(yè)面效果，非常方便。,重要說(shuō)明：使用開(kāi)發(fā)人員工具所做的任何更改都是臨時(shí)的，不影響網(wǎng)頁(yè)的基礎(chǔ)源代碼。刷新頁(yè)面時(shí)，將還原更改，瀏覽器將導(dǎo)航到新的頁(yè)面或關(guān)閉瀏覽器窗口。單擊“開(kāi)發(fā)人員工具”工具欄上的“磁盤(pán)(保存)”按鈕可將HTML和CSS更改保存到文本文件。,【跟蹤樣式】視圖和【樣式】視圖的作用是一樣的，都是用來(lái)看選中元素的樣式信息。區(qū)別僅僅是：它換了個(gè)視圖方式而已。具體習(xí)慣哪種視圖，就看你自己的喜好了?！緲邮健抗ぞ咭约?jí)聯(lián)順序顯示應(yīng)用于所選元素的所有樣式規(guī)則?！靖櫂邮健抗ぞ唢@示特定樣式屬性的計(jì)算。在該視圖中，樣式按屬性（而不是規(guī)則）進(jìn)行分組。,【布局】視圖可以顯示選中元素的盒裝模型信息。【布局】工具顯示下列值：偏移量值表示所選對(duì)象與其父項(xiàng)之間的距離，由offsetLeft和offsetTop屬性表示?！巴膺吘唷盡argin、“邊框”Border和“內(nèi)邊距”P(pán)adding值顯示,在網(wǎng)頁(yè)中指定的相應(yīng)值。如果未在網(wǎng)頁(yè)的源代碼中指定值，“布局”工具將顯示W(wǎng)indowsInternetExplorer使用的默認(rèn)值。最內(nèi)部的值是元素的高度和寬度，由offsetHeight和offsetWidth屬性定義.默認(rèn)情況下，“布局”工具假定以像素為單位指定框模型屬性。,【屬性】視圖可以查看選中元素的屬性信息。非常令人高興的是：你可以立即增加或者刪除一些屬性，用來(lái)快速的調(diào)試頁(yè)面。,通過(guò)單擊“屬性”工具窗口頂部的按鈕可添加或刪除屬性。通過(guò)組合框，您可選擇要添加的屬性。,【禁用】菜單【腳本】：會(huì)禁止使用頁(yè)面的JavaScript或者VBScript腳本。為什么要禁用呢？為了測(cè)試頁(yè)面的健壯性。有些對(duì)頁(yè)面設(shè)計(jì)要求比較高的客戶(hù)會(huì)問(wèn)：“如果客戶(hù)禁用了腳本，這個(gè)頁(yè)面還能不能使用呢？”恩，對(duì)，這個(gè)功能就是用來(lái)測(cè)試這些要求比較高客戶(hù)的苛刻需求的?！緩棾龃翱谧柚钩绦颉浚簭棾龃翱诘倪^(guò)濾器。用來(lái)測(cè)試哪種“怎么才能讓瀏覽器或者安全軟件不過(guò)濾掉我的彈出窗口。,菜單-禁用,【CSS】：用這里來(lái)測(cè)試一下你的頁(yè)面在CSS裸奔時(shí)的姿態(tài)吧。這個(gè)也是檢驗(yàn)頁(yè)面健壯性和可訪問(wèn)性的重要測(cè)試”,【查看】菜單【類(lèi)和ID信息】：快捷鍵是Ctrl+I，奇偶開(kāi)關(guān)。打開(kāi)以后，你就會(huì)看到頁(yè)面上布滿(mǎn)了密密麻麻的紅色色塊。同時(shí)會(huì)顯示出class名稱(chēng)或者ID名稱(chēng)。是的，這個(gè)就是查看類(lèi)和ID信息的效果了?！炬溄勇窂健浚汉蜕厦嬉粯印Ｋ鼤?huì)把頁(yè)面中的所有超鏈接都會(huì)一坨坨的紅色框出來(lái)，并且顯示其鏈接地址。,菜單-查看,【鏈接報(bào)告】：使用鏈接報(bào)告功能，開(kāi)發(fā)人員工具會(huì)幫你生成一份此頁(yè)面的鏈接報(bào)表。包含鏈接數(shù)量、鏈接地址、是否新窗口打開(kāi)等信息?！具x項(xiàng)卡索引】：高亮顯示出所有包含tabindex屬性的元素。tabindex屬性的設(shè)置，可以改變網(wǎng)頁(yè)元素獲得焦點(diǎn)的順序?！驹L問(wèn)鍵】：高亮顯示所有包含“accesskey屬性”的元素。設(shè)置accesskey屬性，可以設(shè)定元素獲得焦點(diǎn)的快捷鍵?！驹次募俊綝OM（元素）】：快捷鍵是Ctrl+T。生成一份源文件。此源文件只包含選中元素的DOM結(jié)構(gòu)信息?！綝OM（頁(yè)面）】：快捷鍵Ctrl+G。生成一份源文件。此源文件包含整個(gè)頁(yè)面的DOM信息結(jié)構(gòu)?！驹紶顟B(tài)】：其實(shí)就是“查看網(wǎng)頁(yè)源碼”。大家應(yīng)該都比較喜歡用鼠標(biāo)右鍵直接在網(wǎng)頁(yè)上點(diǎn)吧。,菜單-查看,【輪廓】菜單：就是把滿(mǎn)足條件的元素勾畫(huà)出來(lái)顯示的命令【表單元格】：就是把form表的各個(gè)單元格用桔黃色線(xiàn)框出來(lái)。讓你知道哦。原來(lái)這里就是表的單元格呀?！颈怼浚壕褪前裦orm表單用桔紅色線(xiàn)框出來(lái)。讓你知道哦。原來(lái)這里就是form表單呀。【DIV元素】：就是把頁(yè)面中的所有div元素用綠色線(xiàn)框出來(lái)。讓你知道哦。原來(lái)這些都是div元素呀。,菜單-輪廓,【圖像】：就是把頁(yè)面中的所有img元素用紫色線(xiàn)框出來(lái)。讓你知道哦。原來(lái)這些都是img元素呀。【任何元素】：你可以自定義任何標(biāo)簽和他們要用什么顏色的線(xiàn)框出來(lái)。點(diǎn)擊這個(gè)菜單，會(huì)彈出下面的對(duì)話(huà)框。比如我要將所有的td用藍(lán)色表示。,菜單-輪廓,【定位元素】【相對(duì)】：會(huì)用綠色線(xiàn)框出來(lái)，所有具有position:relative樣式的元素?！窘^對(duì)】：會(huì)用黑色線(xiàn)框出來(lái)，所有具有position:absolute樣式的元素?！竟潭ā浚簳?huì)用藍(lán)色線(xiàn)框出來(lái)，所有具有position:static樣式的元素。【浮動(dòng)】：會(huì)用黃色線(xiàn)框出來(lái)，所有具有float樣式的元素。【清除輪廓】：當(dāng)你的頁(yè)面已經(jīng)被各種顏色的線(xiàn)搞的像Excel表格一樣的時(shí)候，你可以可以使用這個(gè)命令來(lái)清除所有的線(xiàn)了,菜單-輪廓,【圖像】菜單：這個(gè)命令就是控制頁(yè)面上各種圖片的【禁用圖像】：禁用頁(yè)面的圖片元素，禁用的不僅是img元素而且連元素的背景圖片都會(huì)被禁用?！撅@示圖像尺寸】：很不錯(cuò)的功能?？梢圆挥貌榭磮D片屬性就快速的知道各個(gè)圖片的尺寸大小，當(dāng)然，單位是像素?！撅@示圖像文件大小】：很不錯(cuò)的功能?？梢圆挥貌榭磮D片屬性就快速的知道各個(gè)圖片的文件大小，當(dāng)然，單位是字節(jié)。,菜單-圖像,【顯示圖像路徑】：很不錯(cuò)的功能?？梢圆挥貌榭磮D片屬性就快速的知道各個(gè)圖片的URL路徑，而且還可以復(fù)制。,【顯示Alt文本】：可以顯示出img元素的alt屬性(為無(wú)法顯示的圖像，表單，applets的瀏覽器，顯示替換文字)的文本。【查看圖像報(bào)告】：生成一份詳細(xì)的改頁(yè)面的圖像報(bào)表。包含每個(gè)圖片的非常詳盡的信息。,菜單-圖像,【緩存】菜單：管理緩存和Cookie(指某些網(wǎng)站為了辨別用戶(hù)身份、進(jìn)行session跟蹤而儲(chǔ)存在用戶(hù)本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）)的菜單組【始終從服務(wù)器中刷新】：其實(shí)就是“禁止使用瀏覽器緩存”?！厩宄秊g覽器緩存】：快捷鍵Ctrl+R。不知道你注意到菜單中【清除瀏覽器緩存】后面有三個(gè)點(diǎn)沒(méi)有。這個(gè)表示，點(diǎn)擊此菜單后會(huì)確認(rèn)對(duì)話(huà)框。【清除此域的瀏覽器緩存】：快捷鍵Ctrl+D。只清除本域下的瀏覽器緩存?！窘肅ookie】：.?！厩宄龝?huì)話(huà)Cookie】：清除瀏覽器所有的Cookie?！厩宄虻腃ookie】：只清除本域下的Cookie?！静榭碈ookie信息】：查看此頁(yè)面包含的Cookie信息。,菜單-緩存,【工具】菜單：開(kāi)發(fā)人員工具附送的一些很有用的小工具，雖然相比其他專(zhuān)門(mén)的相關(guān)工具有點(diǎn)弱。但是應(yīng)急還是足夠的【重新調(diào)整大小】：非常有用的小工具?？梢钥焖俚膶g覽器窗口調(diào)整到相關(guān)的尺寸。這樣，測(cè)試網(wǎng)頁(yè)分辨率兼容性的時(shí)候就方便多了?！撅@示標(biāo)尺】：一個(gè)簡(jiǎn)單的標(biāo)尺工具。使用它可以度量長(zhǎng)度、距離等信息。線(xiàn)的顏色是可以換的。也可以創(chuàng)建多個(gè)標(biāo)題。如果太細(xì)為的地方，可以使用放大鏡功能。【顯示顏色選取器】：一個(gè)簡(jiǎn)單的拾色工具。點(diǎn)擊鼠標(biāo)就可以選中顏色。,菜單-工具,【驗(yàn)證】菜單【HTML】：驗(yàn)證頁(yè)面的HTML代碼。會(huì)將本頁(yè)面發(fā)送到w3c的html驗(yàn)證工具，并得到驗(yàn)證報(bào)表。【CSS】：驗(yàn)證頁(yè)面的CSS代碼。會(huì)將本頁(yè)面發(fā)送到w3c的css驗(yàn)證工具，并得到驗(yàn)證報(bào)表?！驹础浚候?yàn)證頁(yè)面的源文件代碼。會(huì)將本頁(yè)面發(fā)送到驗(yàn)證工具，并得到驗(yàn)證報(bào)表?！炬溄印浚候?yàn)證頁(yè)面的鏈接。會(huì)將本頁(yè)面發(fā)送到w3c的驗(yàn)證工具，并得到驗(yàn)證報(bào)表?！颈镜豀TML】：打開(kāi)w3c的html驗(yàn)證工具，對(duì)本地的頁(yè)面進(jìn)行驗(yàn)證?！颈镜谻SS】：打開(kāi)w3c的CSS驗(yàn)證工具，對(duì)本地的頁(yè)面進(jìn)行驗(yàn)證。【輔助功能】之“WCAG清單”：驗(yàn)證頁(yè)面的WCAG(WebContentAccessibilityReport-頁(yè)面的可訪問(wèn)性)。會(huì)將本頁(yè)面發(fā)送到驗(yàn)證工具，并得到驗(yàn)證報(bào)表。【輔助功能】之“第508條清單”：驗(yàn)證頁(yè)面的508Standards。會(huì)將本頁(yè)面發(fā)送到驗(yàn)證工具，并得到驗(yàn)證報(bào)表。【多個(gè)驗(yàn)證】：同時(shí)驗(yàn)證對(duì)頁(yè)面進(jìn)行多個(gè)規(guī)范的驗(yàn)證。,菜單-驗(yàn)證,“開(kāi)發(fā)人員工具”模式,我們前面已經(jīng)了解了IE8開(kāi)發(fā)人員工具中各個(gè)菜單中命令的使用方法，而IE8開(kāi)發(fā)人員工具更強(qiáng)勁的功能例如：如何測(cè)試版本兼容性、如何利用開(kāi)發(fā)人員工具調(diào)試JavaScript腳本，以及如何利用探查器檢測(cè)頁(yè)面腳本函數(shù)效率等，我們將在下面一起學(xué)習(xí)：【瀏覽器模式】：就是讓用戶(hù)選擇當(dāng)前頁(yè)面用何種IE版本去渲染。默認(rèn)情況下，IE8的瀏覽器模式為IE8，我們框架會(huì)設(shè)置為兼容性視圖模式。,【文本模式】：用于指定IE的頁(yè)面排版引擎（Trident）以哪個(gè)版本的方式來(lái)解析并渲染網(wǎng)頁(yè)代碼。切換文檔模式會(huì)導(dǎo)致網(wǎng)頁(yè)被刷新。,“開(kāi)發(fā)人員工具”JS調(diào)試,目前框架調(diào)試不能直接點(diǎn)擊“啟動(dòng)調(diào)試”進(jìn)行調(diào)試，如果點(diǎn)擊“啟動(dòng)調(diào)試”框架會(huì)彈開(kāi)好幾個(gè)登陸頁(yè)面。開(kāi)發(fā)手冊(cè)上有描述調(diào)試的方法是，右鍵“屬性”，復(fù)制“地址（URL）”，然后在新的IE中打開(kāi)，然后再按F12進(jìn)行調(diào)試。,“開(kāi)發(fā)人員工具”JS調(diào)試,調(diào)試的主窗口如下圖，下面我們一一了解一下“控制臺(tái)”、“斷點(diǎn)”、“局部變量”、“監(jiān)視”、“調(diào)用堆?！边@些視圖。,【控制臺(tái)】：在控制臺(tái)會(huì)顯示腳本調(diào)試中的一些信息，例如錯(cuò)誤信息、警告信息一類(lèi)的?！緮帱c(diǎn)】：是一個(gè)顯示你設(shè)定的所有斷點(diǎn)的列表。方便你統(tǒng)一管理：統(tǒng)一刪除、統(tǒng)一使用或者統(tǒng)一禁用。,“開(kāi)發(fā)人員工具”JS調(diào)試,【局部變量】：可以詳細(xì)的顯示各個(gè)變量的所有方法、事件和屬性。,【監(jiān)視】：以顯示任意你需要的變量的方法、事件和屬性?？梢蕴砑佣鄠€(gè)。整體來(lái)說(shuō)和局部變量視圖差不多，只是可以更靈活的顯示你需要的而已。也可以“右鍵”腳本中選中的變量獲取表達(dá)式，選中添加監(jiān)視。,“開(kāi)發(fā)人員工具”JS調(diào)試,【調(diào)用堆棧】：可以直觀地顯示函數(shù)調(diào)用堆棧情況，以及現(xiàn)在執(zhí)行到那個(gè)函數(shù)情況。對(duì)于理順腳本的運(yùn)行順序和嵌套很有幫助。,“