如何在 Chrome 中查找 JavaScript 函数定义?


在当今时代,几乎每个人都知道谷歌 Chrome 以及如何使用它来提高舒适度。但是对于开发者来说,必须具备使用 Chrome 的高级知识,因为 Chrome 可以帮助开发者通过多种方式解决问题,例如轻松地解决问题或调试代码、检查代码以及查找代码中定义的 JavaScript 函数。

在本教程中,我们将学习如何在 Google Chrome 中查找在 JavaScript 代码中定义的 JavaScript 函数。

以下是三种在 Google Chrome 中查找 JavaScript 函数的方法。

  • 使用开发者工具
  • 使用检查元素
  • 使用查看页面源代码

让我们逐步讨论每种方法的使用。

使用开发者工具

开发者工具对于开发人员的开发工作非常重要。

以下是使用开发者工具在代码中搜索特定关键字或 JavaScript 函数的步骤:

使用开发者工具的步骤

步骤 1 - 对于 Windows 操作系统,使用ctrl + shift + J 键组合;对于 macOS,使用cmd + optn + J 键组合,直接打开开发者工具。下图将显示开发者工具的界面:


步骤 2 - 打开开发者工具后,您可以根据您的操作系统使用以下键的组合。

Windows - ctrl + shift + F

macOS - cmd + optn + F

上述键组合将打开搜索栏,您可以在其中轻松搜索特定关键字以及您要查找的 JavaScript 函数,如下面的图像所示:


在上述步骤中,我们学习了如何在 Google Chrome 的开发者工具中搜索 JavaScript 函数并获得所需的结果。

使用检查元素

检查元素对于开发人员非常有用,因为他们可以使用它来检查浏览器内部的整个代码。

以下是使用检查元素在代码中搜索特定关键字或 JavaScript 函数的步骤:

使用检查元素的步骤

步骤 1 - 在第一步中,您需要打开检查元素。右键单击浏览器窗口,将显示您可以在浏览器上执行的操作列表,在该列表的底部,您将获得一个名为“检查”的选项,如下面的图像所示:


步骤 2 - 单击“检查”选项,将打开检查元素以供使用。

打开“检查元素”工具后,您有两个选项可以查找 JavaScript 函数。

手动浏览 body 标签内的代码并检查 script 标签,然后在 script 标签的代码中搜索所需的函数。由于这种搜索函数的方式会非常耗时且冗长,因此您可以使用其他选项。

打开“检查元素”后,屏幕上会出现一个搜索选项,您可以在其中输入所需的关键字或函数名称,以在代码中搜索它。

下图将显示使用上述两个选项搜索 JavaScript 函数的过程:


在上述步骤中,我们学习了如何使用检查元素方法在 Google Chrome 中查找 JavaScript 函数。现在,我们将了解查看页面源代码方法的使用。

使用查看页面源代码

这是在 Chrome 中搜索或查找 JavaScript 函数的另一种方法。

以下是使用查看源代码在代码中搜索特定关键字或 JavaScript 函数的步骤。

使用查看页面源代码的步骤

步骤 1 - 使用查看页面源代码方法的第一步是打开查看页面源代码以访问网站或网页的代码,以便您可以遍历代码以查找您要搜索的所需关键字或函数。

您可以通过右键单击浏览器窗口来打开查看页面源代码。右键单击后,将显示一个列表,其中倒数第二个选项将是“查看页面源代码”,单击该选项,您将能够访问网页的源代码。下图将显示该选项在列表中的位置:


步骤 2 - 打开“查看页面源代码”选项后,浏览器窗口中当前网页的整个源代码将对您可见。在源代码中,您需要搜索 script 标签,该标签将位于 body 标签的末尾。搜索 script 标签完成后,您可以在 script 标签的代码中进一步搜索 JavaScript 函数。如下面的图像所示:


在本教程中,我们看到了三种搜索或查找 Google Chrome 中 JavaScript 函数的方法,这些方法非常有用,开发人员必须熟悉所有这些方法,因为它们使开发易于理解。

更新于: 2022-10-31

6K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告

© . All rights reserved.