浏览器调试 Network Console 保留历史日志和网络请求 Preserve log

最新推荐文章于 2025-05-24 07:32:52 发布
最新推荐文章于 2025-05-24 07:32:52 发布
阅读量6.8k 收藏 5
点赞数 3
CC 4.0 BY-SA版权
分类专栏： JS Bug 文章标签： 浏览器 Network Console 历史 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuyujin1997/article/details/114647946
本文探讨了在使用React进行前端开发时，遇到的通过window.location更改URL导致页面跳转前后信息丢失的问题，并介绍了如何利用Preserve Log功能保留跳转前的控制台日志及网络请求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

场景

今天调试一个前端React应用，里面用到了window.location.xxx = "xxx"这样的方式去改变URL，效果类似于页面跳转/刷新。

当页面跳转后，跳转前的控制台日志、网络请求都会“消失”。
但问题是：我要定位的问题必须依赖于页面跳转前的一些信息，才能做出判断。

所以，如何保留页面跳转前的控制台日志、网络请求？
启用Preserve log开关可以做到。

  • 保留历史网络请求

在这里插入图片描述

  • 保留历史的控制台日志

在这里插入图片描述

  • 其他

浏览器环境下的Debug(我目前还不会用，2021-3-10 22:06:52)

Chrome浏览器web调试（js调试、css调试、篡改前置）
墨痕诉清风的博客
06-30 872
查看移动设备效果。
身为程序猿——谷歌浏览器的这些骚操作你真的会吗
热门推荐
孤寒者的博客
06-29 44万+
身为程序猿——谷歌浏览器的这些骚操作你真的会吗
【工具使用】在浏览器控制台，选中preserve log保留跨站的请求日志
有一棵树的博客
10-27 1716
【工具使用】在浏览器控制台，preserve log使用保留跨页面的请求日志
python获取浏览器network_如何使用python selenium获取浏览器网络日志
weixin_39620037的博客
12-09 1682
要在页面加载完成之前仅获取网络日志(在页面的主要使用过程中没有ajax/async网络日志)，可以获取性能日志：http://chromedriver.chromium.org/logging/performance-log例如，要启用ChromeDriver的性能日志记录DesiredCapabilities cap = DesiredCapabilities.chrome();LoggingP...
过滤日志导致浏览器控制台console.log()无输出信息
HuLihui's Blog
05-24 462
在研究播放视频中弹窗暂停问题时，因为过滤日志记录，导致Chrome的console.log()不输出信息。
浏览器调试02(加密与解密笔记)：network
ResumeProject的博客
04-07 539
network 请求包的时间排序： ctrl+F preserve log – 是否保存之前抓的包（一般不保存之前的了） disable cache --如果本地缓存过了就不再请求新的了(一般禁止缓存) 定制浏览器的网速 包的属性：请求头，response为完整代码 包的属性：预览(只有当前包的数据) 包的属性：cookie(有请求的和返回的) initiator是谁请求的，other为浏览器，hover后有请求的具体步骤 ...
chrome日志保存方法
qq_34754747的博客
10-15 1万+
开启 Chrome 的日志_安晓辉生涯——聚焦程序员的职业规划与成长-CSDN博客_chrome浏览器日志在 Chrome 里使用 WebRTC ，因为调试的缘故，要打开日志，记录下过程。https://blog.csdn.net/foruok/article/details/71080012 1、给chrome添加命令行参数 方式一：修改快捷方式，右键chrome.exe，在目标后面添加 --enable-logging --v=1 方式二：在chrome.exe安装目录下cmd，使用命令行方式
谷歌浏览器调式的时候刷新页面network的日志和请求会保留之前的记录解决办法
wangyalong4的博客
11-10 2830
在浏览器刷新的时候发现之前请求的接口还在，为了看到最新请求的接口，勾选 Preserve log 可以看到之前请求的接口和现在请求的接口，取消勾选只看到最新请求的接口记录，可以根据自己的需要进行控制。
F12模式下，点击某个接口后保留以前的请求记录，不覆盖不删除，我们该怎么做？
j18423532754的博客
12-26 8884
问题：我们在F12调试接口的时候，比如登录。 登录会产生一个post，但是登录成功以后网页就跳转，原来的post记录没有了，如何保持跳转以前的post记录。当然登录失败可以看见，但我这只是举个例子。 我们只需要检查的在F12模式下，选择一些选项就行了 比如：谷歌浏览器 把Preserve log打钩即可，这个选项的意思就是保存日志...
chrome--浏览器调试工具详解
数据小丸子的博客
01-12 1万+
chrome浏览器开发调试工具打开方式：F12键 一，常用面板介绍 1.定位小箭头按钮(左边第一个)： 选中Elements面板，并启动该按钮，可以在页面中定位相应元素的源代码位置，或者选择源代码位置可定位到页面相应的元素。 2.手机-PC视图切换按钮(左边第二个)： 启动该按钮，网页可以在pc网址网页和手机网址网页之间进行转换。由于在爬虫过程中，爬取手机网址网页相对来说更容易，所以可以通过该按...
JavaScript反爬笔记（4）_浏览器开发者⼯具（摘要版）_Console + Sources + NetWork
zhsworld的博客
01-28 467
跟JS反扒相关的重点是如下三个面板 一、Console控制台面板：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。 1 console.log：用于输出普通信息 2 console.info：用于输出提示性信息 3 console.error：用于输出错误信息 4 console.warn：用于输出警示信息 5 console.deb...
根据上数代码，我的代码里写了请求头 但是浏览器上没有显示
最新发布
07-23
在开发者工具中检查网络请求，查看请求头是否被正确添加。 步骤1：检查跨域配置（后端） 以Node.js/Express为例，需要设置CORS中间件允许自定义头： ```javascript const express = require('express'); ...
使用Chrome调试的时候，跳转页面后保留之前的日志
hnnd123的博客
03-19 7228
勾选“preserve log”即可。
google浏览器保留页面跳转之前的请求记录
David_bdqn的博客
01-21 1万+
场景： 浏览器F12分析页面请求接口过程中，常常会遇到页面跳转到了新的页面，原先页面的请求接口看不到了 解决办法：Preserve log配置，字面意思保留日志 开启 开启这个配置后，发现，即使页面跳转了，之前所有页面的请求都会在下面保留，不会随着页面跳转而清楚了，解决。 ...
console重定向的问题
LargeC的博客
12-23 674
一般项目都会封装自己的log输出，以便自己能统一对输出log进行处理。但是遇到的问题就是双击过后会调到自己的封装代码中，不会指定到想要的位置。 在网上找有好多的类似的教程，通过生成dll，通过反射，前者更改起来很费事，我就只做了后者。但是在反射的时候遇到 m_CurrentEntriesPtr != NULL && m_IsGettingEntries 原因是指针没有找到，只要在反射的时候顺便取到StartGettingEntries和EndGettingEntries两个方法 ，在GetE
【转载】前端日志不输出到控制台，直接写入文件保存，将console.log()保存为文件
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
01-27 2827
参考高手写的： https://github.com/wangduanduan/log4b https://www.cnblogs.com/simuhunluo/p/8109429.html
终于找到你！如何将前端console.log的日志保存成文件?
weixin_33730836的博客
05-15 8995
本篇文章来自一个需求，前端websocket会收到各种消息，但是调试的时候，我希望把websoekt推送过来的消息都保存到一个文件里，如果出问题的时候，我可以把这些消息的日志文件提交给后端开发区分析错误。但是在浏览器里，js一般是不能写文件的。鼠标另存为的方法也是不太好，因为会保存所有的console.log的输出。于是，终于找到这个de...
解决窗口关闭时保存数据的方法
简单主义
07-18 4414
网页程序的编写当中，往往要对用户离开网站前作一些数据保存处理，我们可以在发生onunload事件时执行某个数据处理页面，且能自动识别其页面操作是关闭还是刷新。
vue项目中，直接关闭浏览器也要记录登出日志的处理方式
qq_41920758的博客
07-24 1001
可是问题来了，关闭浏览器会强制取消接口，也就是在监测浏览器关闭事件里面不会执行接口函数，alert()和console.log()也不会执行，经过我得实验测试，可以进行在浏览器的localStorage缓存里存值。// 判断是窗口关闭 毫秒数判断 存值 来判断关闭过浏览器，和关闭浏览器的时间，存起来，用于登录页面登录之后，继续掉登出接口，把关闭浏览器的时间传给接口记录下来。// 需要区分 是登出日志没有关闭浏览器和关闭浏览器字段来判断调用记录日志接口。// 关闭窗口之前执行。// 监听浏览器关闭。
网络请求状态码怎么看
03-12
<think>好的，用户现在问的是怎么看网络请求状态码。之前用户遇到了页面空白的问题，我之前已经给了他们一些排查步骤，其中提到了检查网络请求状态码。现在用户可能是在按照之前的指导进行操作时，发现需要进一步了解如何查看这些状态码，所以才会提出这个问题。 首先，我需要确定用户的使用场景。他们可能是在开发一个网站或者web应用，遇到了问题，比如页面空白，然后按照之前的建议打开了浏览器的开发者工具，但不知道如何具体查看状态码。用户可能是开发者，或者至少有一定技术背景，但可能对前端调试工具不太熟悉。 接下来，用户的真实需求是学会如何查看网络请求的状态码，以便诊断问题。比如，他们可能需要区分是500服务器错误还是404未找到，或者是200但内容空白的情况。深层需求可能还包括理解不同状态码的含义，以便更快地定位问题所在。 然后，我需要考虑如何组织信息。应该分步骤说明如何在主流浏览器中打开开发者工具，找到网络请求列表，并查看状态码。同时，还需要解释常见的状态码类别，比如1xx到5xx，以及具体的常见状态码如200、404、500等，这样用户不仅能查看，还能理解这些代码的意义。 另外，用户可能还需要知道如何利用这些状态码进行问题排查，比如状态码500意味着服务器内部错误，需要检查服务器日志；404说明资源不存在，需要检查路径是否正确；304涉及缓存问题等等。此外，高级技巧如查看响应内容、请求头信息也是有用的，但需要根据用户的接受程度来决定是否深入。 要注意避免使用过于专业的术语，保持解释的简洁和易懂。同时，可能需要提醒用户注意缓存的影响，比如勾选“禁用缓存”选项，以便获取实时的请求信息。最后，提供一些实际案例，比如用户在之前遇到的空白页面问题中，如何通过状态码来缩小问题范围，这样能帮助他们更好地应用所学知识。</think>### **网络请求状态码查看指南（逐步解析版）** --- #### **一、基础查看方法（所有浏览器通用）** 1. **打开开发者工具** - Windows/Linux：`F12` 或 `Ctrl+Shift+I` - Mac：`Command+Option+I` - 移动端：Chrome浏览器输入`chrome://inspect`连接设备 2. **定位网络请求面板** - 选择`Network`标签（中文界面显示为**网络**） - 勾选`Preserve log`（保留请求记录） 3. **触发页面刷新** - 按`F5`或`Ctrl+R`（Mac为`Command+R`） - 观察请求列表实时加载 4. **关键列说明** | 列名 | 作用 | 典型值示例 | |---------------|--------------------------------|-------------------------| | Status | **状态码**（核心关注点） | 200, 404, 500 | | Type | 请求类型 | document, xhr, css | | Initiator | 请求发起源 | 点击按钮触发的具体位置 | | Size | 资源体积 | 1.5MB, 35KB | --- ### **二、状态码类型速查表** #### **1. 成功类（2xx）** | 状态码 | 含义 | 典型场景 | 排查重点 | |--------|-----------------------|--------------------------|--------------------------| | 200 | 请求成功 | 正常加载HTML/CSS/JS | 检查响应内容是否正确 | | 204 | 无内容 | AJAX提交表单无返回 | 确认后端是否缺少输出 | #### **2. 重定向类（3xx）** | 状态码 | 含义 | 典型场景 | 排查重点 | |--------|-----------------------|--------------------------|--------------------------| | 301 | 永久重定向 | 网站改版后旧链接跳转 | 检查`.htaccess`配置 | | 302 | 临时重定向 | 登录后跳回原页面 | 验证session是否正确设置 | | 304 | 未修改（缓存生效） | 浏览器使用缓存版本 | 强制刷新`Ctrl+F5`解除缓存| #### **3. 客户端错误（4xx）** | 状态码 | 含义 | 典型场景 | 排查重点 | |--------|-----------------------|--------------------------|--------------------------| | 400 | 错误请求 | 表单字段格式错误 | 检查POST/GET参数完整性 | | 401 | 未授权 | 访问需要登录的页面 | 验证cookie/token有效性 | | 403 | 禁止访问 | 无权限查看服务器文件 | 检查文件权限`chmod 755` | | 404 | 未找到 | 图片/CSS路径错误 | 核对URL大小写和路径层级 | #### **4. 服务端错误（5xx）** | 状态码 | 含义 | 典型场景 | 排查重点 | |--------|-----------------------|--------------------------|--------------------------| | 500 | 内部服务器错误 | PHP语法错误/数据库崩溃 | 查看服务器错误日志 | | 502 | 网关错误 | Nginx连接PHP-FPM失败 | 检查fastcgi进程是否存活 | | 504 | 网关超时 | 后端响应超过设定时间 | 优化SQL查询或增加超时时间| --- ### **三、实战诊断技巧** #### **案例1：页面部分空白** - **操作流程**： 1. 发现页面加载不完整 2. 在Network面板筛选`CSS/JS`类型请求 3. 检查是否有`404`状态的资源请求 4. 核对`Sources`面板确认路径是否正确 #### **案例2：AJAX请求失败** ```javascript // 前端代码示例 fetch('/api/getData') .then(response => { if (!response.ok) { console.log(`HTTP错误！状态码：${response.status}`); // 此处捕获状态码 } return response.json(); }) ``` - **排查步骤**： 1. 在Network面板找到对应的`XHR`请求 2. 查看`Status`列是否为`401/500` 3. 点击请求查看`Response`具体内容 --- ### **四、高级调试工具** #### **1. cURL命令验证（脱离浏览器）** ```bash # 获取完整响应头（显示状态码） curl -I https://example.com/api # 结果示例 HTTP/2 404 server: nginx content-type: application/json ``` #### **2. Postman测试** - 设置请求头`User-Agent: Mozilla/5.0`模拟浏览器 - 查看`Status Code`和`Response Time` #### **3. 浏览器扩展推荐** - **Live HTTP Headers**（实时监控请求） - **HTTP Status Code**（快速解读状态码） --- ### **五、常见误区提醒** 1. **304≠错误**：表示浏览器使用缓存资源，实际未发送请求 2. **200但内容异常**：可能返回了错误HTML（如PHP报错被抑制） 3. **跨域请求显示200**：实际可能因CORS策略被浏览器拦截 --- 通过系统化观察状态码，可快速定位问题层级：`4xx`说明客户端配置问题，`5xx`则需要检查服务器环境。建议结合浏览器控制台(Console)的报错信息进行交叉验证。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值