如何使用 Chrome DevTools 在网站上定位和运行特定功能？答案

【问题标题】：How to locate & run a specific function on a website using Chrome DevTools?如何使用 Chrome DevTools 在网站上定位和运行特定功能？
【发布时间】：2018-02-11 05:55:53
【问题描述】：

我想知道在网站上运行特定 Javascript 函数的内容 - 我想使用控制台手动触发它们。

但是，有时网站的 Javascript 包含大量对象内部对象，我无法找到运行特定函数的对象 - 并且 - 手动触发它们。

我相信学习这本书会给我很多关于在构建的网站上调试某些东西方面的专业知识，从而更多地了解某些东西是如何构建的。

【问题讨论】：

您的问题似乎是关于对网站进行逆向工程。需要澄清的问题：您想要单击元素、移动鼠标或按键并在处理事件的代码行处停止，我说得对吗？或者您想在即将删除或更改元素的代码行处停下来吗？这是你想要的，还是别的？请注意，许多网站可能有“丑化”的代码，即使使用开发工具去丑化，也可能难以阅读和理解。
@try-catch-finally你是对的，这是关于对网站进行逆向工程并了解某些事情是如何工作的。
@try-catch-finally 我已经在那个“丑陋的”代码中找到了这些函数，我只是无法手动触发它们，我正在寻找一种方法来了解如何/如果这个是可能的。
如果您找到了在该函数内创建断点并触发它的函数，则会在 堆栈面板 中显示“调用路径”。您是否尝试过使用断点？请添加您已经尝试隔离函数调用方式的步骤和方法。当你说你已经确定了一个功能时，你是怎么做到的？注意：此时您的问题相当广泛，我想让它集中在某个主题上，否则它可能会得到过于广泛甚至误导性的答案。
你不是问过那个问题before吗？

标签： javascript google-chrome google-chrome-devtools devtools

【解决方案1】：

这里有一个小秘诀，可能有助于开始使用开发人员工具对网站进行逆向工程。

漂亮的打印缩小代码：

能够设置断点和单步执行代码

在已知函数处设置断点：

停止执行并能够检查右侧面板中的调用堆栈（进而隔离触发器）。

中断某个 DOM 事件的处理程序：

隔离在某些交互/事件上正在执行的功能。

中断修改 DOM 的代码：

例如添加或删除子树节点。

在渲染期间隔离正在修改 DOM 的代码。

在下一次执行时中断：

如果有定期代码运行和/或您无法通过其他方法处理代码执行。

请注意，该步骤并未涵盖在网站上调试和逆向工程代码的所有可能功能。其他功能例如：XHR 断点或分析器。

开发人员不断在开发工具中添加和更改功能。和他们一起玩并测试他们。

截图是在调试 youtube.com 时拍摄的

【讨论】：

@Mia：我添加了一个与您的问题一样广泛的答案。不要更改您的原始问题以使其更具体（在从我的回答中获得一些知识之后），也不要询问如何在 cmets 中的某些步骤上执行操作的详细信息。如果这个答案不够有帮助，请提出一个新问题，其中包含特定和可重现问题描述以及您为找到解决方案而采取的所有步骤。跨度>