chrome 开发者工具怎么抓包跳转和iframe层里面的请求
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了chrome 开发者工具怎么抓包跳转和iframe层里面的请求相关的知识,希望对你有一定的参考价值。
参考技术A 勾选network下面preserve log就可以看得跳转前的请求信息了,至于iframe的请求我试过是可以看到的.使用 Chrome 开发者工具调试 iframe
【中文标题】使用 Chrome 开发者工具调试 iframe【英文标题】:Debugging iframes with Chrome developer tools 【发布时间】:2011-03-17 14:11:09 【问题描述】:我想使用 Chrome 开发者控制台查看我的应用程序中的变量和 DOM 元素,但该应用程序存在于 iframe
中(因为它是一个 OpenSocial 应用程序)。
所以情况是:
<containing site>
<iframe id='foo' src='different domain'>
... my app ...
</iframe>
</containing site>
有没有办法从开发者控制台访问iframe
中发生的事情?如果我尝试做document.getElementById("foo").something
,它不起作用,可能是因为iframe
在不同的域中。
我无法在新选项卡中打开 iframe
内容,因为 iframe
还需要能够与包含站点通信。
【问题讨论】:
【参考方案1】:目前控制台中的评估是在页面中的主框架的上下文中执行的,并且它遵循与主框架本身相同的跨域策略。这意味着您无法访问 iframe 中的元素,除非主框架可以。不过,您仍然可以使用“脚本”面板设置断点并调试代码。
更新:这不再是真的。见Metagrapher's answer。
【讨论】:
这个问题仍然悬而未决......差不多一年后。【参考方案2】:当 iFrame 像这样指向您的网站时:
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
</head>
<body>
<iframe id="my_frame" src="/wherev"></iframe>
</body>
</html>
你可以通过这种东西访问iFrame DOM。
var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
【讨论】:
这可能不再起作用due to cross-origin restrictions。【参考方案3】:在 Chrome 的开发者工具中,顶部有一个栏,称为 Execution Context Selector
(h/t felipe-sabino),就在元素、网络、源...当前选项卡的上下文。当在控制台选项卡中时,该栏中有一个下拉菜单,可让您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架,您会发现自己处于适当的框架上下文中。 :D
Chrome v59
Chrome v33
Chrome v32 及更低版本
【讨论】:
这似乎在 chrome 30.0.1599.101 中被破坏 - 在选择 iframe 后,任何使用代码、变量等的尝试仍然来自父上下文 33版界面变了,不知道现在在哪里。 这个有快捷键吗? 唯一的问题是,只有在切换到正确的框架后才能开始查看日志,这意味着您无法查看和检查加载时的日志和错误。有没有办法告诉浏览器不要删除并显示所有框架中的所有日志,或者至少保留并显示具有所有旧/以前输出的框架的控制台? 仅供参考,此选项卡名为 "Execution Context Selector",因为我花了一些时间才知道 :)【参考方案4】:在我相当复杂的场景中,如何在 Chrome 中执行此操作的公认答案对我不起作用。您可能想改用 Firefox 调试器(Firefox 开发人员工具的一部分),它显示所有“源”,包括那些属于 iFrame 的源
【讨论】:
可以加个截图吗?我找不到Sources
developer.mozilla.org/en-US/docs/Tools/Working_with_iframes以上是关于chrome 开发者工具怎么抓包跳转和iframe层里面的请求的主要内容,如果未能解决你的问题,请参考以下文章