如何从 chrome 开发工具调用 js 对象上的函数？答案

【问题标题】：How to call function on js object from chrome dev tools?如何从 chrome 开发工具调用 js 对象上的函数？
【发布时间】：2013-10-27 15:30:20
【问题描述】：

假设我想查看一个对象，所以我将它记录到控制台：

console.log(theNoticeObj);

然后使用 Chrome 开发工具，我在控制台中检查它并将其属性 theNoticeObj.bounceHeight 更改为 10px

现在，如果我想立即在该对象上触发 theNoticeObj.bounce() 来定位它，有没有简单的方法可以从控制台执行此操作？

谢谢

编辑：

下面建议的断点，但这会冻结执行。

面对我想要的是用于处理 javascript 对象的命令行 API，而不仅仅是 DOM 元素。如果可能的话，我相信我能找到它。我可能会去看看是否有任何针对 chrome 的功能请求。 https://developers.google.com/chrome-developer-tools/docs/console#using_the_command_line_api

【问题讨论】：

【解决方案1】：

尝试在 console.log 语句下添加window.tno = theNoticeObject。重新加载页面，看看是否可以从控制台执行tno.bounce()。如果通知对象仍在范围内，这应该可以工作。

【讨论】：

【解决方案2】：

您可以导航到Sources 选项卡并打开包含您要玩的代码的javascript 文件，在这种情况下让我们假设它是

console.log(theNoticeObj);

一旦你找到了这一行，你可以在这一点设置一个断点，当你的程序执行到这一行时它就会停止。

然后您可以使用Console 选项卡对当前本地范围、窗口范围内的所有 javascript 对象进行操作。您可以简单地调用：

theNoticeObj.bounce();

它在当前上下文中执行，反映屏幕上的变化。

希望这会有所帮助。

【讨论】：

有一个赞成票，但一个问题是这会暂停执行 - 所以在我按下播放之前，bounce() 不会真正执行。这对大多数情况都有好处，但如果我试图反弹（）只是为了在屏幕上找到对象，那么这将不起作用。我想我正在寻求“实时”解决方案。我会修改我的问题。
暂停执行已添加断点的 javascript 文件。但是，您在控制台上运行的方法将执行并将其更改反映在屏幕上。
你是对的！抱歉，这些方法确实在控制台上执行并导致屏幕上的内容发生变化，但在恢复执行之前它不会可见。非常好的问题将是非常有用的功能。

【解决方案3】：

现在您可以右键单击控制台中的任何对象并使用“存储为全局变量”。

将出现一个新的控制台行，其中包含一个新全局变量的名称，该变量持有对所选对象的引用。

【讨论】：