如何在页面跳转后查看上个页面的网络请求日志信息?打开谷歌Chrome浏览器的Preserve log选项

本文介绍了如何在Chrome浏览器中通过开启Preserve log选项来查看页面跳转后的网络请求日志。首先,创建一个带有跳转链接的简单HTML页面,然后使用Chrome打开并进入开发者工具的Network面板。默认情况下,跳转会导致日志清空,但启用Preserve log后,可以保持页面跳转前的网络请求记录。

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


在Web开发中,在页面跳转后看上个页面的网络请求日志信息是一个常见的需求。本文所述只是Web开发过程中一个小小的技巧。如果不知道这个技巧,开发者往往通过其他方式达到类似的目的,例如:注释页面跳转逻辑,打印日志信息等等。不过,利用好谷歌Chrome浏览器这个开发小技巧可以大大提高效率。

准备工作

准备一个简单的html页面,页面上只有一个跳转到百度首页的a标签。用谷歌Chrome浏览器打开准备好的html页面。不要用苹果的Safari浏览器打开,它没有类似Preserve log的功能。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面跳转</title>
</head>
<body>
	<div>
		<a href="https://www.baidu.com">百度首页</a>
	</div>
</body>
</html>

在这里插入图片描述

打开谷歌Chrome浏览器的Preserve log选项

注意:跳转到百度首页时,浏览器会请求html、js、css以及一些图片和字体等资源。为了方便演示,按F12打开开发者模式,在"Network"选项页,点击"Doc"选项,过滤掉其他东西,只显示请求html文件。
在这里插入图片描述

默认情况

点击上图的“百度首页”
在这里插入图片描述

打开Preserve log选项后

打开Preserve log选项后,再点击之前准备的goto.html页面的“百度首页”,发现之前的goto.html继续保留,没有被删除。
在这里插入图片描述

<think>嗯,用户想知道如何在Chrome开发者工具中请求地址。首先,我需要回想一下自己使用Chrome DevTools经验。记得通常在Network标签里可以看所有的网络请求,包括请求的URL。不过具体步骤可能包括打开开发者工具、刷新页面请求列表等。 首先,打开开发者工具的常用方法,比如右键点击页面选择“检”,或者使用快捷键Ctrl+Shift+I(Windows)或Cmd+Opt+I(Mac)。然后切换到Network标签,这里会记录所有网络活动。可能需要刷新页面来捕获请求,或者直接进行操作让请求发生。 接下来,用户可能需要看具体的请求地址。每个请求在列表里显示的名称应该就是URL的一部分,点击某个请求后,可以在Headers标签里看到完整的请求URL。这里可能需要详细说明每个部分的路径,比如General里的Request URL字段。 另外,引用到参考内容里的引用[2]提到VS Code内置了类似Chrome DevTools的功能,但用户的问题明确是关于Chrome本身的,所以可能不需要涉及VS Code的部分。不过引用[3]提到DOM的概念,虽然和网络请求无关,但可能用户后续有其他相关问题,但这里暂时不需要考虑。 需要确保步骤清晰,避免遗漏关键点。比如确保用户知道如何保留日志Preserve log选项,这样在页面跳转时不会丢失之前请求记录。同时,过滤功能也很重要,帮助用户快速找到特定类型的请求,比如XHR或Fetch。 可能还需要提醒用户关于HTTPS请求的注意事项,或者如何处理跨域请求,但用户的问题集中在请求地址,所以这些可能属于后续问题。不过生成相关问题的时候可以考虑这些方向。 最后,检是否有错误,比如正确的快捷键,标签名称是否正确,以及步骤的逻辑顺序是否合理。确保用户能够一步步跟随操作,成功找到请求的URL。</think>要在Chrome开发者工具中请求地址,可按照以下步骤操作: 1. **打开开发者工具** 右键点击网页选择「检」,或使用快捷键: - Windows/Linux:`Ctrl+Shift+I` 或 `F12` - Mac:`Cmd+Opt+I` > 也可以通过菜单栏「更多工具 > 开发者工具」进入[^2] 2. **切换到Network标签** 在顶部工具栏选择「Network」标签,此时会显示所有网络请求的瀑布流视图。首次打开可能需要刷新页面(`F5`)才会显示请求记录 3. **捕获请求** 执行会触发网络请求的操作(如点击按钮、提交表单),所有请求将实时显示在列表中。建议勾选「Preserve log」保留页面跳转前的请求记录 4. **请求URL** 在请求列表中: - 每行的「Name」列显示请求地址的路径部分 - 点击具体请求后,在右侧面板的「Headers」标签下,「General」区块的「Request URL」字段显示完整地址 ```javascript // 示例:通过控制台快速获取所有请求地址 performance.getEntriesByType("resource").forEach(res => { console.log(res.name); }); ``` 5. **过滤请求类型** 使用顶部过滤器按钮可快速筛选: - XHR/Fetch:AJAX请求 - JS/CSS:静态资源 - Img:图片文件 - Media:音视频文件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈老司机

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值