GoogleChrome瀏覽器調(diào)試功能介紹_第1頁
GoogleChrome瀏覽器調(diào)試功能介紹_第2頁
GoogleChrome瀏覽器調(diào)試功能介紹_第3頁
GoogleChrome瀏覽器調(diào)試功能介紹_第4頁
GoogleChrome瀏覽器調(diào)試功能介紹_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、GoogleChrome瀏覽器調(diào)試功能介紹Chrome瀏覽器得益于其優(yōu)秀的V8解釋器，javascript執(zhí)行速度和內(nèi)存占有率表現(xiàn)非常優(yōu)秀。對(duì)于html+css+javascript前臺(tái)技術(shù)的學(xué)習(xí)或者開發(fā)，瀏覽器developer tool的使用時(shí)必不可少的，也能極大的提高學(xué)習(xí)或者開發(fā)效率。本文根據(jù)版本 23.0.1271.10。在window下，開啟developer tool的快捷鍵為F12。1 Developer tool功能結(jié)構(gòu)Developer tool的功能欄有8個(gè)，分別是標(biāo)簽、資源、網(wǎng)絡(luò)、源碼、時(shí)間軸、性能、監(jiān)察和顯示（命令行）。2 Element panel2.1 Elemen

2、t控制面板基本功能Element控制面板能夠讓你查看所有的DOM tree中的內(nèi)容，可以根據(jù)html內(nèi)容找到頁面中的元素或者根據(jù)頁面中的定位標(biāo)簽，同時(shí)可以改變DOM的內(nèi)容。由javascript代碼產(chǎn)生的標(biāo)簽，也只能通過這種方式查看了（在你的IDE中無法看到）。Element控制面板如上圖所示，我選中標(biāo)簽之后，在頁面中顯示的對(duì)應(yīng)的元素就會(huì)選中。如果，我現(xiàn)在要定位百度一下這個(gè)按鈕，我可以通過左下角的放大鏡，在頁面中選中百度一下，DOM中也會(huì)把對(duì)應(yīng)的標(biāo)簽給你找出來。這個(gè)功能在調(diào)試時(shí)絕對(duì)是利器。最下面顯示的是現(xiàn)在選中標(biāo)簽在DOM中的層次關(guān)系。選元素找標(biāo)簽功能我們也可以對(duì)里面的內(nèi)容進(jìn)行臨時(shí)性修改，如剛

3、才找到的百度一下標(biāo)簽中的value改成“調(diào)試一下”后馬上在頁面中相應(yīng)顯示。2.2 右側(cè)功能欄2.2.1 style查看使用css時(shí)，存在著樣式覆蓋等問題，有的時(shí)候顯示的樣式可能出乎你的意料，或者對(duì)元素的大小位置（特別是窗口）的查看。同時(shí)，我們也可以在這里進(jìn)行臨時(shí)修改，在頁面中反應(yīng)（真正的所見即所得，不是別的IDE所能替代的）。修改樣式或大小2.2.2 標(biāo)簽注冊(cè)事件查看如果你想知道“百度一下”這個(gè)按鈕注冊(cè)了哪些功能，或者鼠標(biāo)點(diǎn)擊時(shí)執(zhí)行了哪個(gè)javascript函數(shù)，就可以通過這個(gè)功能實(shí)現(xiàn)了。選中百度一下標(biāo)簽，定位keydown事件，找到對(duì)應(yīng)的執(zhí)行函數(shù)2.2.3 查找功能Ctrl+F可以調(diào)出查找，

4、查找你想要的內(nèi)容，非常實(shí)用。3 資源控制面板資源控制面板包括了這個(gè)頁面中下載下來的所有的資源，同時(shí)也包括本地的cookie，還有html5中l(wèi)ocal storage等高級(jí)功能。資源查看面板4 網(wǎng)絡(luò)控制面板網(wǎng)絡(luò)控制面板在兩個(gè)方面還是非常還用的，一個(gè)是發(fā)現(xiàn)圖片（css、js等）加載不了，可以通過network查看它請(qǐng)求的位置。第二個(gè)，是調(diào)試ajax時(shí)，可以查看它的請(qǐng)求和獲取。如百度輸入框中，輸入關(guān)鍵字后會(huì)自動(dòng)顯示熱門內(nèi)容，這顯然是一個(gè)ajax的使用。網(wǎng)絡(luò)加載顯示查看http請(qǐng)求和獲得的內(nèi)容5 源碼控制面板（js調(diào)試）Javascript的調(diào)試，基本上是通過源碼控制面板和命令行配合進(jìn)行的。5.1

