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

最新推荐文章于 2024-12-13 20:28:22 发布
最新推荐文章于 2024-12-13 20:28:22 发布
阅读量6.6k 收藏 5
点赞数 3
分类专栏： 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 777
查看移动设备效果。
chrome--浏览器调试工具详解
数据小丸子的博客
01-12 1万+
chrome浏览器开发调试工具打开方式：F12键 一，常用面板介绍 1.定位小箭头按钮(左边第一个)： 选中Elements面板，并启动该按钮，可以在页面中定位相应元素的源代码位置，或者选择源代码位置可定位到页面相应的元素。 2.手机-PC视图切换按钮(左边第二个)： 启动该按钮，网页可以在pc网址网页和手机网址网页之间进行转换。由于在爬虫过程中，爬取手机网址网页相对来说更容易，所以可以通过该按...
解决F12浏览器调试页面刷新 network 日志刷新后只保留最新的日志的问题
最新发布
y2020520的博客
12-13 391
每次请求刷新后都把之前的请求记录刷新掉了，把preserve log勾选上后，所有的请求都会保留，再也不怕抓不到记录了。
python获取浏览器network_如何使用python selenium获取浏览器网络日志
weixin_39620037的博客
12-09 1649
要在页面加载完成之前仅获取网络日志(在页面的主要使用过程中没有ajax/async网络日志)，可以获取性能日志：http://chromedriver.chromium.org/logging/performance-log例如，要启用ChromeDriver的性能日志记录DesiredCapabilities cap = DesiredCapabilities.chrome();LoggingP...
【工具使用】在浏览器控制台，选中preserve log保留跨站的请求日志
有一棵树的博客
10-27 1624
【工具使用】在浏览器控制台，preserve log使用保留跨页面的请求日志
浏览器调试02(加密与解密笔记)：network
ResumeProject的博客
04-07 514
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 2624
在浏览器刷新的时候发现之前请求的接口还在，为了看到最新请求的接口，勾选 Preserve log 可以看到之前请求的接口和现在请求的接口，取消勾选只看到最新请求的接口记录，可以根据自己的需要进行控制。
JavaScript反爬笔记（4）_浏览器开发者⼯具（摘要版）_Console + Sources + NetWork
zhsworld的博客
01-28 455
跟JS反扒相关的重点是如下三个面板 一、Console控制台面板：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。 1 console.log：用于输出普通信息 2 console.info：用于输出提示性信息 3 console.error：用于输出错误信息 4 console.warn：用于输出警示信息 5 console.deb...
谷歌浏览器开发者工具network_关于Chrome谷歌浏览器开发者工具网络Network中返回无数据的问题...
weixin_39558754的博客
12-19 3280
1、如图所示，对于有些js文件，响应中无返回数据，Failed to load response data，当然本来是应该有数据，你用火狐浏览器看，就是有的，或者直接在浏览器地址栏里输入url，也可以看到返回信息2、preserve log的作用是，保持下面的所有的网络请求不被冲掉。因为当网页刷新的时候，如果没有选中这个按钮，之前的访问url记录会被冲掉。3、但是如果选中这个按钮，就会出现如题的问...
Chrome调试工具进阶指南（一）
发果叁
03-13 1493
copy xpath 和copy full xpath 的区别就是前者为相对路径，后者为绝对路径。
F12模式下，点击某个接口后保留以前的请求记录，不覆盖不删除，我们该怎么做？
j18423532754的博客
12-26 8755
问题：我们在F12调试接口的时候，比如登录。 登录会产生一个post，但是登录成功以后网页就跳转，原来的post记录没有了，如何保持跳转以前的post记录。当然登录失败可以看见，但我这只是举个例子。 我们只需要检查的在F12模式下，选择一些选项就行了 比如：谷歌浏览器 把Preserve log打钩即可，这个选项的意思就是保存日志...
使用Chrome调试的时候，跳转页面后保留之前的日志
hnnd123的博客
03-19 7106
勾选“preserve log”即可。
google浏览器保留页面跳转之前的请求记录
David_bdqn的博客
01-21 1万+
场景： 浏览器F12分析页面请求接口过程中，常常会遇到页面跳转到了新的页面，原先页面的请求接口看不到了 解决办法：Preserve log配置，字面意思保留日志 开启 开启这个配置后，发现，即使页面跳转了，之前所有页面的请求都会在下面保留，不会随着页面跳转而清楚了，解决。 ...
console重定向的问题
LargeC的博客
12-23 659
一般项目都会封装自己的log输出，以便自己能统一对输出log进行处理。但是遇到的问题就是双击过后会调到自己的封装代码中，不会指定到想要的位置。 在网上找有好多的类似的教程，通过生成dll，通过反射，前者更改起来很费事，我就只做了后者。但是在反射的时候遇到 m_CurrentEntriesPtr != NULL && m_IsGettingEntries 原因是指针没有找到，只要在反射的时候顺便取到StartGettingEntries和EndGettingEntries两个方法 ，在GetE
【转载】前端日志不输出到控制台，直接写入文件保存，将console.log()保存为文件
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
01-27 2797
参考高手写的： https://github.com/wangduanduan/log4b https://www.cnblogs.com/simuhunluo/p/8109429.html
终于找到你！如何将前端console.log的日志保存成文件?
weixin_33730836的博客
05-15 8975
本篇文章来自一个需求，前端websocket会收到各种消息，但是调试的时候，我希望把websoekt推送过来的消息都保存到一个文件里，如果出问题的时候，我可以把这些消息的日志文件提交给后端开发区分析错误。但是在浏览器里，js一般是不能写文件的。鼠标另存为的方法也是不太好，因为会保存所有的console.log的输出。于是，终于找到这个de...
解决窗口关闭时保存数据的方法
简单主义
07-18 4392
网页程序的编写当中，往往要对用户离开网站前作一些数据保存处理，我们可以在发生onunload事件时执行某个数据处理页面，且能自动识别其页面操作是关闭还是刷新。
vue项目中，直接关闭浏览器也要记录登出日志的处理方式
qq_41920758的博客
07-24 974
可是问题来了，关闭浏览器会强制取消接口，也就是在监测浏览器关闭事件里面不会执行接口函数，alert()和console.log()也不会执行，经过我得实验测试，可以进行在浏览器的localStorage缓存里存值。// 判断是窗口关闭 毫秒数判断 存值 来判断关闭过浏览器，和关闭浏览器的时间，存起来，用于登录页面登录之后，继续掉登出接口，把关闭浏览器的时间传给接口记录下来。// 需要区分 是登出日志没有关闭浏览器和关闭浏览器字段来判断调用记录日志接口。// 关闭窗口之前执行。// 监听浏览器关闭。
检查网站：点击 Network、勾选 Preserve log、点击 Doc、点击清理按钮、刷新页面、查看请求头与响应头信息。
04-26
好的，您的问题是关于检查网站，您想了解如何查看请求头和响应头信息。使用浏览器的开发者工具可以查看请求头和响应头信息，具体操作如下： 1. 打开浏览器，进入待检查的网站。 2. 按下键盘上的 F12 键，或者通过浏览器菜单打开开发者工具。 3. 在开发者工具中，点击 Network 选项卡，勾选 Preserve log 选项。 4. 点击 Doc 页面，再点击页面上的清理按钮。 5. 刷新页面，此时开发者工具会显示所有请求和响应的信息。 6. 点击任意一个请求，可以查看其详细信息，包括请求头和响应头。 希望这个回答能够帮助您解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值