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

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