如何在 Chrome 开发者工具中延迟脚本/资源加载
问题描述 投票：0回答：6
有没有办法通过 Chrome 开发者工具为 Google Chrome 浏览器中的脚本/资源加载添加时间延迟？或者完全阻止脚本加载？
我想这样做的原因是为了了解当脚本/资产遭受延迟加载或加载失败时站点的执行情况。
6个回答
投票
在 Chrome 开发者工具中，当您处于网络中时，您可以添加自定义限制。您可以指定下载和上传速度以及请求延迟。但这适用于所有资源，而不仅仅是特定资源。
要延迟任何页面上的单个 URL，您可以使用 Chrome 扩展（因为它可以拦截浏览器请求）。我使用 URL Throttler - Chrome 扩展网上商店。
投票
如果资产是第三方或托管在不同的域上，则有一个 Chrome 插件旨在测试您所说的加载延迟，也称为 SPOF（单点故障）。第一次使用时可能不太直观，但非常有帮助：
该插件称为 SPOF-O-Matic，可以在这里找到：https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg
投票
投票
您可以使用Requestly浏览器扩展或桌面应用程序修改您的网络请求。 延迟/限制脚本是 Requestly 中已支持的许多用例之一。
具体操作方法如下。安装 Requestly 后，请使用 延迟请求功能。
创建新规则并选择延迟规则类型
定义 URL（或 URL 模式）和延迟值
本文解释了添加延迟/限制 API（或网络请求）的 3 种不同方法。但是，在您的情况下，基于请求扩展的方法应该效果最好。
PS - 我构建了 Requestly。
投票
这个DevTools扩展可以满足您的要求。它是一个 Chrome/Firefox DevTools 扩展，可以模拟任何可配置 URL 的 http 请求延迟： HTTP 请求拦截器和延迟器 - Chrome 开发工具扩展网上商店
投票
您可以通过组合多种资源来做到这一点。
我使用 http://www.deelay.me/ 生成延迟网址。
然后，我将其与 requestly 扩展 (https://requestly.io/) 结合起来，创建一个主机替换规则以针对特定资源
最新问题
- 无法在地图中插入键和值
- 如何在ROS2 eloquent中应用断言？
- 使用 firebase 部署 next.js 项目后，移动版网站上显示错误的颜色
- 使用装饰器自动继承父类
- co_reutrn之后协程帧是否自动销毁并释放（即释放分配的帧？）？
- 如何在jupyter中编写LaTeX（不仅仅是方程）
- 尝试使用异步函数，以便执行等待，直到子窗口使用嵌入式 JavaScript 关闭
- Raspberry Pi 和 A9g 模块
- 如何在 lambda 函数中解包变量？
- 无法在映射中插入键和值
- 按住按键时事件侦听器延迟
- 带有 Kafka 流 api 的 Java 代码帮助 WindowBy
- 清除iframe内容（包括它的JS全局范围）你好世界<\/title><\/head><body><h1>你好世界<\/h1><scri...</desc> <question vote="4"> <p>我正在像这样动态创建一个 iframe：</p> <pre><code>let code = "<html><head><title> hello world <\/title><\/head><body><h1> hello world <\/h1><script>const h1 = document.querySelector('h1'); h1.style.color = 'red'<\/script><\/body><\/html>" const iframe = document.createElement('iframe') document.body.appendChild(iframe) const content = iframe.contentDocument || iframe.contentWindow.document content.open() content.write(code) content.close() </code></pre> <p>然后我将其内容更改为这样：</p> <pre><code>code = "<html><head><title> bye world <\/title><\/head><body><h1> bye world <\/h1><script>const h1 = document.querySelector('h1'); h1.style.color = 'red'<\/script><\/body><\/html>" content.open() content.write(code) content.close() </code></pre> <p>但我收到以下错误：<pre><code>SyntaxError: redeclaration of const h1</code></pre>，因为 JavaScript 被注入到 iframe 中。</p> <p>在向 iframe 写入新代码之前，有什么方法可以清除 iframe 内的全局变量范围吗？我已经尝试过 <pre><code>iframe.contentWindow.location.replace('about:blank')</code></pre> 以及 <pre><code>iframe.src = 'about:blank'</code></pre> 但这并不能清除它的内部 JS 变量范围。 （我也遇到同样的错误）</p> <p>我意识到我可以废弃整个 iframe 并创建一个新的 iframe，但我将每秒更换几次代码，并且我希望有一种成本更低的方法来更新它。</p> </question> <answer tick="false" vote="0"> <p>您可以用花括号 <pre><code>const</code></pre> 将动态 <pre><code>let</code></pre> 变量中的 <pre><code>content</code></pre> 和 <pre><code>{}</code></pre> 声明括起来，创建块作用域。这是解决重新声明错误的简单方法。</p> <pre><code>// Note the added braces {} within the <script> let code = "<html><head><title> hello world <\/title><\/head><body><h1> hello world <\/h1><script>{ const h1 = document.querySelector('h1'); h1.style.color = 'red' }<\/script><\/body><\/html>" </code></pre> <p>可能更好的方法是首先删除 DOM 中已存在的所有 iframe，然后在需要添加内容时重新创建 <pre><code>iframe</code></pre>。</p> <pre><code>const updateIframe = (code) => { const iframe = document.createElement('iframe') document.body.querySelector('iframe')?.remove() document.body.appendChild(iframe) const content = iframe.contentDocument || iframe.contentWindow.document content.open() content.write(code) content.close() } </code></pre> </answer> </body></html>
- 将iron-session与NextJS和新的应用程序路由器一起使用
- customtkinter 和 Pandas 之间的性能问题
- 错误：`headers` 在请求范围之外被调用
- R - 跨多个变量删除字符串的一部分
- Chrome 扩展：获取上次使用的选项卡
- X2GO 访问笔记本电脑麦克风
- 如何使用 Core Data 和 Objective-C 创建 NSManagedObjects 属性的简单数据库表？