前言
鳴謝殷老師,非常優(yōu)秀的學(xué)習(xí)資料,分享給大家,希望對(duì)大家有幫助! JavaEE助教 殷世騰引言
在web開(kāi)發(fā)過(guò)程中，我們?cè)趯?xiě)JavaScript腳本時(shí)難免會(huì)遇到各種bug，這時(shí)，我們就需要去調(diào)試我們的JavaScript腳本，然后去修改代碼。最簡(jiǎn)單的調(diào)試方法就是使用alert方法，將可信息通過(guò)alert方法的彈窗顯示出來(lái)。但是，alert方法有幾個(gè)弊端：
1）alert方法在彈出窗口時(shí)會(huì)中斷程序；
2）在循環(huán)中使用alert（）方法時(shí)，如果不點(diǎn)擊alert彈窗的確定按鈕，下一個(gè)alert就不會(huì)出現(xiàn)；
3）alert方法在顯示對(duì)象時(shí)永遠(yuǎn)只顯示[Object]，無(wú)法看到對(duì)象中的具體細(xì)節(jié)；
正是由于alert方法存在上述缺點(diǎn)導(dǎo)致了alert方法只適合一些小程序。如果想要查看JavaScript腳本的執(zhí)行過(guò)程，HTTP請(qǐng)求信息，執(zhí)行過(guò)程中的數(shù)據(jù)信息則需要學(xué)會(huì)使用瀏覽器的開(kāi)發(fā)者工具進(jìn)行調(diào)試。
學(xué)習(xí)目標(biāo)：
1.Chrome瀏覽器簡(jiǎn)介及下載與安裝（了解）；
2.瀏覽器加載Html頁(yè)面的過(guò)程（了解）；
3.Chrome瀏覽器開(kāi)發(fā)者工具面板的介紹（熟悉）；
4.使用Chrome開(kāi)發(fā)者工具調(diào)試JavaScript腳本（掌握）；
5.Chrome瀏覽器的其他設(shè)置（了解）；
1.瀏覽器簡(jiǎn)介
瀏覽器界面：
瀏覽器的用戶界面有很多彼此相同的元素，其中包括：
用來(lái)輸入 URI 的地址欄
前進(jìn)和后退按鈕
書(shū)簽設(shè)置選項(xiàng)
用于刷新和停止加載當(dāng)前文檔的刷新和停止按鈕
用于返回主頁(yè)的主頁(yè)按鈕
瀏覽器的主要功能：
瀏覽器的主要功能就是向服務(wù)器發(fā)出請(qǐng)求，在瀏覽器窗口中展示您選擇的網(wǎng)絡(luò)資源。這里所說(shuō)的資源一般是指 HTML 文檔，也可以是 PDF、圖片或其他的類型。資源的位置由用戶使用 URI（統(tǒng)一資源標(biāo)示符）指定。
瀏覽器解釋并顯示 HTML 文件的方式是在 HTML 和 CSS 規(guī)范中指定的。這些規(guī)范由網(wǎng)絡(luò)標(biāo)準(zhǔn)化組織 W3C（萬(wàn)維網(wǎng)聯(lián)盟）進(jìn)行維護(hù)。
多年以來(lái)，各瀏覽器都沒(méi)有完全遵從這些規(guī)范，同時(shí)還在開(kāi)發(fā)自己獨(dú)有的擴(kuò)展程序，這給網(wǎng)絡(luò)開(kāi)發(fā)人員帶來(lái)了嚴(yán)重的兼容性問(wèn)題。如今，大多數(shù)的瀏覽器都是或多或少地遵從規(guī)范。
簡(jiǎn)而言之，就是一個(gè)獲取網(wǎng)頁(yè),并將它顯示給用戶的工具。
瀏覽器的高層結(jié)構(gòu)
瀏覽器的主要組件為 (1.1)：
用戶界面 - 包括地址欄、前進(jìn)/后退按鈕、書(shū)簽菜單等。除了瀏覽器主窗口顯示的您請(qǐng)求的頁(yè)面外，其他顯示的各個(gè)部分都屬于用戶界面。
瀏覽器引擎 - 在用戶界面和呈現(xiàn)引擎之間傳送指令。
呈現(xiàn)引擎 - 負(fù)責(zé)顯示請(qǐng)求的內(nèi)容。如果請(qǐng)求的內(nèi)容是 HTML，它就負(fù)責(zé)解析 HTML 和 CSS 內(nèi)容，并將解析后的內(nèi)容顯示在屏幕上。
網(wǎng)絡(luò) - 用于網(wǎng)絡(luò)調(diào)用，比如 HTTP 請(qǐng)求。其接口與平臺(tái)無(wú)關(guān)，并為所有平臺(tái)提供底層實(shí)現(xiàn)。
用戶界面后端 - 用于繪制基本的窗口小部件，比如組合框和窗口。其公開(kāi)了與平臺(tái)無(wú)關(guān)的通用接口，而在底層使用操作系統(tǒng)的用戶界面方法。
JavaScript 解釋器-用于解析和執(zhí)行 JavaScript 代碼。
數(shù)據(jù)存儲(chǔ)-這是持久層。瀏覽器需要在硬盤(pán)上保存各種數(shù)據(jù)，例如 Cookie。新的 HTML 規(guī)范 (HTML5) 定義了“網(wǎng)絡(luò)數(shù)據(jù)庫(kù)”，這是一個(gè)完整（但是輕便）的瀏覽器內(nèi)數(shù)據(jù)庫(kù)。
我們這里談到的瀏覽器：
目前使用的主流瀏覽器有五個(gè)：Internet Explorer、Firefox、Safari、Chrome 瀏覽器和 Opera。本文中以開(kāi)放源代碼瀏覽器為例，即 Firefox、Chrome 瀏覽器和 Safari（部分開(kāi)源）。根據(jù) StatCounter 瀏覽器統(tǒng)計(jì)數(shù)據(jù)，目前（2011 年 8 月）Firefox、Safari 和 Chrome 瀏覽器的總市場(chǎng)占有率將近 60%。由此可見(jiàn)，如今開(kāi)放源代碼瀏覽器在瀏覽器市場(chǎng)中占據(jù)了非常堅(jiān)實(shí)的部分。
1.1下載與安裝
下載地址：http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html
安裝：傻瓜式的安裝，一路點(diǎn)擊下一步。
2.瀏覽器加載Html頁(yè)面的過(guò)程
2.1 從輸入U(xiǎn)RL到頁(yè)面加載完成都發(fā)生了什么？
1.處理URL:輸入 URL 后的「回車(chē)」，這時(shí)瀏覽器會(huì)對(duì) URL 進(jìn)行檢查，首先判斷協(xié)議，如果是 http 就按照 Web 來(lái)處理，另外還會(huì)對(duì)這個(gè) URL 進(jìn)行安全檢查，然后直接調(diào)用瀏覽器內(nèi)核中的對(duì)應(yīng)方法，比如 WebView 中的 loadUrl 方法。
2.發(fā)送HTTP請(qǐng)求：因?yàn)榫W(wǎng)絡(luò)的底層實(shí)現(xiàn)是和內(nèi)核相關(guān)的，所以這一部分需要針對(duì)不同平臺(tái)進(jìn)行處理，從應(yīng)用層角度看主要做兩件事情：通過(guò) DNS 查詢 IP、通過(guò) Socket 發(fā)送數(shù)據(jù)，接下來(lái)就分別介紹這兩方面的內(nèi)容。
2.1 DNS查詢：Chrome瀏覽器在啟動(dòng)的時(shí)候首先會(huì)去加載你本地的host文件，如果URL中的域名在host文件中設(shè)置的有對(duì)應(yīng)的IP地址，就會(huì)直接將這個(gè)域名指向這個(gè)地址。如果host中沒(méi)有URL中輸入的域名（www.baidu.com）對(duì)應(yīng)的IP地址，瀏覽器就會(huì)去訪問(wèn)DNS服務(wù)器，向DNS服務(wù)器詢問(wèn)這個(gè)域名（www.baidu.com）對(duì)應(yīng)的IP地址。
2.2 通過(guò)Socket發(fā)送數(shù)據(jù)：有了 IP 地址，就可以通過(guò) Socket API 來(lái)發(fā)送數(shù)據(jù)了，這時(shí)可以選擇 TCP/IP 或 UDP 協(xié)議，HTTP 常用的是 TCP/IP 協(xié)議。Chrome此時(shí)就會(huì)使用TCP/IP傳輸協(xié)議，將URL中的信息通過(guò)HTTP協(xié)議發(fā)送到百度的服務(wù)器。
3.瀏覽器接受遠(yuǎn)程服務(wù)器響應(yīng)的數(shù)據(jù)：遠(yuǎn)程服務(wù)器（百度的服務(wù)器）一般會(huì)返回給瀏覽器一個(gè)HTML（字節(jié)碼數(shù)據(jù)）。瀏覽器接受到數(shù)據(jù)之后就對(duì)這些字節(jié)碼數(shù)據(jù)以指定的編碼格式進(jìn)行解碼。瀏覽器獲取編碼格式的途徑：
1）用戶設(shè)置，在瀏覽器中可以指定頁(yè)面編碼
2）HTTP 協(xié)議中
3）HTML頁(yè)面中 的 charset 屬性值
4.瀏覽器對(duì)HTML頁(yè)面進(jìn)行渲染和布局：
1).瀏覽器開(kāi)始載入html代碼，發(fā)現(xiàn)＜head＞標(biāo)簽內(nèi)有一個(gè)＜link＞標(biāo)簽引用外部CSS文件；
2).瀏覽器又發(fā)出CSS文件的請(qǐng)求，服務(wù)器返回這個(gè)CSS文件；
3).瀏覽器繼續(xù)載入html中＜body＞部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開(kāi)始渲染頁(yè)面了；
4).瀏覽器在代碼中發(fā)現(xiàn)一個(gè)＜img＞標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請(qǐng)求。此時(shí)瀏覽器不會(huì)等到圖片下載完，而是繼續(xù)渲染后面的代碼；
服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過(guò)頭來(lái)重新渲染這部分代碼；
5).瀏覽器發(fā)現(xiàn)了一個(gè)包含一行Javascript代碼的＜script＞標(biāo)簽，趕快運(yùn)行它；
6).Javascript腳本執(zhí)行了這條語(yǔ)句，它命令瀏覽器隱藏掉代碼中的某個(gè)＜div＞ （style.display=”none”）。杯具啊，突然就少了這么一個(gè)元素，瀏覽器不得不重新渲染這部分代碼；
7).終于等到了＜/html＞的到來(lái)，瀏覽器淚流滿面……
8).等等，還沒(méi)完，用戶點(diǎn)了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標(biāo)簽的CSS路徑；
9).瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，“大伙兒收拾收拾行李，咱得重新來(lái)過(guò)……”，瀏覽器向服務(wù)器請(qǐng)求了新的CSS文件，重新渲染頁(yè)面。
注：win10打開(kāi)host文件的方法：在運(yùn)行（win+R）中輸入：C:\Windows\System32\drivers\etc即可
2.2 JavaScript引擎
2.2.1 JavaScript引擎是什么？
“JavaScript引擎”通常被稱作一種 虛擬機(jī)。“虛擬機(jī)”是指軟件驅(qū)動(dòng)的給定的計(jì)算機(jī)系統(tǒng)的模擬器。有很多類型的虛擬機(jī)，它們根據(jù)自己在多大程度上精確地模擬或代替真實(shí)的物理機(jī)器來(lái)分類。
2.2.2 JavaScript引擎是干什么的？
JavaScript的基本工作就是將開(kāi)發(fā)者寫(xiě)的JavaScript代碼轉(zhuǎn)換成能被瀏覽器理解甚至能在應(yīng)用程序上運(yùn)用的最優(yōu)化的快捷代碼。比方說(shuō)，當(dāng)你寫(xiě)了 var a = 1 + 1; 這樣一段代碼，JavaScript引擎做的事情就是看懂（解析）你這段代碼，并且將a的值變?yōu)?。
2.2.3 主要的JavaScript引擎有哪些？
WebKit的JavaScriptCore 和 Google 的 V8 引擎。
2.2.4 JavaScriptCore和V8引擎解析源代碼的過(guò)程
JavaScriptCore 執(zhí)行 一系列步驟 來(lái)解釋和優(yōu)化腳本：
1）首先它進(jìn)行詞法分析，就是將源代碼分解成一系列具有明確含義的符號(hào)或字符串。
2) 然后用語(yǔ)法分析器分析這些符號(hào)，將其構(gòu)建成語(yǔ)法樹(shù)。
3）接著四個(gè) JIT（Just-In-Time）進(jìn)程開(kāi)始參與進(jìn)來(lái)，分析和執(zhí)行解析器所生成的字節(jié)碼。
簡(jiǎn)單來(lái)說(shuō)，JavaScript 引擎會(huì)加載你的源代碼，把它分解成字符串（又叫做分詞），再 把這些字符串轉(zhuǎn)換 成編譯器可以理解的字節(jié)碼，然后執(zhí)行這些字節(jié)碼。
Google 的 V8 引擎 是用 C++ 編寫(xiě)的，它也能夠編譯并執(zhí)行 JavaScript 源代碼、處理內(nèi)存分配和垃圾回收。它被設(shè)計(jì)成由兩個(gè)編譯器組成，可以把源碼直接編譯成機(jī)器碼：
1) Full-codegen：輸出未優(yōu)化代碼的快速編譯器
2) Crankshaft: 輸出執(zhí)行效率高、優(yōu)化過(guò)的代碼的慢速編譯器
如果 Crankshaft 確定需要優(yōu)化的代碼是由 Full-codegen 生成的未優(yōu)化代碼，它就會(huì)取代 Full-codegen，這個(gè)過(guò)程叫做“crankshafting”。
一旦編譯過(guò)程中產(chǎn)生了機(jī)器代碼，引擎就會(huì)向?yàn)g覽器暴露所有的數(shù)據(jù)類型、操作符、對(duì)象、在 ECMA 標(biāo)準(zhǔn)中指定的函數(shù)、或任何運(yùn)行時(shí)需要使用的東西，NativeScript 就是如此。
3.Chrome瀏覽器的開(kāi)發(fā)者工具面板介紹
3.1 Chrome瀏覽器開(kāi)發(fā)者工具的打開(kāi)方式：
1）功能鍵F12或者Ctrl+Shift+j或者Ctrl+Shift+j打開(kāi)；
2）打開(kāi)瀏覽器右上角用戶設(shè)置下拉菜單，選擇更多工具，再選擇開(kāi)發(fā)者工具即可打開(kāi)開(kāi)發(fā)者工具。
3.2 開(kāi)發(fā)者工具的工具欄中常用面板介紹
Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋。
Console:記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息，且可以作為與JS進(jìn)行交互的命令行Shell。
Sources: Sources功能面板是資源面板,他主要分為四個(gè)部分,四個(gè)部分并不是獨(dú)立的,他們互相關(guān)聯(lián),互動(dòng)共同實(shí)現(xiàn)一個(gè)重要的功能:監(jiān)控js在執(zhí)行期的活動(dòng)。簡(jiǎn)單來(lái)說(shuō)就是斷點(diǎn)啦。
Network:從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件，以此可以提高網(wǎng)頁(yè)的運(yùn)行時(shí)間的性能。
Profiles:如果你需要Timeline所能提供的更多信息時(shí)，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗、記錄內(nèi)存的分配細(xì)節(jié)。
Application:記錄網(wǎng)站加載的所有資源信息，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
Security:判斷當(dāng)前網(wǎng)頁(yè)是否安全。
Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒(méi)有用到的CSS文件等。
3.2.1 元素（Element）面板
Element面板打開(kāi)方式:
1)打開(kāi)開(kāi)發(fā)者工具后選擇開(kāi)發(fā)者工具面板中的Element頁(yè)簽;
2)打開(kāi)瀏覽器之后,鼠標(biāo)右鍵檢查 (火狐瀏覽器是” 審查元素”)
Element面板的常用功能:
1)實(shí)時(shí)編輯DOM節(jié)點(diǎn)
在Element面板的DOM樹(shù)視圖中.呈現(xiàn)出了當(dāng)前頁(yè)面中的所有的DOM節(jié)點(diǎn).鼠標(biāo)雙擊任何DOM節(jié)點(diǎn)都可以修改其中的屬性值,修改完成之后按回車(chē)鍵瀏覽器會(huì)立即顯示出修改后的效果.
注意:這種及時(shí)的修改只是臨時(shí)的修改,只能做調(diào)試用,實(shí)際應(yīng)用中往往是調(diào)試結(jié)束后再將正確的屬性值在本地代碼中修改.
2)實(shí)時(shí)編輯CSS樣式
在Element面板中也可以對(duì)當(dāng)前頁(yè)面的DOM元素的樣式進(jìn)行實(shí)時(shí)的修改,修改后元素的樣式立即生效.
實(shí)時(shí)修改某一DOM元素的樣式的操作步驟:
首先選中這個(gè)DOM元素.如果沒(méi)有打開(kāi)開(kāi)發(fā)者工具,可以在要修改的DOM元素上右鍵–>審查元素,然后選擇控制面板右側(cè)的Style即可看到當(dāng)前DOM元素的所有CSS樣式,雙擊其中的CSS屬性值就可以修改,修改后馬上生效.如果已經(jīng)打開(kāi)了開(kāi)發(fā)者工具,可以通過(guò)先點(diǎn)擊開(kāi)發(fā)者工具面板最左側(cè)的放大鏡,然后再去點(diǎn)擊頁(yè)面上要修改的DOM元素選中這個(gè)要調(diào)試的DOM元素.此時(shí)控制面板右側(cè)的Style中就呈現(xiàn)出了當(dāng)前選中的DOM元素的CSS屬性雙擊屬性值即可修改.
注意:這種及時(shí)的修改只是臨時(shí)的修改,只能做調(diào)試用,實(shí)際應(yīng)用中往往是調(diào)試結(jié)束后再將正確的屬性值在本地代碼中修改.
3)打開(kāi)盒子模型,調(diào)試邊框參數(shù)
點(diǎn)擊右側(cè)的Computed頁(yè)簽可以看到當(dāng)前選中的元素的盒子模型參數(shù),所有的值都是可以修改的.點(diǎn)擊不同的位置(top,bottom,left,right)就可以修改元素的padding,border,margin屬性值.也可以通過(guò)修改盒子模型中間的數(shù)據(jù)改變?cè)氐膚idth和height.修改的時(shí)候?yàn)g覽器中的當(dāng)前元素會(huì)響應(yīng)地變化,同時(shí)在左側(cè)Element面板中會(huì)自動(dòng)添加上響應(yīng)的Stylt屬性值.當(dāng)頁(yè)面上顯示的樣式符合要求之后,即可停止修改,然后將Element中生成的屬性值復(fù)制到代碼中,樣式即可永久修改.
3.2.2 控制臺(tái)(Console) 面板
1)查看腳本運(yùn)行過(guò)程中的異常信息;
由于JavaScript屬于弱語(yǔ)言類型,語(yǔ)法要求不嚴(yán)謹(jǐn).并且JavaScript是解釋型語(yǔ)言,在代碼中輸入中文的標(biāo)點(diǎn)等錯(cuò)誤也不會(huì)有提示,只有運(yùn)行結(jié)束后才會(huì)拋出異常信息到控制臺(tái).
2)打印日志信息;
上邊說(shuō)到了簡(jiǎn)單的調(diào)試可以使用alert方法將想要看到的信息顯示在彈窗中。但是alert存在弊端：阻斷程序運(yùn)行，不能顯示對(duì)象的細(xì)節(jié)信息，彈出多個(gè)信息時(shí)必須點(diǎn)擊確定才能看到下一個(gè)彈窗的信息。這些問(wèn)題使用console提供的打印日志的方法可以完美解決。
Console常用的打印日志的方法有：
A)console.log(“info”)顯示一般的基本日志信息，當(dāng)要顯示的基本日志信息太多時(shí)，可以使用console.grop()方法將日志分組;
B)Console.warn(“info”)顯示帶有黃色小圖標(biāo)的警告信息;
C)Console.error(“info”)顯示帶有紅色小圖標(biāo)的錯(cuò)誤信息；
Console打印日志的使用場(chǎng)景：
A)在代碼中使用console.log()打印日志信息：
C)清除控制臺(tái)中信息的方法：
直接在控制臺(tái)上輸出console.clear()方法人后回車(chē)即可清除控制臺(tái)上的信息。還有一種方法是直接點(diǎn)擊控制臺(tái)左上方的清除日志的按鈕清除日志信息。
3)運(yùn)行JavaScript腳本
控制臺(tái)還有一個(gè)神奇的功能就是可以運(yùn)行你輸入的JavaScript腳本，這一點(diǎn)非常實(shí)用。
實(shí)用場(chǎng)景一：快速驗(yàn)證JavaScript中的方法。
將一個(gè)小數(shù)按照輸出，要求：只保留兩位小數(shù)。通過(guò)查JavaScript的API得知Number對(duì)象有一個(gè)toFixed方法可以指定小數(shù)位的長(zhǎng)度，但是又沒(méi)有例子，最快的嘗試方法就是在控制臺(tái)上驗(yàn)證：
console.log(new Number(“3.1415926”).toFixed(2));
實(shí)用場(chǎng)景二：控制臺(tái)中輸入JavaScript方法時(shí)有提示。
通過(guò)document獲取指定id的節(jié)點(diǎn)的方法是document.getElementById(“id”)但是因?yàn)镸yEclipse，Eclipse中在寫(xiě)JavaScript時(shí)可能沒(méi)提示，自己寫(xiě)太痛苦而且還容易寫(xiě)錯(cuò)。這時(shí)，就可以在控制臺(tái)上通過(guò)方法提示來(lái)補(bǔ)全這個(gè)方法。
D）Console面板中的全局搜索（快捷鍵Ctrl+Shift+F）
打開(kāi)全局搜索，輸入關(guān)鍵字，能夠搜索到包含這個(gè)關(guān)鍵字的所有的文件。
應(yīng)用場(chǎng)景：剛到一個(gè)公司，對(duì)公司的業(yè)務(wù)不熟。登錄頁(yè)面有幾千行代碼，我只想找到登錄的那個(gè)方法。這時(shí)，輸入登錄方法名就能搜索到登錄登錄方法所在的頁(yè)面。點(diǎn)擊進(jìn)去就能夠定位到這個(gè)方法了。
3.2.3 資源(Source) 面板
Source資源面板中顯示加載當(dāng)前頁(yè)面需要的所有資源。
在Source面板中可以找到當(dāng)前瀏覽器加載的頁(yè)面，然后對(duì)其中的JavaScript腳本進(jìn)行斷點(diǎn)調(diào)試。Chrome開(kāi)發(fā)者工具使用中會(huì)具體說(shuō)明。
3.2.4 網(wǎng)絡(luò)(NetWork) 面板
NetWork面板可以記錄頁(yè)面上的網(wǎng)絡(luò)請(qǐng)求的詳細(xì)信息，從發(fā)起網(wǎng)頁(yè)請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)，資源信息，大小，所用時(shí)間，Request和Response等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
1.Controls 控制Network的外觀和功能。
2.Filters 控制Requests Table具體顯示哪些內(nèi)容。
3.Overview 顯示獲取到資源的時(shí)間軸信息。
4.Requests Table 按資源獲取的前后順序顯示所有獲取到的資源信息，點(diǎn)擊資源名可以查看該資源的詳細(xì)信息。
5.Summary 顯示總的請(qǐng)求數(shù)、數(shù)據(jù)傳輸量、加載時(shí)間信息。
NetWork面板的Requests Table 包含著HTTP請(qǐng)求和響應(yīng)的具體信息，是比較常用的一塊
?Name 資源名稱，點(diǎn)擊名稱可以查看資源的詳情情況，包括Headers、Preview、Response、Cookies、Timing。
?Status HTTP狀態(tài)碼。
?Type 請(qǐng)求的資源MIME類型。
?Initiator 標(biāo)記請(qǐng)求是由哪個(gè)對(duì)象或進(jìn)程發(fā)起的（請(qǐng)求源）。
?Parser： 請(qǐng)求由Chrome的HTML解析器時(shí)發(fā)起的。
?Redirect：請(qǐng)求是由HTTP頁(yè)面重定向發(fā)起的。
?Script：請(qǐng)求是由Script腳本發(fā)起的。
?Other：請(qǐng)求是由其他進(jìn)程發(fā)起的，比如用戶點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面或者在地址欄輸入U(xiǎn)RL地址。
?Size 從服務(wù)器下載的文件和請(qǐng)求的資源大小。如果是從緩存中取得的資源則該列會(huì)顯示(from cache)
?Time 請(qǐng)求或下載的時(shí)間，從發(fā)起Request到獲取到Response所用的總時(shí)間。
?Timeline 顯示所有網(wǎng)絡(luò)請(qǐng)求的可視化瀑布流(時(shí)間狀態(tài)軸)，點(diǎn)擊時(shí)間軸，可以查看該請(qǐng)求的詳細(xì)信息，點(diǎn)擊列頭則可以根據(jù)指定的字段可以排序。
查看具體資源的詳情
通過(guò)點(diǎn)擊某個(gè)資源的Name可以查看該資源的詳細(xì)信息，根據(jù)選擇的資源類型顯示的信息也不太一樣，可能包括如下Tab信息：
?Headers 該資源的HTTP頭信息。
?Preview 根據(jù)你所選擇的資源類型（JSON、圖片、文本）顯示相應(yīng)的預(yù)覽。
?Response 顯示HTTP的Response信息。
?Cookies 顯示資源HTTP的Request和Response過(guò)程中的Cookies信息。
?Timing 顯示資源在整個(gè)請(qǐng)求生命周期過(guò)程中各部分花費(fèi)的時(shí)間。
針對(duì)上面4個(gè)Tab進(jìn)行詳細(xì)講解一下各個(gè)功能：
① 查看資源HTTP頭信息
在Headers標(biāo)簽里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和詳細(xì)的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。
預(yù)覽響應(yīng)數(shù)據(jù)
③ 查看資源HTTP的Response信息
在Response標(biāo)簽里面可根據(jù)選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應(yīng)資源的Response響應(yīng)內(nèi)容。下圖顯示的是當(dāng)選擇的資源是CSS格式時(shí)的響應(yīng)內(nèi)容。
④ 查看資源Cookies信息
如果選擇的資源在Request和Response過(guò)程中存在Cookies信息，則Cookies標(biāo)簽會(huì)自動(dòng)顯示出來(lái)，在里面可以查看所有的Cookies信息。
4.Chrome開(kāi)發(fā)者工具之?dāng)帱c(diǎn)調(diào)試
4.1 JavaScript腳本斷點(diǎn)調(diào)試
第一步：打開(kāi)開(kāi)發(fā)者工具，按F12或者在瀏覽器頁(yè)面上右鍵選擇檢查。
第二步：在Source面板中找到需要調(diào)試的文件。
第三步：設(shè)置斷點(diǎn)。
調(diào)試過(guò)程中常用的按鈕及快捷鍵：
跳到下一個(gè)斷點(diǎn)：點(diǎn)擊Sources面板右側(cè)的“三角按鈕”
禁用斷點(diǎn)：點(diǎn)擊Sources面板右側(cè)的第五個(gè)按鈕
暫停在捕獲到的異常處：點(diǎn)擊Sources面板右側(cè)的第六個(gè)按鈕，然后勾選Pause On Caught Exception
暫停在未捕獲的異常處：點(diǎn)擊Sources右側(cè)的第六個(gè)按鈕，不勾選Pause On Caught Exception.
查看斷點(diǎn)處，獲取的數(shù)據(jù)的值：
將鼠標(biāo)光標(biāo)停留在變量上面即可，也可以將變量賦值到Console的控制臺(tái)上打印出來(lái)。
清除斷點(diǎn)：
在Source面板最右側(cè)面板中，找到Breakpoints打開(kāi)，可以看到你打的斷點(diǎn)。在斷點(diǎn)列表出右鍵選擇Remove all breakpoints可以一次性刪除所有斷點(diǎn)。
右側(cè)調(diào)試區(qū)有一個(gè) XHR Breakpoints，點(diǎn)擊+ 并輸入 URL 包含的字符串即可監(jiān)聽(tīng)該 URL 的 Ajax 請(qǐng)求，輸入內(nèi)容就相當(dāng)于 URL 的過(guò)濾器。如果什么都不填，那么就監(jiān)聽(tīng)所有 XHR 請(qǐng)求。一旦 XHR 調(diào)用觸發(fā)時(shí)就會(huì)在 request.send() 的地方中斷。
4.3 事件監(jiān)聽(tīng)斷點(diǎn)
事件監(jiān)聽(tīng)是對(duì)我們選定的是事件類型進(jìn)行監(jiān)聽(tīng)，當(dāng)這個(gè)事件觸發(fā)的時(shí)候，程序就會(huì)在這個(gè)事件處停止。有助于我們快速找到某一個(gè)元素上綁定的事件。
應(yīng)用場(chǎng)景：我們剛接手一個(gè)項(xiàng)目時(shí)，對(duì)業(yè)務(wù)不熟。想找到提交登錄事件對(duì)應(yīng)的方法，但是發(fā)現(xiàn)頁(yè)面上登錄按鈕綁定事件寫(xiě)的不是很明確，而且處理登錄業(yè)務(wù)的JavaScript腳本文件有幾百行，想找到這個(gè)按鈕很不容易。此時(shí)，我們就可以選定鼠標(biāo)的點(diǎn)擊事件進(jìn)行監(jiān)聽(tīng)，當(dāng)我們點(diǎn)擊登錄按鈕的時(shí)候控制臺(tái)Sources面板會(huì)自動(dòng)將我們帶到登錄方法處。
事件監(jiān)聽(tīng)斷點(diǎn)使用步驟（以查找天貓首頁(yè)登錄方法為例）：
1.首先打開(kāi)京東登錄頁(yè)面找到登錄按鈕；
2.在登錄按鈕上右鍵屬性==》檢查 打開(kāi)開(kāi)發(fā)者工具，然后打開(kāi)Sources面板
3.打開(kāi)Sources面板右側(cè)的Event Listener Breakpoints 找到Mouse及鼠標(biāo)事件下邊的click然后勾選上。
點(diǎn)擊登錄按鈕，觸發(fā)鼠標(biāo)的點(diǎn)擊事件，發(fā)現(xiàn)程序中斷在JavaScript文件中，點(diǎn)擊面板下方的 “{}” 將代碼格式化一下，此時(shí)就找到了登錄按鈕觸發(fā)的點(diǎn)擊事件了。
此時(shí)就可以一步一步的像下跟，知道跟到天貓的登錄方法了。
5 其他設(shè)置
5.1 設(shè)置開(kāi)發(fā)者工具的位置：
Chrome剛安裝好時(shí)，打開(kāi)開(kāi)發(fā)者工具，開(kāi)發(fā)者工具默認(rèn)在瀏覽器的左半邊。
可以通過(guò)開(kāi)發(fā)者工具面板右上角的設(shè)置開(kāi)發(fā)者工具在瀏覽器中出現(xiàn)的位置。
視圖1：開(kāi)發(fā)者工具以一個(gè)獨(dú)立的窗口存在；視圖2：在瀏覽器下方顯示；視圖3：在瀏覽器右半邊顯示。
5.2 清除瀏覽器緩存的方法：
瀏覽器緩存（Browser Caching）是為了節(jié)約網(wǎng)絡(luò)的資源加速瀏覽，瀏覽器在用戶磁盤(pán)上對(duì)最近請(qǐng)求過(guò)的文檔進(jìn)行存儲(chǔ)，當(dāng)訪問(wèn)者再次請(qǐng)求這個(gè)頁(yè)面時(shí)，瀏覽器就可以從本地磁盤(pán)顯示文檔，這樣就可以加速頁(yè)面的閱覽。但是，對(duì)開(kāi)發(fā)人員來(lái)說(shuō)，我們修改了JavaScript腳本之后需要立即看到修改的效果，所以需要清除緩存，清除緩存常用的方法有：
1.Ctrl + F5
F5通常只是刷新本地緩存；Ctrl+F5可以把INTERNET臨時(shí)文件夾的文件刪除再重新從服務(wù)器下載，也就是徹底刷新頁(yè)面了。
2.開(kāi)發(fā)者工具打開(kāi)之后，快速清除緩存的方法：
開(kāi)發(fā)者工具打開(kāi)之后，瀏覽器刷新圖標(biāo)上右鍵會(huì)出現(xiàn)清空緩存并硬性重新加載。這一方法能夠在開(kāi)發(fā)者工具打開(kāi)時(shí)快速清理緩存。
5.3 禁用頁(yè)面的JavaScript腳本；
應(yīng)用場(chǎng)景：在開(kāi)發(fā)互聯(lián)網(wǎng)電商項(xiàng)目時(shí)，需要一些商品圖片，于是就去京東找到一個(gè)商品打開(kāi)商品圖片之后，想復(fù)制或者將這個(gè)圖片另存為，此時(shí)，發(fā)現(xiàn)右鍵后什么都沒(méi)有。
原因是，京東在圖片上通過(guò)JavaScript腳本禁用了鼠標(biāo)右鍵點(diǎn)擊事件。此時(shí)，我們可以通過(guò)禁用當(dāng)前頁(yè)面的JavaScript事件，通過(guò)鼠標(biāo)右鍵保存圖片。
禁用網(wǎng)頁(yè)JavaScript事件的方法：
1）開(kāi)發(fā)者工具==》Settings
2）勾選Debugger下的Disable JavaScript 復(fù)選框。
聯(lián)系客服