5、Beautiful javascript網(wǎng)上的js一般是壓縮過的，閱讀壓縮過的javascript肯定是不是人能進(jìn)行的，更別說添加斷點(diǎn)了。在 Scripts 面板下面有個(gè) Pretty print 按鈕(這種符號(hào) ), 點(diǎn)擊會(huì)將壓縮 js 文件格式化縮進(jìn)規(guī)整的文件, 這時(shí)候在設(shè)定斷點(diǎn)可讀性就大大提高了。調(diào)整前調(diào)整后5.2 代碼出錯(cuò)定位1 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.1/EN" "/TR/xhtml11/DTD/xhtml11.dtd"> 

6、2 3 <htmlxmlns="/1999/xhtml"> 4 5 <head> 6 7 <title>javascript add</title>8 9 <script type="text/javascript">10 11 var div=document.getElementByd("a");12&

7、#160;13function calSum()14 15 var a=parseInt(document.getElementById("num1").value);16 17var b=parseInt(document.getElementById("num2").value);18 19document.getElementById("num3").value=(a+b);20 21 22 23 </script

8、>24 25 </head>26 27<body>28 29 <input type="text" id="num1"/>add<input type="text" id="num2"/>30 31<input type="button" id="btnCal" onclick="

9、;calum()" value="equal"/><input type="text"id="num3"/>32 33 </body>34 35 </html>上面的代碼中，紅色標(biāo)記部分顯然是錯(cuò)誤的，在IDE中有些錯(cuò)誤是檢查不出來的（特別是跟瀏覽器有關(guān)的部分）。加載該頁面后，可以在顯示欄看到報(bào)錯(cuò)信息，然后直接定位至出錯(cuò)點(diǎn)。Javascript錯(cuò)誤位置定位5.3 添加斷點(diǎn)及單步5.3.1 斷點(diǎn)中斷可以通過單擊左側(cè)側(cè)添加斷點(diǎn)，并

10、在右側(cè)顯示。也可以通過watch expression添加查看的變量。我們添加了一個(gè)斷點(diǎn)，如果在頁面上的操作執(zhí)行到斷點(diǎn)處，就會(huì)在斷點(diǎn)處終止。然后，我們可以通過右側(cè)最上面的按鈕調(diào)試，與VS等IDE的調(diào)試非常相近。Call stack是顯示函數(shù)的調(diào)用棧，在調(diào)試大規(guī)模的javascript程序是非常有用。單步調(diào)試5.3.2 頁面中斷調(diào)試除了給設(shè)定常規(guī)斷點(diǎn)外, 還可以在某一特定事件發(fā)生時(shí)中斷(不針對(duì)元素) , 在 Scripts 面板右側(cè), 有個(gè) Event Listener Breakpoints, 這里列出了支持的所有事件, 不僅 click, keyup 等事件, 還支持 Timer(在 set

11、Timeout setInterval 處理函數(shù)開始執(zhí)行時(shí)中斷), onload, scroll 等事件。6 顯示行（命令行）命令行對(duì)于我們這種菜鳥有一個(gè)非常有用的地方，對(duì)于javascript提供的API或者API的功能不是非常熟悉。這個(gè)時(shí)候命令行就成為我們?cè)囼?yàn)最好的地方。如，我們想查看document下面有哪些函數(shù)，我們就可以在命令行中輸入，然后選中并嘗試。對(duì)于jquery等開源框架的學(xué)習(xí)，這種方式也非常高效，學(xué)代碼還是得跑起來才行。我們可以在命令行里面直接改變內(nèi)存中的內(nèi)容，對(duì)于小函數(shù)我就可以用這樣的方式直接替換。我們按enter是對(duì)輸入的內(nèi)容運(yùn)行，如果要換行需要按shift+enter。

12、在這里面，我們直接在命令行里面里面講calSum函數(shù)覆蓋掉，a+b換成了a*b。運(yùn)行結(jié)果如下所示。命令行使用運(yùn)行結(jié)果7 性能查看控制面板（profiles）這個(gè)控制面板允許我們查看函數(shù)運(yùn)行時(shí)CPU占有率，還有內(nèi)存占有率。這能夠幫助我們優(yōu)化代碼，查看代碼性能（內(nèi)存還能查看閉包泄露等）。按start可以分析，現(xiàn)在的內(nèi)存占有率。進(jìn)行操作后，再得到第二份內(nèi)存分析報(bào)告，這樣我們就能通過內(nèi)存變化來進(jìn)行分析了。在底欄，還有對(duì)比、總結(jié)等選項(xiàng)。怎樣打開Chrome的開發(fā)者工具？你可以直接在頁面上點(diǎn)擊右鍵，然后選擇審查元素：或者在Chrome的工具中找到：或者，你直接記住這個(gè)快捷方式： Ctrl+Shift+I

