Chrome調(diào)試工具使用方法課件

Chrome調(diào)試工具使用方法----前端界面開(kāi)發(fā)利器Chrome調(diào)試工具使用方法----前端界面開(kāi)發(fā)利器目錄調(diào)試工具介紹錯(cuò)誤查找樣式調(diào)整目錄調(diào)試工具介紹2調(diào)試工具概述GoogleChrome瀏覽器(4.0及以上版本)自帶了豐富的開(kāi)發(fā)人員工具，讓您可以隨時(shí)隨地對(duì)任何網(wǎng)頁(yè)的CSS、HTML和JavaScript進(jìn)行實(shí)時(shí)編輯、調(diào)試以及監(jiān)控。

按下F12或者在頁(yè)面上鼠標(biāo)右鍵審查元素，可打開(kāi)控制臺(tái)?？刂婆_(tái)主要分為8個(gè)模塊，在之后詳細(xì)介紹。調(diào)試工具概述GoogleChrome瀏覽器3調(diào)試工具介紹一.Elements標(biāo)簽頁(yè)可根據(jù)DOM樹(shù)查看、編輯頁(yè)面上的元素，包括HTML和CSS?？芍苯佑米笊辖堑姆糯箸R在頁(yè)面上直接選取元素進(jìn)行調(diào)試調(diào)試工具介紹一.Elements標(biāo)簽頁(yè)可根據(jù)D4調(diào)試工具介紹二.Network標(biāo)簽頁(yè)可查看加載的文件，請(qǐng)求的方法，文件的類(lèi)型，加載的時(shí)間等當(dāng)點(diǎn)擊文件后，在左邊可查看到請(qǐng)求、響應(yīng)的各種具體參數(shù)。調(diào)試工具介紹二.Network標(biāo)簽頁(yè)可查看加載5調(diào)試工具介紹三.Sources標(biāo)簽頁(yè)左側(cè)目錄可以展開(kāi)，查看加載本頁(yè)面所調(diào)用的資源，如js，css，php。在中間可以打斷點(diǎn)進(jìn)行調(diào)試。調(diào)試工具介紹三.Sources標(biāo)簽頁(yè)左側(cè)目錄可6調(diào)試工具介紹四.Timeline標(biāo)簽頁(yè)此功能是查看頁(yè)面性能，頁(yè)面渲染速度的。調(diào)試工具介紹四.Timeline標(biāo)簽頁(yè)此功能是查看頁(yè)面性能，7調(diào)試工具介紹五.Profiles標(biāo)簽頁(yè)此功能主要測(cè)試加載文件速度參考，可以在此處上傳我們的文件供測(cè)試用。點(diǎn)擊Load上傳即可。調(diào)試工具介紹五.Profiles標(biāo)簽頁(yè)此功能主8調(diào)試工具介紹六.Resources標(biāo)簽頁(yè)此功能是查看加載頁(yè)面所用的資源，鏈接的數(shù)據(jù)庫(kù)，域名下保存的cookie信息等都可以查看，上圖，點(diǎn)擊左側(cè)欄目，依次查看。調(diào)試工具介紹六.Resources標(biāo)簽頁(yè)此功能9調(diào)試工具介紹七.Audits標(biāo)簽頁(yè)此功能也是性能測(cè)試，上圖，點(diǎn)擊run執(zhí)行，查看效率。調(diào)試工具介紹七.Audits標(biāo)簽頁(yè)此功能也是性10調(diào)試工具介紹八.Console標(biāo)簽頁(yè)這就是Javascript控制臺(tái)。查看錯(cuò)誤信息、打印調(diào)試信息（console.log()）、寫(xiě)一些測(cè)試腳本。圖中每一個(gè)紅叉對(duì)應(yīng)一個(gè)錯(cuò)誤，點(diǎn)擊灰色帶下劃線的位置，可進(jìn)入到具體代碼中，進(jìn)行調(diào)錯(cuò)、調(diào)試工具介紹八.Console標(biāo)簽頁(yè)這就是Ja11錯(cuò)誤查找調(diào)試步驟斷點(diǎn)調(diào)試錯(cuò)誤查找調(diào)試步驟12前后端控制臺(tái)是否報(bào)錯(cuò)出錯(cuò)/沒(méi)有達(dá)到預(yù)期效果調(diào)試步驟是否要發(fā)送請(qǐng)求到后臺(tái)請(qǐng)求是否成功發(fā)送到后臺(tái)根據(jù)報(bào)錯(cuò)信息，找到錯(cuò)誤位置，進(jìn)行修改樣式或者JS出問(wèn)題，可根據(jù)dom節(jié)點(diǎn)，尋找出錯(cuò)處檢查請(qǐng)求地址，參數(shù)；在前臺(tái)斷點(diǎn)調(diào)試在后臺(tái)斷點(diǎn)調(diào)試是否否否是是前后端控制臺(tái)出錯(cuò)/沒(méi)有達(dá)到預(yù)期效果調(diào)試步驟是否要發(fā)送請(qǐng)請(qǐng)求是13斷點(diǎn)調(diào)試在Sources標(biāo)簽頁(yè)中，可在如圖所示處打斷點(diǎn)，刷新頁(yè)面，當(dāng)運(yùn)行到斷點(diǎn)處會(huì)停止。斷點(diǎn)調(diào)試在Sources標(biāo)簽頁(yè)中，可在如圖所示14斷點(diǎn)調(diào)試?yán)肂reakpoints列表中的斷點(diǎn)快速定位非常方便。

