chrome--浏览器调试工具详解

article/2025/9/16 0:07:21

chrome浏览器开发调试工具打开方式:F12键

一,常用面板介绍

面板
1.定位小箭头按钮(左边第一个):
选中Elements面板,并启动该按钮,可以在页面中定位相应元素的源代码位置,或者选择源代码位置可定位到页面相应的元素。
2.手机-PC视图切换按钮(左边第二个):
启动该按钮,网页可以在pc网址网页和手机网址网页之间进行转换。由于在爬虫过程中,爬取手机网址网页相对来说更容易,所以可以通过该按钮将网页切换至移动网页实现更快速爬取操作。(例如新浪微博)
3.Elements面板
该面板显示了渲染完毕后的全部HTML源代码,在使用selenium爬取网页时可通过这些源代码找到各标签的位置,属性等特征。更重要的是,双击html源码或者右侧的css,可以更改网页外观,即可以对静态网页进行调试。
4.Console面板
该面板用来显示网页加载过程中的日志信息,包括打印,警告,错误及其他可显示的信息等。同时它也是一个js交互控制台。
console
上图显示了百度首页的console面板信息,该信息来源于执行请求下来的js文件所得。每条信息的右侧显示了信息的来源的js文件及具体的行数。同时最下边个人写了一条简单的输出信息,输出“这是数据小丸子”。
更为重要的一个功能是:ctrl+shift+F在该面板中能够唤起全局搜索功能,即可以在所有下载的资源中搜索目标信息,这点对于关键字查找是非常重要的。
5.Sources面板
该面板以站点为分组,存放着请求下来的所有资源(html,css,jpg,gif,js等)。正是因为该面板存放了所有的资源,因此在调试js时,目标代码都是在此处寻找的。
该面板也提供了调试按钮工具。
6.Network面板
Network面板记录了网络请求的详细信息,包括请求头,响应头,表单数据,参数信息等等,只要是做爬虫的这个面板必须要了解。
network
红色圆圈内代表的是请求的不同类型的数据,其中XHR表示ajax请求,即异步请求,在爬虫中最重要的是分析该项。Doc表示的是html文档类型。其他几个不是很重要不详细讲解。
若要保留请求记录,勾选上preserve log选项。

其他几个面板在爬虫过程中使用不是很多,故不再讲解。


http://chatgpt.dhexx.cn/article/RNiS0FGC.shtml

相关文章

通讯调试工具推荐

CommBox通讯调试工具-简单说明 工具支持:串口通讯、串口代理、TCP、UDP、Telnet、Ping、TFtp、串口监视、以太网嗅探等通讯测试 1、本工具支持预定义命令,命令可以进行分组,由树形控件管理。点击“命令编辑”即可编辑预…

modbus调试工具的使用

modbus调试工具的使用分为2部分,2者互相不影响,可以单独使用。 一、根据IP进行模拟通信 二、根据COM进行模拟通信 一、根据IP进行模拟通信 1.安装完成ModbusPollSetup64Bit后,输入注册码进行注册;安装完成ModbusSlaveSetup64Bi…

两款常用的 MQTT 调试工具

文章目录 一、前言二、预备知识三、MQTTBox1、介绍2、下载3、入门使用4、负载测试 四、MQTT.fx1、介绍2、下载3、入门使用4、JS 脚本 一、前言 我们可以使用 MQTT 客户端来测试 MQTT 的通讯功能,这里介绍常用的两款工具 MQTTBox 和 MQTT.fx 。 二、预备知识 MQTT…

简易Window BLE调试工具

简易Windows BLE调试工具 一、简介 Windows BLE调试工具是一款运行在Windows下的BLE调试软件,实现了扫描、连接、获取BLE设备上的服务以及向服务写入和读取数据的功能。 二、运行要求 系统需要使用Windows 10及以上的版本;需要电脑带有蓝牙功能或者使用外接蓝牙…

wsdl在线调试工具

1.下载soapui 2.进行调试 注:1.wsdl地址在测试服务器上一定要能联通 2.测试时如果是xml标签,需要进行转义 http://www.ku51.net/rehtml/ 3.在wsdl地址后面拼接?wsdl能够看到具体的接口信息 3.使用post进行请求示例

【sscom】 串口调试工具

这款串口调试工具我是经常使用的,这里推荐给大家,功能比较全面。 1、正常的串口调试功能。 2、可以保存一些经常发送的数据内容。 3、可以作为网络调试工具使用。 关注公众号:逸趣汇 微信号:yiquhui666 发送:010201 …

移动端开发调试工具

1、抓包工具Charles、Fiddler 平时只用抓取各种网络,需要设置手机的wifi代理 推荐指数2颗星 2、vConsole、eruda等调试库 这个方法需要在页面中插入一段 JS 脚本,这里以vConsole为例,导入vconsole.min.js,并实例化,…

