浏览器F12调试

系列文章目录

提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 Python 机器学习入门之pandas的使用


提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 系列文章目录
  • 1 浏览器F12开发者工具
    • 1.1 F12开发者工具基本介绍
    • 1.2 F12常规设置
  • 2 标签页
    • 2.1 Elements 查看器
    • 2.2 Network 网络
    • 2.3 Network抓包分析
      • 案例1: 以登录百度账号为例
      • 案例2: 登录账号
      • 案例3: 问题定位分析
      • 如何定位前端问题和后端问题?
    • 2.4 接口测试和数据篡改
    • 2.5 和postman、jmeter等工具的结合使用
    • 2.6 Recorder 记录器
    • 2.7 Application 应用
      • 存储
      • cookies
    • 2.8 Console 控制台
    • 2.9 Performance 性能
    • 2.10 小结


1 浏览器F12开发者工具

1.1 F12开发者工具基本介绍

在这里插入图片描述

1.2 F12常规设置

1)显示的位置调整:靠右靠左靠下独立窗口
在这里插入图片描述
2)设置颜色和语言(chrome)
在这里插入图片描述

3)手机版本的切换,适合测试H5页面小程序测试,可以方便在电脑操作和调试;也可以选择尺寸和不同的手机型号
在这里插入图片描述

2 标签页

在这里插入图片描述

英文中文
Elements查看器
Console控制台
Sourse源代码/调试器
Network网络
Performance性能
Memory内存
Application应用
Recorder记录器
Performance insights性能数据分析
  • 查看器:主要用来做元素的定位

  • 控制台:调试错误等

  • 源代码:前端代码的调试,断点等

  • 网络:测试用来抓包、进行分析进行一些测试问题的定位

  • 性能:前端页面的性能

  • 应用:存储cookie缓存等

2.1 Elements 查看器

在这里插入图片描述
在这里插入图片描述
1.查看元素的代码
点击左上角的箭头图标(或按快捷键Ctrl+Shft+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements) -栏中定位到该元素源代码的具体位置。
在这里插入图片描述
2.查看元素的属性
定位到元素的源代码之后,可以从源代码中读出该元素的属性。如class、 src、 width等属性的值。
3.修改元素的代码与属性

  • 点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:选择Edit as
    HTML选项时,元索进入编辑模式,可以对元素的代码进行任意的修改
  • 当然,这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,所以这个功能也是作为调试页面效果而使用。

在这里插入图片描述
结果如下:
在这里插入图片描述

2.2 Network 网络

在这里插入图片描述

网络协议–01–HTTP协议
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.3 Network抓包分析

案例1: 以登录百度账号为例

在这里插入图片描述
双击查看详细报文消息内容:
在这里插入图片描述

标头(消息头):

  • 常规(请求网址、请求方法、状态代码)
  • 响应头
  • 请求头
    在这里插入图片描述

载荷(请求体):

可看到登录输入的手机号和验证码
在这里插入图片描述

响应(响应体)

在这里插入图片描述

时间

在这里插入图片描述

cookie:

在这里插入图片描述

案例2: 登录账号

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

案例3: 问题定位分析

抓不到登录的这个post请求:

  • 保留日志:开启后,重新加载url,或者跳转了页面之后,之前的请求显示资源信息依然会保留下来,不会清空;
  • 停用缓存:开启后,页面资源不会存入缓存,可以在status栏的状态码看文件请求状态。
    在这里插入图片描述
  • 输入账号提示“账号不存在”,如果没抓到包,证明是前端页面给出的提示
  • 抓到POST请求的包了,证明是后端返回的提示
    在这里插入图片描述
    在这里插入图片描述

如何定位前端问题和后端问题?

步骤:
1.明显的前端js问题
在这里插入图片描述
2.抓包分析:
1)前端没有发送请求 --前端问题
2)前端发送请求了,但是前端发送内容的数据错误 --前端问题
3)前端发送了正确请求,后端没有给响应消息 --后端问题
4)前端发送了正确请求,后端也响应消息了,但是响应的数据错误 --后端问题
5)前端发送了正确请求,后端给出了正确响应,但前端没有正确显示 --前端问题
有时需要配合数据库确认+Linux服务器分析项目日志

2.4 接口测试和数据篡改

接口测试(数据篡改) :(以谷歌浏览器为例)
右键后点击复制,以fetch格式复制,粘贴到控制台

  1. 可以修改捕获到的请求的数据(参数),对接口的正常数据+异常数据进行测试。
  2. 回车发送接口请求
  3. 检查响应结果
    在这里插入图片描述
    可修改请求体的数据或参数(例如将用户名输入错误),回车键发送请求:
    在这里插入图片描述
    检查响应结果:
    在这里插入图片描述