ScopeVariables列表，在這里可以查看此時(shí)局部變量和全局變量的值。從左到右依次為，腳本狀態(tài)、進(jìn)行下一步、跳到下個(gè)方法、跳出當(dāng)前方法、臨時(shí)禁用所有已添加的斷點(diǎn)、設(shè)置程序運(yùn)行時(shí)遇到異常時(shí)是否中斷的開(kāi)關(guān)斷點(diǎn)調(diào)試?yán)肂reakpoints列表中的斷點(diǎn)快速定位非15樣式調(diào)整在Elements標(biāo)簽頁(yè)中，可以直接在某個(gè)元素上雙擊修改元素的屬性，或者你點(diǎn)右鍵選"EditasHtml"直接對(duì)元素的HTML進(jìn)行編輯，或者刪除某個(gè)元素，所有的修改都會(huì)即時(shí)在頁(yè)面上得到呈現(xiàn)。左上角放大鏡圖標(biāo)可以直接在頁(yè)面上選中元素；手機(jī)圖標(biāo)可以將頁(yè)面設(shè)置成不同分辨率進(jìn)行調(diào)試。樣式調(diào)整在Elements標(biāo)簽頁(yè)中，可以直接在16謝謝謝謝17Chrome調(diào)試工具使用方法----前端界面開(kāi)發(fā)利器Chrome調(diào)試工具使用方法----前端界面開(kāi)發(fā)利器目錄調(diào)試工具介紹錯(cuò)誤查找樣式調(diào)整目錄調(diào)試工具介紹19調(diào)試工具概述GoogleChrome瀏覽器(4.0及以上版本)自帶了豐富的開(kāi)發(fā)人員工具，讓您可以隨時(shí)隨地對(duì)任何網(wǎng)頁(yè)的CSS、HTML和JavaScript進(jìn)行實(shí)時(shí)編輯、調(diào)試以及監(jiān)控。

