如何在多帧网页中设置断点后运行网页?

时间:2017-06-14 04:29:03

标签: javascript google-chrome-devtools

我是初学者,开始使用Chrome开发工具进行一些调试。我碰到了这个页面:

http://blittle.github.io/chrome-dev-tools/elements/event-listeners.html

我想在'alert me'脚本中设置一个断点。我能够通过两种方式中的任何一种来做到这一点:

  1. 检查'alert me'元素,在'elements'选项卡中,在'event listeners'中找到'button#click-example'处理程序,然后'show function definition'查看代码,并在那里设置断点

  2. 标签中的
  3. ,转到“事件监听器断点”,转到“鼠标” - >“点击”,然后选中它来设置断点

  4. 然而,通过上面的任何一种方式,在我点击F12来调用开发工具后,网页本身(由两个框架组成)将不再显示“事件监听器”框架。那么如何点击“提醒我”并触发断点?

    通常,要触发断点,我要么重新加载页面(F5),要么在Dev工具打开时单击页面上的UI元素。但在这种情况下,我被困住了。

1 个答案:

答案 0 :(得分:1)

如果您关闭开发工具,则无法点击断点。

在您提供的链接上,该页面的部分带有"提醒我"如果开发工具太宽,则不会显示链接。

您最好的选择是更改开发工具的停靠点。这篇文章对此进行了解释:
How to open the Chrome Developer Tools in a new window?

目前看起来像这样:

dock side

您需要第一个选项(单独窗口)或第三个选项(停靠到底部)。