使用场景: 前端检查了一些异常数据报错,接口层面是否也有检测这种异常数据的能力呢?所以要对接口进行这些异常数据的测试检查。

2.5 和postman、jmeter等工具的结合使用

复制为curl命令(linux)可以在postman里粘贴使用–import里进行粘贴
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

复制为HAR格式/所有内容保存为HAR模式,可以导入到其他工具使用,比如Metersphere工具
导入HAR文件:

F12可以导入其他工具导出的HAR文件。

  • 测试:HAR文件导出 给到开发进行问题的定位! --问题复现 修复bug

在这里插入图片描述

2.6 Recorder 记录器

录制按钮- -chrome 98版本后才有的功能

录制脚本的用途(导入和导出):
测试的时候一些重复性的工作可以录制下来进行回放;也可以保存后导入进行repaly (重放)。

  1. 录制并进行replay
  2. 导出给开发进行replay复现bug
  3. 导入进行replay
  4. 还可以进入分析性能页面

注意:功能还是试用性功能,还在完善中,大家选择进行使用!
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.7 Application 应用

存储

在这里插入图片描述
在这里插入图片描述

cookies

在这里插入图片描述

cookies用户鉴权:

  1. 登录一次过后用户的一些信息保存到服务器里,以session的形式,也就是会话,服务器这边的会话也有一定的时效
  2. 服务器会把session的一些信息通过set cookies字段发送给客服端
  3. 客户端保存到浏览器里面,也就是以cookies的形式保存。 --和session配套使用。
    在这里插入图片描述

2.8 Console 控制台

在这里插入图片描述
在这里插入图片描述
1)执行js语句
在这里插入图片描述
2)查看cookies信息
查看当前网站的cookie
在这里插入图片描述
设置cookie值
例如:

document.cookie = "csrf_token=12435332355"

2.9 Performance 性能

在这里插入图片描述
案例:

  • 点击●可以开始录制, 它会记录用户的交互以及这些交互对页面性能数据的影响,当交互完成后,
  • 点击Stop来停止Record ,Performance面板会展示出刚才录制的页面性能数据

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.10 小结

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/674608.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Kotlin】Kotlin基本数据类型

1 变量声明 var a : Int // 声明整数类型变量 var b : Int 1 // 声明整数类型变量, 同时赋初值为1 var c 1 // 声明整数类型变量, 同时赋初值为1 val d 1 // 声明整数类型常量, 值为1(后面不能改变d的值) 变量命名规范如下。 变量名可以由字母、数字、下划线(_…

Tomcat之虚拟主机

1.创建存放网页的目录 mkdir -p /web/{a,b} 2.添加jsp文件 vi /web/a/index.jsp <% page language"java" import"java.util.*" pageEncoding"UTF-8"%> <html> <head><title>JSP a page</title> </head> …

Rust 初体验3

