google浏览器保留页面跳转之前的请求记录

最新推荐文章于 2024-04-13 20:32:08 发布
原创 最新推荐文章于 2024-04-13 20:32:08 发布 · 1w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #服务器

场景：

浏览器F12分析页面请求接口过程中，常常会遇到页面跳转到了新的页面，原先页面的请求接口看不到了

解决办法：Preserve log配置，字面意思保留日志

开启

开启这个配置后，发现，即使页面跳转了，之前所有页面的请求都会在下面保留，不会随着页面跳转而清楚了，解决。 

daidavid_csdn
关注
chrome录制保存网络请求
06-24 3116
有时候，需要与同事共同查看网络请求，但是现场往往环境限制，导致无法访问环境。在这里推荐一种利用chrome保存网络请求的方法。
前端浏览器阻止页面跳转
spray_wave的博客
11-13 3663
在浏览器中输入一下代码并回车 window.onbeforeunload=()=>{ return "我阻止了页面跳转" } 然后页面要跳转的话，就会弹出一下对话框
使用Chrome调试的时候，跳转页面后保留之前的日志
hnnd123的博客
03-19 7407
勾选“preserve log”即可。
前端调试技巧之保留所有请求日志不刷新
工一木子
11-04 738
需求： chrome在调试时，如果页面一闪而过，看不到是前端还是后端报错了 解决： 在chrome中的network下把Preserve log勾选
工具_浏览器调式的时候刷新页面network的日志和请求不会消失的解决办法
小歪博客
08-24 1806
把“Preserve log”勾上，F5刷新浏览器页面时，就会有历史日志，而不会消失。把“Preserve log”勾选去掉，F5刷新页面时，就是最新的日志，新的请求。
如何在页面跳转后查看上个页面的网络请求日志信息？打开谷歌Chrome浏览器的Preserve log选项
qq_35421305的博客
03-30 8071
目录准备工作打开谷歌Chrome浏览器的Preserve log选项默认情况打开Preserve log选项后 在Web开发中，在页面跳转后看上个页面的网络请求日志信息是一个常见的需求。本文所述只是Web开发过程中一个小小的技巧。如果不知道这个技巧，开发者往往通过其他方式达到类似的目的，例如：注释页面跳转逻辑，打印日志信息等等。不过，利用好谷歌Chrome浏览器这个开发小技巧可以大大提高效率。 准备工作 准备一个简单的html页面，页面上只有一个跳转到百度首页的a标签。用谷歌Chrome浏览器打开准备好的h
谷歌浏览器调式的时候刷新页面network的日志和请求会保留之前的记录解决办法
wangyalong4的博客
11-10 3247
在浏览器刷新的时候发现之前请求的接口还在，为了看到最新请求的接口，勾选 Preserve log 可以看到之前请求的接口和现在请求的接口，取消勾选只看到最新请求的接口记录，可以根据自己的需要进行控制。
F12如何抓取跳转前的请求
weixin_45878889的博客
11-19 1万+
F12谷歌开发者工具preserve log 谷歌开发者工具里面preserve log ：保留请求日志，跳转页面的时候勾选上，可以看到跳转前的请求，也可适用于chrome开发者工具抓包的问题 实例：抓取登录接口信息 操作步骤： 打开f12，将preserve log勾选，然后进行登录操作，可以抓取到登录接口的信息 ...
chrome跳转新页面，抓住访问url等信息方法
github_39333092的博客
10-19 1万+
勾选上设置中 Global下的auto-open DevTools for popups
浏览器调试 Network Console 保留历史日志和网络请求 Preserve log
wuyujin1997的博客
03-10 7261
场景 今天在公司调试一个前端应用，里面用到了window.location.xxx = "xxx"这样的方式去改变URL。 效果类似于页面跳转/刷新。 问题： 页面跳转前的控制台日志、网络请求都会“消失”。 但要定位的问题必须依赖于页面跳转前的一些信息。 所以，如何保留页面跳转前的控制台日志、网络请求？ 启用Preserve log开关可以做到。 保留历史网络请求 保留历史的控制台日志 其他 浏览器环境下的Debug(我目前还不会用，2021-3-10 22:06:52) ...
关于点击事件网页自动跳转，并且F12的调试窗口消失，找不到调用方法的解决办法
LioneDay的博客
12-20 5861
在浏览器问题定位进行F12调试的时候，遇到了点击按钮之后，方法执行并且立刻跳转，然后调试窗口自动关闭，被调用的方法自然也就找不到了。查了下大部分都说进行勾选Preserve Log。 但是我这中情况由于调试窗口自动关闭所以不起作用。于是想到以前也遇到过这种问题，在比较卡的情况下可以快速截图找到调用方法。顺着这个思路，我想到了限值浏览器速度，进而认为的创造比较卡的情况。说干就干。。。 通过这种方法，就可以看到调用什么方法，但是又不跳转了。 心得：自己前端基础还是不足，无奈用这种野生方法，以后还是得加强
F12谷歌开发者工具--preserve log 保留请求日志
weixin_48520816的博客
06-06 3707
保留请求日志，勾选上后，页面跳转也可以保留跳转前的请求，方便查看。
从抓包砍到接口测试，五分钟看完全过程解析，还说你不会测试？_f12怎么设置持续记录
2401_84264468的博客
04-13 856
性能测试方面，性能测试其实就是大量模拟用户的请求，所以我们必须要知道请求中的协议内容和特点，才能更好的模拟用户请求，分析协议就需要用到抓包工具；接口测试方面，在接口测试时，虽然我们尽量要求有完善的接口文档。但很多时候接口文档不可能覆盖所有的情况，或者因为文档滞后，在接口测试过程中，还时需要借助抓包工具来辅助我们进行接口测试。安全测试方面，我们需要检查敏感数据在传输过程中是否加密，也需要借助抓包工具才能检查。在我们提交 bug 的时候，经常会出现前端（客户端展示）和后端（服务端的逻辑）的争议，那么可以通过抓包
Chrome使用技巧之开发工具中保留历史network log
df0128的专栏
07-07 2万+
在使用chrome的开发工具进行查看网页请求发送的记录时，如果遇到页面有重定向的，譬如登录等页面，在点击登录后network下的请求记录会清空并从登录后主页面开始记录，但是我们想要看的恰恰就是登录的动作所发送的请求，那么如何保留这个请求呢，方法如下： 勾选chrome下的network下的Preserve log即可不清除历史记录，所有请求都会一直保留； ...
chrome F12 network 保留之前请求信息
luminous_you的博客
08-01 2017
chrome F12 保留之前请求信息
解决chrome浏览器的f12控制台的log报错一直频繁的清除
liu_131421的博客
06-08 3302
chrome浏览器的f12控制台的log报错一直频繁的被清除显示 console was cleared / 控制台数据已被清除一直以为是js里面不知道加载了什么导致的。后来发现在浏览器的设置-重置设置-将设置还原为原始默认设置后就解决了。
浏览器F12开发者工具高效使用教程
热门推荐
默默测试！分享记录测试技术！
09-25 3万+
F12是浏览器自带的一个开发调试工具，因为可以用F12快捷键直接启动，所以简称为F12工具。特点:1.简单轻量级，是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能。2. F12作为浏览器的一部分，是数据收发的一端，抓取到的HTTPs报文是可以得到明文数据的......
Chrome调试工具进阶指南（一）
发果叁
03-13 1588
copy xpath 和copy full xpath 的区别就是前者为相对路径，后者为绝对路径。
取消Chrome记录滚动条位置
记录前端生涯一些经验感悟和思考
04-22 2222
遇到一个难题，就是页面有时进入后总是会自动滚动到底部。起先以为是代码问题，查找了整个系统没发现相关操作。后来才后知后觉html5新增window.history.scrollRestoration属性，这是一个实验性质的api，chrome 46以上版本都支持 浏览器自身加了这个设定是好意，但是有些页面用户希望不要记住滚动条位置。经过尝试在代码中加入执行以下代码可以解决问题 if ("scr...
怎么通过谷歌调试端口控制浏览器的网页跳转
最新发布
08-05
<think>我们面对的任务是：使用Chrome调试协议（通过端口9222）控制浏览器实现网页跳转。 根据引用[1]，我们已经知道如何启动一个开启调试端口的Chrome实例： /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=./tmp 接下来，我们需要使用Chrome调试协议（也称为Chrome DevTools Protocol, CDP）来发送命令。我们可以通过WebSocket连接到这个调试端口，然后发送相应的命令。 步骤： 1. 启动Chrome浏览器，指定调试端口和用户数据目录（如上述命令）。 2. 获取可用的调试目标（即打开的页面或标签页）。我们可以通过访问`http://localhost:9222/json`来获取所有可用的目标列表。 3. 从目标列表中选择我们想要控制的标签页（通常是一个WebSocket URL）。 4. 通过WebSocket连接到该URL，然后发送CDP命令。 具体到网页跳转，我们需要使用`Page.navigate`命令。 但是，由于我们可能使用编程方式，这里提供一个使用Python的示例（因为引用中提到了Selenium，但用户要求使用调试协议，所以不使用Selenium，而是直接使用CDP）。 我们可以使用`websockets`库（需要安装）来连接，或者使用`requests`获取目标列表，然后使用其他WebSocket客户端。 然而，有一个更简单的方式：使用`pychrome`库（一个Chrome调试协议的Python客户端）或者`selenium`的底层方式。但用户要求通过调试协议，所以我们将直接使用WebSocket。 但是，由于CDP命令是JSON格式，我们需要按照协议发送。这里我们以Python为例，使用`websockets`库来实现。 注意：首先确保安装了`websockets`库，如果没有，可以通过`pip install websockets`安装。 步骤详细说明： 1. 启动Chrome（如上述命令），假设它已经在运行。 2. 通过HTTP获取目标列表： 发送GET请求到：http://localhost:9222/json 返回的是一个JSON数组，每个元素是一个目标的信息，其中包含`webSocketDebuggerUrl`字段，这就是我们需要的WebSocket地址。 3. 选择一个目标（通常是第一个，或者根据标题等选择），获取其`webSocketDebuggerUrl`。 4. 使用WebSocket连接到这个URL。 5. 发送`Page.navigate`命令。注意，我们需要按照CDP的格式发送消息，每个消息有一个id，方法名和参数。 例如，跳转到"https://example.com"的命令如下： { "id": 1, // 自增的整数，用于匹配响应 "method": "Page.navigate", "params": { "url": "https://example.com" } } 6. 我们可能还需要先启用Page域（因为默认可能未启用）。所以，在发送navigate命令前，先发送`Page.enable`命令。 因此，完整的步骤是： - 发送 `Page.enable` 命令（id=1） - 发送 `Page.navigate` 命令（id=2） 7. 接收并处理响应（可选，如果需要确认跳转是否成功）。 下面是一个简单的Python代码示例： ```python import asyncio import websockets import json import requests # 首先获取目标列表 response = requests.get('http://localhost:9222/json') targets = response.json() # 假设我们选择第一个目标 target = targets[0] ws_url = target['webSocketDebuggerUrl'] async def run(): async with websockets.connect(ws_url) as websocket: # 启用Page域 enable_command = { "id": 1, "method": "Page.enable" } await websocket.send(json.dumps(enable_command)) # 等待启用响应（可选） response = await websocket.recv() print("Enable response:", response) # 导航到指定URL navigate_command = { "id": 2, "method": "Page.navigate", "params": { "url": "https://example.com" } } await websocket.send(json.dumps(navigate_command)) # 等待导航响应 response = await websocket.recv() print("Navigate response:", response) asyncio.get_event_loop().run_until_complete(run()) ``` 注意：在实际使用中，可能需要处理多个响应，因为CDP可能会发送多个事件（比如页面加载事件）。上面的代码只是简单示例。 另外，如果浏览器还没有打开任何页面，那么目标列表可能是空的。在这种情况下，我们可以先创建一个新页面。创建新页面的命令可以通过HTTP请求实现： POST http://localhost:9222/json/new 参数：?url=about:blank （然后就会打开一个空白页，然后再用上面的方法获取其WebSocket URL） 或者，在启动浏览器时，可以直接打开一个初始页面，例如在启动命令后加上URL参数： ... --remote-debugging-port=9222 --user-data-dir=./tmp https://example.com 这样，目标列表中就会有一个页面。 总结：通过以上步骤，我们就可以通过Chrome调试协议控制浏览器跳转网页。 引用说明： [^1] 提供了启动调试端口的方法。 [^2] 提到了复用浏览器实例，但这里我们直接使用CDP，所以没有使用Selenium。 [^3][^4] 是关于Chrome调试的其他技巧，但与本问题关系不大。 因此，我们按照上述步骤即可实现。 注意：在实际编程中，需要处理异常和错误情况，例如连接失败、目标不存在等。 相关问题： 1. 如何通过Chrome调试协议获取当前页面的HTML内容？ 2. 除了网页跳转，Chrome调试协议还能实现哪些常见的页面操作？ 3. 在浏览器启动后，如何动态打开新的标签页并控制它？ 4. 如何处理网页跳转过程中可能出现的弹窗或认证请求？</think>### 如何使用 Chrome 调试协议控制网页跳转 以下是使用 Chrome 调试协议通过端口控制浏览器实现网页跳转的完整步骤： #### 1. **启动调试模式浏览器** 首先启动带调试端口的 Chrome 浏览器（以 macOS 为例）： ```bash /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --remote-debugging-port=9222 \ --user-data-dir=./tmp ``` Windows 系统替换为 Chrome 安装路径即可[^1]。 #### 2. **获取调试目标** 访问调试接口获取 WebSocket 连接地址： ```bash curl http://localhost:9222/json ``` 返回结果示例： ```json [{ "id": "AAABBBCCC", "title": "Chrome调试页", "url": "about:blank", "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/AAABBBCCC" }] ``` #### 3. **建立 WebSocket 连接** 使用 `Page.navigate` 命令控制跳转（Python 示例）： ```python import websockets import json async def navigate(url): async with websockets.connect("ws://localhost:9222/devtools/page/AAABBBCCC") as ws: # 启用Page域 await ws.send(json.dumps({ "id": 1, "method": "Page.enable" })) # 发送跳转命令 await ws.send(json.dumps({ "id": 2, "method": "Page.navigate", "params": {"url": url} })) print(await ws.recv()) # 接收响应 asyncio.get_event_loop().run_until_complete(navigate("https://example.com")) ``` #### 4. **关键协议命令** - 跳转到新 URL：`Page.navigate` - 后退/前进：`Page.goBack` / `Page.goForward` - 重载页面：`Page.reload` #### 5. **调试技巧** - 复用浏览器实例：直接连接已打开的浏览器，避免重复登录[^2] - 查看跳转过程：在 DevTools 的 Network 面板监控请求 - 处理跨域限制：注意 `Referrer-Policy` 等安全策略的影响[^3] #### 6. **完整流程示意图 ```mermaid graph LR A[启动调试端口] --> B[获取WebSocket URL] B --> C[建立WebSocket连接] C --> D[发送Page.navigate命令] D --> E[浏览器执行页面跳转] ``` #### 注意事项 1. 首次连接需先发送 `Page.enable` 激活页面控制功能 2. 跳转结果可通过 `Page.frameNavigated` 事件监听 3. 需处理 SSL 证书错误等安全拦截 4. 多标签页场景需先通过 `Target.attachToTarget` 绑定具体页面 通过以上步骤，即可实现程序化控制浏览器导航行为。实际应用中可结合 Puppeteer 或 Selenium 等工具简化流程[^2][^4]。 --- ### 相关问题 1. **如何通过 Chrome 调试协议获取当前页面的 DOM 结构？** （提示：使用 `DOM.getDocument` 命令） 2. **调试协议中如何处理页面跳转时的身份认证弹窗？** （提示：监听 `Auth.required` 事件并回复凭证） 3. **除了网页跳转，Chrome 调试协议还能实现哪些自动化操作？** （提示：表单填写、截图、网络请求拦截等） 4. **如何通过调试协议模拟移动端设备访问网页？** （提示：使用 `Emulation.setDeviceMetricsOverride` 命令） [^1]: 启动调试端口命令参考 [^2]: 浏览器实例复用原理 [^3]: 跨域请求的安全策略限制 [^4]: Chrome 调试协议命令手册
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值