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

1、Chrome調(diào)試工具使用方法,-前端界面開(kāi)發(fā)利器,目錄,調(diào)試工具介紹 錯(cuò)誤查找 樣式調(diào)整,調(diào)試工具概述,Google Chrome 瀏覽器 (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)試工具介紹,一.Elements標(biāo)簽頁(yè),可根據(jù)DOM樹(shù)查看、編輯頁(yè)面上的元素，包括HTML和CSS?？芍苯佑米笊辖堑姆糯箸R在頁(yè)面上直接選取元素進(jìn)行調(diào)試,調(diào)試工具介紹,二.Network標(biāo)簽頁(yè),可查看加載的文件

2、，請(qǐng)求的方法，文件的類型，加載的時(shí)間等,當(dāng)點(diǎn)擊文件后，在左邊可查看到請(qǐng)求、響應(yīng)的各種具體參數(shù)。,調(diào)試工具介紹,三.Sources標(biāo)簽頁(yè),左側(cè)目錄可以展開(kāi)，查看加載本頁(yè)面所調(diào)用的資源，如js，css，php。在中間可以打斷點(diǎn)進(jìn)行調(diào)試。,調(diào)試工具介紹,四.Timeline標(biāo)簽頁(yè),此功能是查看頁(yè)面性能，頁(yè)面渲染速度的。,調(diào)試工具介紹,五.Profiles標(biāo)簽頁(yè),此功能主要測(cè)試加載文件速度參考，可以在此處上傳我們的文件供測(cè)試用。點(diǎn)擊 Load上傳即可。,調(diào)試工具介紹,六.Resources標(biāo)簽頁(yè),此功能是查看加載頁(yè)面所用的資源，鏈接的數(shù)據(jù)庫(kù)，域名下保存的cookie信息等都可以查看，上圖，點(diǎn)擊左側(cè)欄目

3、，依次查看。,調(diào)試工具介紹,七.Audits標(biāo)簽頁(yè),此功能也是性能測(cè)試，上圖，點(diǎn)擊run執(zhí)行，查看效率。,調(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ò)、,錯(cuò)誤查找,調(diào)試步驟 斷點(diǎn)調(diào)試,前后端控制臺(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)試,是,否,否,否,是,是,斷點(diǎn)調(diào)試,在Sources標(biāo)簽頁(yè)中，可在如圖所示處打斷點(diǎn)，刷新頁(yè)面，當(dāng)運(yùn)行到斷點(diǎn)處會(huì)停止。,斷點(diǎn)調(diào)試,利用 Breakpoints 列表中的斷點(diǎn)快速定位非常方便。,Scope Variables 列表，在這里可以查看此時(shí)局部變量和全局變量的值。,從左到右依次為，腳本狀態(tài)、進(jìn)行下一步、跳到下個(gè)方法、跳出當(dāng)前方法、臨時(shí)禁用所有已添加的斷點(diǎn)、設(shè)置程序運(yùn)行時(shí)遇到異常時(shí)是否中斷的開(kāi)關(guān),樣式調(diào)整,在Elements標(biāo)簽頁(yè)中，可以直接在某個(gè)元素上雙擊修改元素的屬性，或者你點(diǎn)右鍵選Edit as Html直接對(duì)元素的HTML進(jìn)行編輯，或者刪除某個(gè)元素，所有的修