“开胃”代码 fn main() {let (a, mut b): (bool,bool) (true, false);// a true,不可变; b false&#xff0c;可变println!("a {:?}, b {:?}", a, b);b true;assert_eq!(a, b); }Rust语法和C语言有很大不同&#xff0c;特别是在变量声明、打印输出和错误处…

PAT-Apat甲级题1009(python和c++实现)

PTA | 1009 Product of Polynomials 1009 Product of Polynomials 作者 CHEN, Yue 单位 浙江大学 This time, you are supposed to find AB where A and B are two polynomials. Input Specification: Each input file contains one test case. Each case occupies 2 lin…

dockerfile 详细讲解

当编写 Dockerfile 时&#xff0c;你需要考虑你的应用程序所需的环境和依赖项&#xff0c;并将其描述为一系列指令。下面是一个简单的示例&#xff0c;演示如何编写一个用于部署基于 Node.js 的网站的 Dockerfile&#xff1a; Dockerfile # 使用官方 Node.js 镜像作为基础镜像…

力扣:47. 全排列 II

回溯解法思路&#xff1a; 1.先写一个集合来接收全部的全排列&#xff0c;再写一个集合来接受单个的全排列。在声明一个int【】数组来用于去重用的标记nums数组中什么元素用了的标记。同时排列一下nums数组方便去除重复的全排列。 2.调用回溯函数&#xff0c;终止条件为li2集…

Matplotlib绘制炫酷散点图:从二维到三维,再到散点图矩阵的完整指南与实战【第58篇—python:Matplotlib绘制炫酷散点图】

文章目录 Matplotlib绘制炫酷散点图&#xff1a;二维、三维和散点图矩阵的参数说明与实战引言二维散点图三维散点图散点图矩阵二维散点图进阶&#xff1a;辅助线、注释和子图三维散点图进阶&#xff1a;动画效果和交互性散点图矩阵进阶&#xff1a;调整样式和添加密度图总结与展…

低代码平台痛点

1、数据查询性能一直是低代码平台的痛点 原来的平台&#xff0c;数据查询时&#xff0c;直接查数据库&#xff0c;现在低代码平台需要先经过元数据解析后&#xff0c;才知道如何查数据库&#xff0c;因此增加了查询的耗时&#xff0c;针对不同的低码平台设计&#xff0c;影响的…

stable_diffusion提示词编写笔记(1)

stable_diffusion提示词编写笔记(1) start 总结一下AI绘画学到的知识。 一.提示词分两种&#xff1a; 1.正向提示词&#xff1b; 2.反向提示词&#xff1b; 一个对应你希望图形包含的内容提示词&#xff0c;一个对应你不希望图形出现的内容提示词。 二.如何书写提示词 1.内…

记一次VulnStack渗透

信息收集 netdiscover的主机发现部分不再详解&#xff0c;通过访问端口得知20001-2003端口都为web端口&#xff0c;所以优先考虑从此方向下手 外网渗透 GetShell Struct漏洞 访问2001端口后&#xff0c;插件Wappalyzer爬取得知这是一个基于Struct的web站点&#xff0c;直接…

gtkmm4 应用程序使用 CSS 样式

文章目录 前言css选择器css文件示例源代码效果 前言 程序样式和代码逻辑分离开 使代码逻辑更可观 css选择器 Cambalache提供了两种css-classes 相当于css里的类名:class“类名”css-name 相当于css里的标签名:spin div p 啥的 如上我设置了这个按钮控件的类名为testButton 标…

【Java】万万没想到,又被问ThreadLocal了

我待ThreadLocal如初恋&#xff0c;ThreadLocal虐我千百遍。但这一次&#xff0c;要彻底搞懂ThreadLocal 回顾一下面试名场面&#xff1a; 面试官&#xff1a;Handler如何做到与线程绑定的&#xff1f; 我&#xff1a;每个Handler只有一个相关联的Looper&#xff0c;线程绑定…

如何开始深度学习,从实践开始

将“如何开始深度学习”这个问题喂给ChatGPT和文心一言&#xff0c;会给出很有专业水准的答案&#xff0c;比如&#xff1a; 要开始深度学习&#xff0c;你可以遵循以下步骤&#xff1a; 学习Python编程语言的基础知识&#xff0c;因为它在深度学习框架中经常被使用。 熟悉线性…

自然人如何代开发票

1&#xff1a;登录国家税务总局深圳市电子税务局 地址&#xff1a;国家税务总局深圳市电子税务局 2&#xff1a;个人所得税APP 扫描登录 或 身份证登录 3&#xff1a;选择 自然人代开增值税电子普通发票 4&#xff1a;申请代开 5&#xff1a;人脸识别 6&#xff1a;画框的…

509. 斐波那契数

Problem: 509. 斐波那契数 文章目录 思路解题方法复杂度Code解法一 &#xff08;暴力搜索&#xff09;解法二 &#xff08;记忆化搜索&#xff09;解法三&#xff08;动态规划&#xff09;解法四&#xff08;动态规划&#xff08;空间O(1)&#xff09;&#xff09; 思路 斐波那…

【每日一题】LeetCode——链表的中间结点

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有…

【Python4Delphi】学习笔记(一):介绍篇

一、前言&#xff1a; 1. python语言简介&#xff1a; 众所周知&#xff0c;python是目前非常流行的编程语言之一&#xff0c;自20世纪90年代初Python语言诞生至今&#xff0c;它已被逐渐广泛应用于系统管理任务的处理和Web编程。 由于Python语言的简洁性、易读性以及可扩展性…

苏宁易购移动端首页(rem布局)

技术选型 方案∶采取单独制作移动页面方案技术:布局采取rem适配布局( less rem &#xff0b;媒体查询)设计图:设计图采用750px设计尺寸 设置视口标签以及引入初始化样式 <meta name"viewport" content"widthdevice-width, initial-scale1.0, user-scalable…

Qt网络编程-写一个简单的网络调试助手

环境 Windows&#xff1a;Qt5.15.2&#xff08;VS2022&#xff09; Linux&#xff1a;Qt5.12.12&#xff08;gcc) 源代码 TCP服务器 头文件&#xff1a; #ifndef TCPSERVERWIDGET_H #define TCPSERVERWIDGET_H #include <QWidget> namespace Ui { class TCPServerW…

2024.1.30力扣每日一题——使循环数组所有元素相等的最少秒数

2024.1.30 题目来源我的题解方法一 暴力模拟&#xff08;无法通过&#xff09;方法二 哈希表数学 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2808 我的题解 方法一 暴力模拟&#xff08;无法通过&#xff09; 直接暴力枚举。记录每一个元素所在的位置&#xff0c;然…