串口通信工具android,串口调试工具手机版

串口调试工具手机版是一款针对OTG接口开发的串口调试应用,这款软件提供了文本、HEX码等多种格式,支持12个自定义按钮,支持自动重发功能,并提供了15种常用波特率,需要的朋友可以来西西下载串口调试工具手机版进行使用 串…

HTTP调试工具

HttpDebug HTTP协议调试工具 V1.02 英文绿色免费版 https://www.jb51.net/softs/43863.html postman的使用方法详解!最全面的教程 https://www.cnblogs.com/jpfss/p/9082542.html 一 简介 Postman是一款功能超级强大的用于发送 HTTP 请求的 Chrome插件 。做web页…

Windows下的TCP/UDP网络调试工具-NetAssist以及Linux下的nc网络调试工具

已剪辑自: https://blog.csdn.net/ccf19881030/article/details/109370384 一、Windows下的网络调试工具-NetAssist 1、TCP服务端和客户端测试2、UDP服务端和客户端测试 二、Linux下的网络调试命令工具-nc 1、什么是nc2、nc的作用3、在CentOS7中安装nc命令工具[4、NetCat 官方…

串口调试工具推荐

作者:三十三重天 博客: http://www.zhouhuibo.club 沉淀、分享、成长,让自己和他人都能有所收获!😜 在进行嵌入式开发时,总是要面对着来自终端的各种报文。不同的设备、终端厂商都有一套自己的报文协议,如何…

PostWomen websocket 调试工具

PostWomen是一款websocket调试工具,补充了post man没有websocket调试的遗憾 源代码 https://gitee.com/ichiva/post-women演示地址 新版浏览器已不支持 ws 链接,请使用 wss 链接实测本地 ws 链接任然可用,如 ws://127.0.0.1 或 ws://localhost http://ichiva.gi…

嵌入式开发<网络调试工具>

嵌入式开发<网络调试工具> 前言1&#xff0c;设备参数分类2&#xff0c;设备参数修改3&#xff0c;调试工具软件 一、软件界面二、功能说明1.网络设置1&#xff09;TCP Client设置A&#xff0c; 协议类型&#xff1a;B&#xff0c; 远程主机地址&#xff1a;C&#xff0c…

Linux串口调试工具

linux系统下串口调试和应用开发时配合串口调试工具必不可少。下面对常用的一些串口工具做一下汇总&#xff0c;包含&#xff1a;minicom/cutecom/picocom/putty/tty_uart 可供工程师参考。 实验环境&#xff1a; OS: Ubuntu16.04 ------------------------------------------…

android js调试工具,鬼鬼JS调试工具

鬼鬼JS调试工具是一款非常实用的JS调试软件&#xff0c;这里带给大家最新版本&#xff0c;新增了一些解密等功能&#xff0c;对于JS调试工作者或者感兴趣的朋友提供稳定和强大的调试支持。鬼鬼JS调试工具具有直观的界面设计&#xff0c;功能十分全面&#xff0c;有需要的朋友欢…

前端必须知道的调试工具

Bug和Debug Bug的起源&#xff1a; 当时人们还在使用第一代真空计算机&#xff08;马克二型&#xff09;&#xff0c;这种计算机是依靠控制电流来改变开关&#xff0c;从而实现控制&#xff0c;但是它会发出大量的热和光。 1949年9月9日&#xff0c;天气非常炎热&#xff0c…

10个用于C#.NET开发的基本调试工具

在调试软件时&#xff0c;工具非常重要。获取正确的工具&#xff0c;然后再调试时提起正确的信息。根据获取的正确的错误信息&#xff0c;可以找到问题的根源所在。找到问题根源所在&#xff0c;你就能够解决该错误了。 你将看到我认为最基本的解决在C# .NET 中错误问题的工具…

数据库(左、中、右)连接

一分钟让你搞明白 left join、right join和join的区别 首先&#xff0c;我们先来建两张表&#xff0c;第一张表命名为kemu&#xff0c;第二张表命名为score&#xff1a; 一、left join 顾名思义&#xff0c;就是“左连接”&#xff0c;表1左连接表2&#xff0c;以左为主&…

数据库 左连接,右连接,全连接,内连接

准备: 分别创建TB A,B. 插入一些测试数据。 TB_A TB_B 1.内链接 (inner join) 内连接是一种一一映射关系&#xff0c;就是两张表都有的才能显示出来 代码例子&#xff1a; select * from TB_A a inner join TB_B b on a.nameb.name 扩展&#xff1a;这里我突然联想到&#…

数据库的左右连接

连接查询 连接&#xff1a; join 所谓连接查询&#xff0c; 就是多个表查询 连接查询是先生成表记录的笛卡尔积 。 所有可能的对象组合 要领 左连接where只限定查询右表&#xff0c; 右连接where只限定查询左表。 左连接 left Join select * from tbl1 Left Join t…