18

我有以下情况：

  • 主页
  • 嵌套页面
  • 通用 JS 文件（包含在两个页面中）

随后将嵌套页面加载到主页面的 iframe 中。两个页面都在页面加载时从公共 JS 文件中调用一个函数。

现场演示： http:
//www.ecmazing.com/misc/pause-execution/mainpage.html
http://www.ecmazing.com/misc/pause-execution/nestedpage.html
http://www.ecmazing.com /misc/暂停执行/common.js

公共 JS 文件包含一个将 H1 元素涂成红色的全局函数。我想在该函数的开头暂停执行，以便在 H1 元素仍为黑色时暂停执行。

如何在主页上做到这一点：

这是微不足道的。只需加载页面，打开浏览器的开发工具，选择common.js文件，在函数的第一行设置断点即可。现在，重新加载页面。断点将持续重新加载，并暂停执行。

如何在嵌套页面上执行此操作：

现在，在 Chrome 和 Firefox (Firebug) 中，上面设置的断点（用于主页）也适用于嵌套页面。两个页面使用相同的 JS 文件，在该文件中设置断点将自动适用于两个页面。不幸的是，这条规则不适用于 IE。

更糟糕的是，即使我随后设置断点，然后仅重新加载 iframe，断点也不会持续存在。

所以，我不知道如何暂停 IE 中嵌套页面的执行。可以做到吗？（我通过debugger;在函数开头手动设置 a 来处理这个问题，但如果可能的话，我希望能够通过 IE 中的开发工具设置断点。）

4

7 回答 7

4

我能找到的最接近的解决方案是在主页上的 loadIFrame() 函数中设置断点，然后“介入”直到加载嵌套页面的 Common.js 文件。在一个更复杂的示例中，您将能够在新的 Common.js 文件中设置断点，并且它们将正常工作，直到下次加载 iframe 时，它​​们将再次丢失。

于 2012-05-25T11:53:33.023 回答
3

我没有要测试的 IE9，但也许您可以将common.js文件视为 iframe 页面的单独资产？我相信这就是它在其他浏览器中工作的原因，因为这些文件必须由浏览器以某种方式标记或标记。

一个示例是附加到iframe 页面?iframePage的末尾。common.js至少在 Firefox 中显示了一个加载为common.js?iframePage. 浏览器会忽略查询字符串之后的所有内容，否则会使用该确切名称加载 JavaScript。

另一个例子是复制common.js并重命名它commonClone.js，然后用于 iframe 页面。

任一示例都可能允许您在 IE9 中设置两次断点，每个资产设置一次。

也就是说，没有什么能阻止您只创建独立于父页面正在使用的文件的iframe 断点。这种方法，我们称之为并行断点，允许异步调试 JavaScript，因为iframe 页面和父页面正在独立处理 JavaScript，但可能会协同工作。common.js

此方法的参考来自官方源MSDN 库：使用 F12 开发人员工具调试 JavaScript 错误部分管理断点显示如何在多个 JavaScript 文件上执行断点。

根据IE9 开发者论坛最近的一篇论坛帖子，在用于调试时防止重新加载 JavaScript 文件的解决方案是使用内联事件处理程序而不是attachEvent，如下例所示：

replace (or comment it out)

$(document).onload(function(){ mycustomonload functions});

with

<body onload="mycustomonload functions">
于 2012-05-25T03:43:29.833 回答
1

我希望你至少在使用 IE Debuggy Bar。使用此代码更新您的 common.js 文件

function func () {
    if(typeof window.parent.debug !== "undefined"){
        window.parent.debug();
    }
    document.getElementsByTagName( 'h1')[0].style.color = 'red';
}


function debug(){
    var a = "break here";
}

var a = "break here";在主页加载后设置断点。当您点击 Load Iframe 按钮时，js 将在该行停止。使用调用堆栈导航到上一个 javascript 指令（行），该指令应位于 nestedpage.html 中的 common.js 文件中。现在设置另一个断点，然后在调试器中点击继续，或使用 STEP 功能

== 更新 ===

顺便说一句，要回答您的问题，为什么断点不能在 iframe 中保留，请这样想。每次单击“加载 IFrame”按钮时，window对象的旧实例都会放置在内存中，并且所有断点都将使用新的 common.js 实例创建新的。如果你打电话也会发生同样的情况windows.open("http://......");

还要记住，即使您在两者中都加载了相同的文件window(s)，它也会在浏览器的两个不同执行框架中加载。您可以运行同一浏览器的两个浏览器实例，但它们不会在窗口中显示相同的页面。但是，有些东西是共享的，比如 cookie，但这超出了本主题的范围。

于 2012-05-27T04:40:35.267 回答
1

也许，如果您可以重组您的 Html 和 JavaScript 代码，您只能common.js从父页面引用，并使主页面和嵌套页面都使用相同的 JavaScript 函数。

这样一个断点就可以满足两种情况。

于 2012-05-24T07:39:37.067 回答
1

要在 IE 中调试 iframe，并能够设置和保留断点，您可以在其自己的 ie 选项卡/窗口中打开 iframe 地址。但是，如果 iframe 与其父级通信，这是不可能的/直截了当的。

于 2012-05-24T12:42:59.290 回答
1

如果您这样做只是为了进行兼容性测试，那么您是否尝试过使用适用于 Chrome 的IETab 插件？

这模拟了 IE 的渲染引擎，同时允许您使用 Chrome 调试器。

如果这还不够好，那么我认为您已经陷入僵局，IE 开发工具还不够复杂。

于 2012-05-20T13:45:10.470 回答
0

您可以使用 setTimeout() 在特定时间暂停 javascript...

于 2012-05-26T12:48:38.623 回答