python爬虫之Chrome 浏览器开发者工具

最新推荐文章于 2024-07-27 21:20:01 发布

易小侠

最新推荐文章于 2024-07-27 21:20:01 发布

阅读量2.2k

点赞数

分类专栏： python 文章标签： python chrome jquery

本文链接：https://blog.csdn.net/dwf1354046363/article/details/120250832

版权

python 专栏收录该内容

22 篇文章 13 订阅

订阅专栏

一、Chrome 浏览器开发者工具简述

1.1 什么是浏览器开发者工具

其实简单的说，浏览器开发者工具就是给专业的web 应用和网站开发人员使用的工具，它的
作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本
（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手
锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就
是介绍我常用的三个浏览器。

1.2 浏览器开发者工具基本使用

如何调出开发者工具：

按F12 调出& 右键检查（或快捷键Ctrl+Shift+i）调出

二、浏览器开发者工具面板说明

chrome 开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。爬虫这块用的比较多的是元素(ELements), 网络(Network).

元素（Elements）：用于查看或修改HTML 元素的属性、CSS 属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面
控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript 对象，查看调试日志
信息或异常信息。还可以当作Javascript API 查看用。例如我想查看console 都有哪些方法
和属性，我可以直接在Console 中输入"console" 并执行
源代码（Sources）：该页面用于查看页面的HTML 文件源代码、JavaScript 源代码、CSS 源代码，此外最重要的是可以调试JavaScript 源代码，可以给JS 代码添加断点等。
网络（Network）：网络页面主要用于查看header 等与网络连接相关的信息。：网络页面主要用于查看header 等与网络连接相关的信息。

2.1 元素(Elements) 面板

查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然
后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素
源代码的具体位置。

用于定位元素，复制某类元素路径，这个在使用BS4 库,selenium 库时，选择定位器会用到!

用于写XPATH 路径语言时使用!

可以更改浏览器显示方式! 使用手机或者其他设备! 也可以更改当前使用的设备的网络连接
速度!

2.2 网络(Network) 面板(1)

Network 面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request 后分
析HTTP 请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request 和
Response 等），可以根据这个进行网络性能优化。该面板主要包括5 大块窗格：

Controls 控制Network 的外观和功能。

Filters 控制Requests Table 具体显示哪些内容。
Overview 显示获取到资源的时间轴信息。
Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
Summary 显示总的请求数、数据传输量、加载时间信息。

其中用的比较多的是:Controls,Filter,Requests Table