怎么知道页面运行了哪些js

要知道页面运行了哪些JavaScript，可以使用浏览器开发者工具、分析页面源代码、使用监控工具。

其中，浏览器开发者工具是最常用的方法。通过这些工具，你可以查看所有被加载的JavaScript文件，分析它们的执行顺序，并调试代码。具体来说，Google Chrome 和 Firefox 都提供了强大的开发者工具，可以帮助你深入了解页面运行的JavaScript。下面我们将详细介绍如何使用这些工具及其他方法来识别页面上的JavaScript。

一、使用浏览器开发者工具

1、Google Chrome

Google Chrome 的开发者工具（DevTools）是一个功能强大的工具，可以帮助你查看和调试页面上的JavaScript。

打开开发者工具

1. 快捷键：按 F12 或 Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac)。
2. 菜单：点击右上角的三点菜单，选择 更多工具 -> 开发者工具。

查看JavaScript文件

1. Sources面板：在开发者工具中，切换到 Sources 面板，这里会显示所有加载的资源，包括JavaScript文件。
2. 文件树：你可以在左侧的文件树中找到所有加载的JavaScript文件。
3. 代码查看：点击任何一个JavaScript文件，你可以在右侧查看其源码。

监控和调试

1. 断点：你可以在代码行号上点击，设置断点，当代码执行到断点时会暂停。
2. 控制台：在 Console 面板中，你可以输入JavaScript代码进行调试。

2、Firefox

Firefox 也有类似的开发者工具。

打开开发者工具

1. 快捷键：按 F12 或 Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac)。
2. 菜单：点击右上角的三条横线菜单，选择 Web Developer -> Toggle Tools。

查看和调试JavaScript

1. Debugger：在开发者工具中，切换到 Debugger 面板，可以查看所有加载的JavaScript文件。
2. 断点和控制台：与Chrome类似，你可以设置断点，并在 Console 面板中进行调试。

二、分析页面源代码

1、查看HTML文件

查找 <script> 标签

1. 右键查看源代码：右键点击页面，选择 查看页面源代码 或 Inspect。
2. 搜索 <script>：在源代码中搜索 <script> 标签，找到所有引用的JavaScript文件。

2、查看内联JavaScript

查找内联代码块

1. 内联脚本：有些JavaScript代码可能直接嵌入在HTML文件中，你可以在 <script> 标签中找到这些内联代码。
2. 事件处理器：有时JavaScript代码可能内联在HTML属性中，例如 onclick、onload 等事件处理器。

三、使用监控工具

1、PingCode 和 Worktile

监控和管理项目

1. PingCode：这是一个强大的研发项目管理系统，可以帮助你监控和管理项目中的所有代码，包括JavaScript文件。
2. Worktile：这是一款通用项目协作软件，可以帮助你在团队中共享和协作管理JavaScript文件。

2、其他监控工具

Web监控服务

1. New Relic：可以监控页面性能，包括JavaScript的执行情况。
2. Google Analytics：虽然主要用于网站流量分析，但也可以配置监控JavaScript事件。

四、使用自动化工具

1、Webpack 和 Parcel

分析依赖关系

1. Webpack：一个流行的JavaScript模块打包工具，可以生成依赖关系图，帮助你了解页面运行的所有JavaScript。
2. Parcel：类似于Webpack，也可以帮助你打包和分析JavaScript文件。

2、静态代码分析工具

ESLint 和 JSHint

1. ESLint：一个静态代码分析工具，可以帮助你找到JavaScript代码中的问题，并分析代码结构。
2. JSHint：类似于ESLint，也可以进行静态代码分析。

五、总结

通过以上方法，你可以全面了解页面运行的JavaScript文件及其执行情况。浏览器开发者工具 是最直接和有效的方法，分析页面源代码 可以帮助你找到所有引用的JavaScript文件，使用监控工具 和 自动化工具 则可以提供更深入的分析和管理。无论你选择哪种方法，都可以帮助你更好地理解和优化页面上的JavaScript代码。

相关问答FAQs：

1. 为什么我无法在浏览器中看到页面运行的所有 JavaScript？

虽然浏览器的开发者工具可以显示页面上运行的 JavaScript，但并非所有的 JavaScript 都会在浏览器中可见。一些 JavaScript 可能仅在特定的条件下才会执行，或者可能被动态加载，这使得在浏览器中查看所有 JavaScript 变得困难。

2. 如何查看网页中已加载的 JavaScript？

要查看已加载的 JavaScript，您可以打开浏览器的开发者工具。大多数现代浏览器都提供了开发者工具，您可以通过右键单击页面并选择“检查元素”或按下F12键来打开它们。然后，切换到“控制台”选项卡，并查看控制台中的输出，其中将显示页面上已加载的 JavaScript。

3. 有没有办法知道页面上动态加载的 JavaScript？

动态加载的 JavaScript 是在页面加载过程中通过脚本或 AJAX 请求动态添加到页面的。要查看动态加载的 JavaScript，您可以在开发者工具的“网络”选项卡中查看网络请求。在该选项卡中，您可以过滤请求类型以查看页面加载期间发出的所有请求，并查找包含 JavaScript 文件的请求。这样，您就可以知道页面上动态加载的 JavaScript 了。