title: 谷歌 瀏覽器調(diào)試 開發(fā)者工具使用記錄
tags: ['chrome瀏覽器','調(diào)試','開發(fā)者工具','調(diào)試']
date: 2021-12-09
categories: "磨刀不誤砍柴工"
環(huán)境
window10
chrome 瀏覽器
[TOC]
前言
寫web網(wǎng)站的爬蟲時(shí)，總是需要和瀏覽器打交道，經(jīng)常就是進(jìn)去先F12打開開發(fā)者工具再說，今天寫一下瀏覽器開發(fā)者工具常用到的一些功能。
本次操作以chrome瀏覽器（94.0.4606.81）為例。各瀏覽器大同小異（基本一致）。
打開開發(fā)者工具
1 網(wǎng)頁空白處右鍵
- 網(wǎng)頁空白處右鍵（大部分位置都可以，除了一些網(wǎng)站自己寫了其他操作的位置，比如說B站的正在播放的視頻，那上面右鍵就點(diǎn)不出來這個(gè)菜單。）
- 左鍵單擊 檢查
2 通過網(wǎng)站的功能選項(xiàng)一步一步點(diǎn)進(jìn)去
- 點(diǎn)擊網(wǎng)頁右上角的三個(gè)點(diǎn)按鈕
- 點(diǎn)擊更多工具
- 點(diǎn)擊開發(fā)者工具
3 快捷鍵1
通過上面一個(gè)方法，可以看到一一個(gè)打開開發(fā)者工具的快捷鍵 Ctrl + Shift + i
4 快捷鍵2 最常用
F12
開發(fā)者工具總覽
打開開發(fā)者工具我們可以看到這樣的界面
紅色框框框住的瀏覽器的幾個(gè)選項(xiàng)卡，順序可能不一樣，可以鼠標(biāo)拖動(dòng)選項(xiàng)卡左右移動(dòng)，也可以不顯示某些，點(diǎn)那一行最右邊的三個(gè)點(diǎn)可以查看目前瀏覽器的所有選項(xiàng)卡。
下面詳細(xì)介紹一下其中幾個(gè)比較常用的。
Elements
這一個(gè)選項(xiàng)卡是元素，主要顯示的是這個(gè)html網(wǎng)頁的元素，以及右邊會(huì)顯示css。
這里我們主要去看的是左邊的內(nèi)容。
在寫爬蟲的時(shí)候我們會(huì)需要定位我們需要的信息在html中的位置，這個(gè)操作可以通過點(diǎn)擊開發(fā)者選項(xiàng)最左邊的小鼠標(biāo)一樣的按鈕（藍(lán)色表示顯示是處于工作的狀態(tài)），然后用鼠標(biāo)去選擇我們感興趣的內(nèi)容。
這時(shí)候鼠標(biāo)經(jīng)過網(wǎng)頁上各個(gè)元素的時(shí)候會(huì)有一個(gè)框選的狀態(tài)提示。
當(dāng)我們找到要查找的元素的時(shí)候，鼠標(biāo)點(diǎn)擊一下它（這時(shí)候左邊的小鼠標(biāo)一樣的按鈕又變成正常的狀態(tài)，退出了工作狀態(tài)），下面的源碼會(huì)自動(dòng)跳轉(zhuǎn)到剛才選定的那個(gè)元素，這個(gè)時(shí)候就可以根據(jù)網(wǎng)頁源碼去選擇xpath去解析拿到數(shù)據(jù)。
另外，在這個(gè)頁面按查找的快捷鍵可以在開發(fā)者工具最下面打開一個(gè)搜索的框框，這個(gè)框框里可以輸入xpath來確定元素。一般會(huì)在頁面檢查完確認(rèn)是正確的xpath再把xpath放在程序中去使用。
如上，可以通過輸入xpath去確認(rèn)是否是正確的xpath語句，右邊是對(duì)應(yīng)的搜索數(shù)量，點(diǎn)擊向上向下的按鈕可以去查看上一個(gè)|下一個(gè)。
但是這個(gè)輸入xpath的時(shí)候源碼一直來回跳，很不舒服，所以我平時(shí)選擇使用插件XPath-Helper。
這個(gè)插件網(wǎng)上有的，實(shí)在找不到評(píng)論發(fā)一下，我去翻一下我的電腦然后貼過來。
Network
這個(gè)選項(xiàng)是網(wǎng)絡(luò)請(qǐng)求的選項(xiàng)卡，常用的幾個(gè)地方如下，前面兩個(gè)就不多說了，簡單說下分類顯示那個(gè)地方。
（如果，我是說如果，你的那個(gè)分類顯示的那行找不到了，點(diǎn)一下清除當(dāng)前包郵編的那個(gè)按鈕。）
當(dāng)我們打開一個(gè)網(wǎng)頁，一般會(huì)接收到很多種類型的報(bào)文，網(wǎng)頁的html文檔，樣式的css，邏輯的js，或者是圖片，json，這些全都擺放在一塊比較凌亂，這個(gè)時(shí)候利用好分類顯示就很有必要。
首先是Doc，一般的網(wǎng)頁基本會(huì)顯示在這里，比如打開 http://blog.codesix.site/ ，在Doc的分類中就能找到這樣的一個(gè)文件。左邊是文件，如果有多個(gè)文件會(huì)一個(gè)一個(gè)排列下去，點(diǎn)擊其中一個(gè)文件，右邊會(huì)顯示這個(gè)的具體信息。
常見的還有Fetch/XHR，這里會(huì)展示一些請(qǐng)求和數(shù)據(jù)，一些網(wǎng)頁是加載數(shù)據(jù)之后再渲染的，比如數(shù)據(jù)再json文件，傳遞過來之后再渲染頁面。不管是找接口，還是逆向，這里都經(jīng)常要查看的地方。
剩下幾個(gè)分類看名字就知道大概意思了，就不多說了。
下面說一點(diǎn)關(guān)于報(bào)文的東西。
Headers
這里面展示了這個(gè)請(qǐng)求報(bào)文的一些信息。
-
General
這里面有基本的信息，包括請(qǐng)求的地址，請(qǐng)求的方式，請(qǐng)求返回的狀態(tài)碼。
-
Response Headers
這里展示了響應(yīng)頭的信息
-
Request Headers
這里展示了請(qǐng)求頭的信息，一般這里是我們研究的重點(diǎn)。
User-Agent、cookie之類的信息一般都是在這里去瞄一眼的。
Preview
這里提供了一個(gè)預(yù)覽窗口，顯示當(dāng)前文件展示出來的樣子。
這邊的html文檔展示出來如下，不包含其他包的css，所以展示的樣子只能看到一些數(shù)據(jù)，看不到額外的樣式。
Response
這里展示的是收到的文件最原始的樣子---->源碼，可以直接復(fù)制到本地來進(jìn)行詳細(xì)分析。
tip
右鍵請(qǐng)求，菜單中的copy，可以輕松拿到請(qǐng)求的各種標(biāo)準(zhǔn)格式，比如 Copy as cURL (base)，就可以直接扔到postman中進(jìn)行訪問測試。
Sources
源代碼選項(xiàng)卡，界面如下：
左邊主要顯示了暫時(shí)緩存到的文件列表，有目錄層級(jí)結(jié)構(gòu)；點(diǎn)擊某個(gè)文件，中間的位置會(huì)顯示其對(duì)應(yīng)的代碼，并且這里可以像寫代碼的ide一樣在行標(biāo)處打斷點(diǎn)。
右邊主要時(shí)設(shè)置斷點(diǎn)，控制調(diào)試流程的。
此選項(xiàng)卡在我們進(jìn)行逆向研究的時(shí)候非常有用。
左邊文件管理區(qū)還有幾個(gè)小的選項(xiàng)，簡單介紹其中常用的幾個(gè)：
-
Page
主要是層級(jí)顯示文件
-
Filesystem
可以添加本地文件夾，把這里可以作為一個(gè)工作區(qū)。
-
Snippets
相當(dāng)于一個(gè)瀏覽器上的小的工作區(qū)，在這里可以寫一些
js文件并運(yùn)行，如：image-20211209160510323
Console
控制臺(tái)選項(xiàng)，可以寫js代碼進(jìn)行調(diào)試，如：
Application
主要顯示web加載的資源，爬蟲中用的比較多的去查看、操作Cookie。
寫在最后
本篇文章比較簡單，片面，很多東西沒有寫清楚，寫具體，只是大概介紹了開發(fā)者工具中一些爬蟲工作可能會(huì)接觸到的點(diǎn)，算是鋪路了，之后會(huì)看情況一個(gè)一個(gè)具體寫，里面的內(nèi)容、操作其實(shí)還是挺多的。
實(shí)力有限，才疏學(xué)淺，如有錯(cuò)誤，歡迎指正。
- 我的個(gè)人博客 菜貓子小六 - 博客 (codesix.site)
- 我的簡書 菜貓子小六 - 簡書 (jianshu.com)
- 我的CSDN 菜貓子小六 - CSDN