按下F12或者在頁(yè)面上鼠標(biāo)右鍵審查元素，可打開(kāi)控制臺(tái)?？刂婆_(tái)主要分為8個(gè)模塊，在之后詳細(xì)介紹。調(diào)試工具概述GoogleChrome瀏覽器20調(diào)試工具介紹一.Elements標(biāo)簽頁(yè)可根據(jù)DOM樹(shù)查看、編輯頁(yè)面上的元素，包括HTML和CSS?？芍苯佑米笊辖堑姆糯箸R在頁(yè)面上直接選取元素進(jìn)行調(diào)試調(diào)試工具介紹一.Elements標(biāo)簽頁(yè)可根據(jù)D21調(diào)試工具介紹二.Network標(biāo)簽頁(yè)可查看加載的文件，請(qǐng)求的方法，文件的類(lèi)型，加載的時(shí)間等當(dāng)點(diǎn)擊文件后，在左邊可查看到請(qǐng)求、響應(yīng)的各種具體參數(shù)。調(diào)試工具介紹二.Network標(biāo)簽頁(yè)可查看加載22調(diào)試工具介紹三.Sources標(biāo)簽頁(yè)左側(cè)目錄可以展開(kāi)，查看加載本頁(yè)面所調(diào)用的資源，如js，css，php。在中間可以打斷點(diǎn)進(jìn)行調(diào)試。調(diào)試工具介紹三.Sources標(biāo)簽頁(yè)左側(cè)目錄可23調(diào)試工具介紹四.Timeline標(biāo)簽頁(yè)此功能是查看頁(yè)面性能，頁(yè)面渲染速度的。調(diào)試工具介紹四.Timeline標(biāo)簽頁(yè)此功能是查看頁(yè)面性能，24調(diào)試工具介紹五.Profiles標(biāo)簽頁(yè)此功能主要測(cè)試加載文件速度參考，可以在此處上傳我們的文件供測(cè)試用。點(diǎn)擊Load上傳即可。調(diào)試工具介紹五.Profiles標(biāo)簽頁(yè)此功能主25調(diào)試工具介紹六.Resources標(biāo)簽頁(yè)此功能是查看加載頁(yè)面所用的資源，鏈接的數(shù)據(jù)庫(kù)，域名下保存的cookie信息等都可以查看，上圖，點(diǎn)擊左側(cè)欄目，依次查看。調(diào)試工具介紹六.Resources標(biāo)簽頁(yè)此功能26調(diào)試工具介紹七.Audits標(biāo)簽頁(yè)此功能也是性能測(cè)試，上圖，點(diǎn)擊run執(zhí)行，查看效率。調(diào)試工具介紹七.Audits標(biāo)簽頁(yè)此功能也是性27調(diào)試工具介紹八.Console標(biāo)簽頁(yè)這就是Javascript控制臺(tái)。查看錯(cuò)誤信息、打印調(diào)試信息（console.log()）、寫(xiě)一些測(cè)試腳本。圖中每一個(gè)紅叉對(duì)應(yīng)一個(gè)錯(cuò)誤，點(diǎn)擊灰色帶下劃線的位置，可進(jìn)入到具體代碼中，進(jìn)行調(diào)錯(cuò)、調(diào)試工具介紹八.Console標(biāo)簽頁(yè)這就是Ja28錯(cuò)誤查找調(diào)試步驟斷點(diǎn)調(diào)試錯(cuò)誤查找調(diào)試步驟29前后端控制臺(tái)是否報(bào)錯(cuò)出錯(cuò)/沒(méi)有達(dá)到預(yù)期效果調(diào)試步驟是否要發(fā)送請(qǐng)求到后臺(tái)請(qǐng)求是否成功發(fā)送到后臺(tái)根據(jù)報(bào)錯(cuò)信息，找到錯(cuò)誤位置，進(jìn)行修改樣式或者JS出問(wèn)題，可根據(jù)dom節(jié)點(diǎn)，尋找出錯(cuò)處檢查請(qǐng)求地址，參數(shù)；在前臺(tái)斷點(diǎn)調(diào)試在后臺(tái)斷點(diǎn)調(diào)試是否否否是是前后端控制臺(tái)出錯(cuò)/沒(méi)有達(dá)到預(yù)期效果調(diào)試步驟是否要發(fā)送請(qǐng)請(qǐng)求是30斷點(diǎn)調(diào)試在Sources標(biāo)簽頁(yè)中，可在如圖所示處打斷點(diǎn)，刷新頁(yè)面，當(dāng)運(yùn)行到斷點(diǎn)處會(huì)停止。斷點(diǎn)調(diào)試在Sources標(biāo)簽頁(yè)中，可在如圖所示31斷點(diǎn)調(diào)試?yán)肂reakpoints列表中的斷點(diǎn)快速定位非常方便。

ScopeVariables列表，在這里可以查看此時(shí)局部變量和全局變量的值。從左到右依次為，腳本狀態(tài)、進(jìn)行下一步、跳到下個(gè)方法、跳出當(dāng)前方法、臨時(shí)禁用所有已添加的斷點(diǎn)、設(shè)置程序運(yùn)行時(shí)遇到異常時(shí)是否中斷的開(kāi)關(guān)斷點(diǎn)調(diào)試?yán)肂reakpoints列表中的斷點(diǎn)快速定位非32樣式調(diào)整在Ele