今天就跟大家聊聊有關(guān)Chrome開發(fā)者工具有哪些功能,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
十年的巫山網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整巫山建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“巫山網(wǎng)站設(shè)計(jì)”,“巫山網(wǎng)站推廣”以來,每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
當(dāng)我們爬取不同的網(wǎng)站是,每個(gè)網(wǎng)站頁面的實(shí)現(xiàn)方式各不相同,我們需要對(duì)每個(gè)網(wǎng)站都進(jìn)行分析。那是否有一些通用的分析方法?我分享下自己爬取分析的“套路”。在某個(gè)網(wǎng)站上,分析頁面以及抓取數(shù)據(jù),我用得最多的工具是 Chrome 開發(fā)者工具。
Chrome 開發(fā)者工具是一套內(nèi)置于 Google Chrome 中的 Web 開發(fā)和調(diào)試工具,可用來對(duì)網(wǎng)站進(jìn)行迭代、調(diào)試和分析。因?yàn)閲鴥?nèi)很多瀏覽器內(nèi)核都是基于 Chrome 內(nèi)核,所以國產(chǎn)瀏覽器也帶有這個(gè)功能。例如:UC 瀏覽器、QQ 瀏覽器、360 瀏覽器等。
接下來,我們來看看 Chrome 開發(fā)者工具一些比較牛逼的功能。
通過元素(Element)面板,我們能查看到想抓取頁面渲染內(nèi)容所在的標(biāo)簽、使用什么 CSS 屬性(例如:class="middle")等內(nèi)容。例如我想要抓取我知乎主頁中的動(dòng)態(tài)標(biāo)題,在網(wǎng)頁頁面所在處上右擊鼠標(biāo),選擇“檢查”,可進(jìn)入 Chrome 開發(fā)者工具的元素面板。

通過這種方法,我們能快速定位出頁面某個(gè)DOM 節(jié)點(diǎn),然后可以提取出相關(guān)的解析語句。鼠標(biāo)移動(dòng)到節(jié)點(diǎn),然后右擊鼠標(biāo),選擇 “Copy”,能快速復(fù)制出 Xpath 、CSS elector 等內(nèi)容解析庫的解析語句。

網(wǎng)絡(luò)(Network)面板記錄頁面上每個(gè)網(wǎng)絡(luò)操作的相關(guān)信息,包括詳細(xì)的耗時(shí)數(shù)據(jù)、HTTP 請(qǐng)求與響應(yīng)標(biāo)頭和 Cookie,等等。這就是我們通常說的抓包。

其中的 Filters窗格,我經(jīng)常使用其來過濾出一些 HTTP 請(qǐng)求,例如過濾出使用 Ajax 發(fā)起的異步請(qǐng)求、圖片、視頻等。
最大的窗格叫 Requests Table,此表格會(huì)列出了檢索的每一個(gè) HTTP 請(qǐng)求。默認(rèn)情況下,此表格按時(shí)間順序排序,最早的資源在頂部。點(diǎn)擊資源的名稱可以顯示更多信息。

Headers是顯示 HTTP 請(qǐng)求的 Headers,我們通過這個(gè)能看到請(qǐng)求的方式,以及攜帶的請(qǐng)求參數(shù)等。
Preview是請(qǐng)求結(jié)果的預(yù)覽。一般用來查看請(qǐng)求到的圖片,對(duì)于抓取圖片網(wǎng)站比較給力。
Response是請(qǐng)求返回的結(jié)果。一般的內(nèi)容是整個(gè)網(wǎng)站的源代碼。如果該請(qǐng)求是異步請(qǐng)求,返回的結(jié)果內(nèi)容一般是 Json 文本數(shù)據(jù)。
Cookies能看到請(qǐng)求攜帶的 Cookies 以及服務(wù)器返回的 Cookies。有時(shí)候是需要使用到 Response 的 Cookies。例如,某個(gè)頁面必須登錄才能看到。
看完上述內(nèi)容,你們對(duì)Chrome開發(fā)者工具有哪些功能有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
本文名稱:Chrome開發(fā)者工具有哪些功能
本文來源:http://chinadenli.net/article30/pgpdpo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、做網(wǎng)站、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)