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

1、Chrome調(diào)試工具使用方法,-前端界面開發(fā)利器,目錄,調(diào)試工具介紹 錯(cuò)誤查找 樣式調(diào)整,調(diào)試工具概述,Google Chrome 瀏覽器 (4.0及以上版本) 自帶了豐富的開發(fā)人員工具，讓您可以隨時(shí)隨地對(duì)任何網(wǎng)頁的 CSS、 HTML 和 JavaScript 進(jìn)行實(shí)時(shí)編輯、調(diào)試以及監(jiān)控。 按下F12或者在頁面上鼠標(biāo)右鍵審查元素，可打開控制臺(tái)?？刂婆_(tái)主要分為8個(gè)模塊，在之后詳細(xì)介紹。,調(diào)試工具介紹,一.Elements標(biāo)簽頁,可根據(jù)DOM樹查看、編輯頁面上的元素，包括HTML和CSS?？芍苯佑米笊辖堑姆糯箸R在頁面上直接選取元素進(jìn)行調(diào)試,調(diào)試工具介紹,二.Network標(biāo)簽頁,可查看加載的文件

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

3、，依次查看。,調(diào)試工具介紹,七.Audits標(biāo)簽頁,此功能也是性能測(cè)試，上圖，點(diǎn)擊run執(zhí)行，查看效率。,調(diào)試工具介紹,八.Console標(biāo)簽頁,這就是Javascript控制臺(tái)。查看錯(cuò)誤信息、打印調(diào)試信息（console.log()）、寫一些測(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ò)/沒有達(dá)到預(yù)期效果,調(diào)試步驟,是否要發(fā)送請(qǐng) 求到后臺(tái),請(qǐng)求是否成功 發(fā)送到后臺(tái),根據(jù)報(bào)錯(cuò)信息，找到錯(cuò)誤位置，進(jìn)行修改,樣式或者JS出問題，可根據(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)簽頁中，可在如圖所示處打斷點(diǎn)，刷新頁面，當(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í)是否中斷的開關(guān),樣式調(diào)整,在Elements標(biāo)簽頁中，可以直接在某個(gè)元素上雙擊修改元素的屬性，或者你點(diǎn)右鍵選Edit as Html直接對(duì)元素的HTML進(jìn)行編輯，或者刪除某個(gè)元素，所有的修