13、(或者Ctrl+Shift+J直接打開控制臺(tái))，或者直接按F12。打開的開發(fā)者工具就長下面的樣子：不過我一般習(xí)慣與點(diǎn)左下角的那個(gè)按鈕，將開發(fā)者工具彈出作為一個(gè)獨(dú)立的窗口：下面來分別說下每個(gè)Tab的作用。Elements標(biāo)簽頁這個(gè)就是查看、編輯頁面上的元素，包括HTML和CSS：左側(cè)就是對(duì)頁面HTML結(jié)構(gòu)的查看與編輯，你可以直接在某個(gè)元素上雙擊修改元素的屬性，或者你點(diǎn)右鍵選"Edit as Html"直接對(duì)元素的HTML進(jìn)行編輯，或者刪除某個(gè)元素，所有的修改都會(huì)即時(shí)在頁面上得到呈現(xiàn)。（注：看到上面右鍵菜單的最后一個(gè)選項(xiàng)"審查元素"了么？這是不是說明這個(gè)開發(fā)

14、者工具的頁面也是HTML來的呢？你點(diǎn)一下就知道了哦，嘿嘿）你還可以對(duì)某個(gè)元素進(jìn)行監(jiān)聽，在JS對(duì)元素的屬性或者HTML進(jìn)行修改的時(shí)候，直接觸發(fā)斷點(diǎn)，跳轉(zhuǎn)到對(duì)改元素進(jìn)行修改的JS代碼處：Elements標(biāo)簽頁的右側(cè)可以對(duì)元素的CSS進(jìn)行查看與編輯修改：你還可以通過這里看到各CSS選擇器設(shè)置的CSS值的覆蓋情況。下面的Metrics可以看到元素占的空間情況（寬、高、Padding、Margin神馬的）：注意到上面的Properties沒有？這個(gè)很有用哦，可以讓你看到元素具有的方法與屬性，比查API手冊(cè)要方便得多哦（要注意某些方法和屬性在IE、FireFox等其他瀏覽器下面的支持情況哦）。Resour

15、ces標(biāo)簽頁Resources標(biāo)簽頁可以查看到請(qǐng)求的資源情況，包括CSS、JS、圖片等的內(nèi)容，同時(shí)還可以查看到存儲(chǔ)相關(guān)的如Cookies、HTML5的Database和LocalStore等，你可以對(duì)存儲(chǔ)的內(nèi)容編輯和刪除。這里的CSS文件有一個(gè)好玩的特性，你可以直接修改CSS文件，并且修改即時(shí)生效哦：Network標(biāo)簽頁Network標(biāo)簽頁對(duì)于分析網(wǎng)站請(qǐng)求的網(wǎng)絡(luò)情況、查看某一請(qǐng)求的請(qǐng)求頭和響應(yīng)頭還有響應(yīng)內(nèi)容很有用，特別是在查看Ajax類請(qǐng)求的時(shí)候，非常有幫助。注意是在你打開Chrome開發(fā)者工具后發(fā)起的請(qǐng)求，才會(huì)在這里顯示的哦。點(diǎn)擊左側(cè)某一個(gè)具體去請(qǐng)求URL，可以看到該請(qǐng)求的詳細(xì)HTTP請(qǐng)求情

16、況：我們可以在這里看到HTTP請(qǐng)求頭、HTTP響應(yīng)頭、HTTP返回的內(nèi)容等信息，對(duì)于開發(fā)、調(diào)試，都是很有用的。Scripts標(biāo)簽頁很明顯，這個(gè)標(biāo)簽頁就是查看JS文件、調(diào)試JS代碼的，直接看下圖的說明：還有你可以打開Javascript控制臺(tái)，做一些其他的查看或者修改：你甚至還可以為某一XHR請(qǐng)求或者某一事件設(shè)置斷點(diǎn)：Timeline標(biāo)簽頁注意這個(gè)Timeline的標(biāo)簽頁不是指網(wǎng)絡(luò)請(qǐng)求的時(shí)間響應(yīng)情況哦（這個(gè)在Network標(biāo)簽頁里查看），這個(gè)Timeline指的JS執(zhí)行時(shí)間、頁面元素渲染時(shí)間：點(diǎn)擊底部的Record就可以開始錄制頁面上執(zhí)行的內(nèi)容。（這個(gè)不熟悉，請(qǐng)參考文末鏈接）Profiles標(biāo)簽

17、頁這個(gè)主要是做性能優(yōu)化的，包括查看CPU執(zhí)行時(shí)間與內(nèi)存占用：這個(gè)也不熟悉，不多說，還是請(qǐng)參考文末鏈接吧。Audits標(biāo)簽頁這個(gè)對(duì)于優(yōu)化前端頁面、加速網(wǎng)頁加載速度很有用哦（相當(dāng)與Yslow）：點(diǎn)擊run按鈕，就可以開始分析頁面，分析完了就可以看到分析結(jié)果了：它甚至可以分析出頁面上樣式表中有哪些CSS是沒有被使用的哦：Console標(biāo)簽頁就是Javascript控制臺(tái)了：這個(gè)除了查看錯(cuò)誤信息、打印調(diào)試信息（console.log()）、寫一些測(cè)試腳本以外，還可以當(dāng)作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入"console"并執(zhí)行：怎么樣

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論