怎么查看执行了js

查看JS执行的方法有多种，包括使用浏览器开发者工具、在代码中添加调试语句、使用外部调试工具等。最常用的方法是使用浏览器的开发者工具、添加console.log语句、使用断点调试。下面将详细解释其中一种方法——使用浏览器开发者工具。

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

浏览器开发者工具是前端开发者的必备工具，通过这些工具，我们可以实时查看和调试JavaScript代码。以下是一些常见的浏览器开发者工具及其使用方法：

1、Chrome开发者工具

Chrome开发者工具是前端开发者最常用的工具之一，它提供了丰富的功能来帮助开发者查看和调试JavaScript代码。

打开开发者工具

1. 打开Chrome浏览器。
2. 右键点击网页空白处，选择“检查”。
3. 或者直接按键盘上的F12键或Ctrl+Shift+I（Windows）/Cmd+Opt+I（Mac）。

查看Console

Console面板是调试JavaScript代码的重要工具。我们可以在Console面板中查看输出的日志、错误信息和警告信息。

1. 在Console面板中，我们可以看到由console.log()、console.error()等方法输出的日志信息。
2. 通过查看这些日志信息，我们可以了解JavaScript代码的执行情况。

设置断点

设置断点是调试JavaScript代码的另一种重要方法。通过设置断点，我们可以在代码执行到断点时暂停执行，并查看当前的变量值和执行上下文。

1. 在Sources面板中，找到要调试的JavaScript文件。
2. 在代码行号的左侧点击，添加一个断点。
3. 断点设置后，当代码执行到该行时，会自动暂停执行，并在断点处显示当前的变量值和执行上下文。

调试网络请求

Network面板可以帮助我们查看和调试网络请求。我们可以在Network面板中查看所有的网络请求，包括其请求头、响应头、请求数据和响应数据。

1. 打开Network面板。
2. 重新加载页面，查看页面加载过程中发出的所有网络请求。
3. 点击某个请求，可以查看其详细信息，包括请求头、响应头、请求数据和响应数据。

2、Firefox开发者工具

Firefox开发者工具和Chrome开发者工具类似，也提供了丰富的功能来帮助开发者查看和调试JavaScript代码。

打开开发者工具

1. 打开Firefox浏览器。
2. 右键点击网页空白处，选择“检查元素”。
3. 或者直接按键盘上的F12键或Ctrl+Shift+I（Windows）/Cmd+Opt+I（Mac）。

查看Console

1. 在Console面板中，我们可以看到由console.log()、console.error()等方法输出的日志信息。
2. 通过查看这些日志信息，我们可以了解JavaScript代码的执行情况。

设置断点

1. 在Debugger面板中，找到要调试的JavaScript文件。
2. 在代码行号的左侧点击，添加一个断点。
3. 断点设置后，当代码执行到该行时，会自动暂停执行，并在断点处显示当前的变量值和执行上下文。

调试网络请求

1. 打开Network面板。
2. 重新加载页面，查看页面加载过程中发出的所有网络请求。
3. 点击某个请求，可以查看其详细信息，包括请求头、响应头、请求数据和响应数据。

3、Safari开发者工具

Safari开发者工具也是前端开发者常用的工具之一，特别是在调试iOS设备上的网页时。

打开开发者工具

1. 打开Safari浏览器。
2. 在菜单栏中选择“开发” -> “显示Web检查器”。
3. 或者直接按键盘上的Cmd+Opt+I（Mac）。

查看Console

1. 在Console面板中，我们可以看到由console.log()、console.error()等方法输出的日志信息。
2. 通过查看这些日志信息，我们可以了解JavaScript代码的执行情况。

设置断点

1. 在Sources面板中，找到要调试的JavaScript文件。
2. 在代码行号的左侧点击，添加一个断点。
3. 断点设置后，当代码执行到该行时，会自动暂停执行，并在断点处显示当前的变量值和执行上下文。

调试网络请求

1. 打开Network面板。
2. 重新加载页面，查看页面加载过程中发出的所有网络请求。
3. 点击某个请求，可以查看其详细信息，包括请求头、响应头、请求数据和响应数据。

4、Microsoft Edge开发者工具

Microsoft Edge开发者工具与Chrome开发者工具类似，因为Edge浏览器采用了Chromium内核。

打开开发者工具

1. 打开Microsoft Edge浏览器。
2. 右键点击网页空白处，选择“检查”。
3. 或者直接按键盘上的F12键或Ctrl+Shift+I（Windows）/Cmd+Opt+I（Mac）。

查看Console

1. 在Console面板中，我们可以看到由console.log()、console.error()等方法输出的日志信息。
2. 通过查看这些日志信息，我们可以了解JavaScript代码的执行情况。

设置断点

1. 在Sources面板中，找到要调试的JavaScript文件。
2. 在代码行号的左侧点击，添加一个断点。
3. 断点设置后，当代码执行到该行时，会自动暂停执行，并在断点处显示当前的变量值和执行上下文。

调试网络请求

1. 打开Network面板。
2. 重新加载页面，查看页面加载过程中发出的所有网络请求。
3. 点击某个请求，可以查看其详细信息，包括请求头、响应头、请求数据和响应数据。

5、调试Node.js应用

对于Node.js应用，我们可以使用node inspect命令进行调试，或者使用Visual Studio Code等集成开发环境（IDE）来设置断点调试。

使用node inspect命令

1. 打开终端。
2. 使用命令node inspect your_script.js启动Node.js应用的调试模式。
3. 在终端中，我们可以使用n、c、s等命令来单步执行代码、继续执行代码等。

使用Visual Studio Code

1. 打开Visual Studio Code。
2. 在左侧活动栏中点击“调试”图标。
3. 配置启动配置文件，指定要调试的Node.js脚本。
4. 在代码中设置断点。
5. 点击“启动调试”按钮，开始调试Node.js应用。

二、在代码中添加调试语句

在JavaScript代码中添加调试语句是另一种常见的调试方法。通过在代码中添加console.log()、console.error()、debugger等语句，我们可以查看代码的执行情况。

1、使用console.log()

console.log()是最常用的调试方法之一。通过在代码中添加console.log()语句，我们可以将变量值、执行流程等信息输出到控制台。

function add(a, b) {

  console.log('a:', a);
  console.log('b:', b);
  return a + b;
}

2、使用console.error()

console.error()用于输出错误信息。通过在代码中添加console.error()语句，我们可以将错误信息输出到控制台。

function divide(a, b) {

  if (b === 0) {
    console.error('Division by zero');
    return null;
  }
  return a / b;
}

3、使用debugger

debugger语句用于在代码执行到该行时暂停执行，并进入调试模式。我们可以在开发者工具中查看当前的变量值和执行上下文。

function multiply(a, b) {

  debugger;
  return a * b;
}

三、使用外部调试工具

除了浏览器开发者工具和在代码中添加调试语句之外，我们还可以使用一些外部调试工具来查看和调试JavaScript代码。

1、WebStorm

WebStorm是JetBrains公司开发的一款专业的JavaScript开发工具，提供了丰富的调试功能。

设置断点

1. 在代码编辑器中，找到要调试的JavaScript文件。
2. 在代码行号的左侧点击，添加一个断点。
3. 断点设置后，当代码执行到该行时，会自动暂停执行，并在断点处显示当前的变量值和执行上下文。

启动调试

1. 配置调试配置文件，指定要调试的JavaScript文件。
2. 点击“调试”按钮，启动调试。
3. 在调试过程中，我们可以查看当前的变量值、执行上下文等信息。

2、Visual Studio Code

Visual Studio Code是Microsoft公司开发的一款免费开源的代码编辑器，提供了丰富的调试功能。

设置断点

1. 在代码编辑器中，找到要调试的JavaScript文件。
2. 在代码行号的左侧点击，添加一个断点。
3. 断点设置后，当代码执行到该行时，会自动暂停执行，并在断点处显示当前的变量值和执行上下文。

启动调试

1. 配置启动配置文件，指定要调试的JavaScript文件。
2. 点击“启动调试”按钮，启动调试。
3. 在调试过程中，我们可以查看当前的变量值、执行上下文等信息。

3、Fiddler

Fiddler是Telerik公司开发的一款HTTP调试代理工具，提供了丰富的网络请求调试功能。

捕获网络请求

1. 启动Fiddler。
2. 在浏览器中访问要调试的网页。
3. 在Fiddler中，可以查看所有的网络请求，包括其请求头、响应头、请求数据和响应数据。

调试网络请求

1. 选择某个网络请求，可以查看其详细信息，包括请求头、响应头、请求数据和响应数据。
2. 可以修改请求数据，重新发送请求，查看响应结果。

4、Charles

Charles是Karl von Randow开发的一款HTTP调试代理工具，提供了丰富的网络请求调试功能。

捕获网络请求

1. 启动Charles。
2. 在浏览器中访问要调试的网页。
3. 在Charles中，可以查看所有的网络请求，包括其请求头、响应头、请求数据和响应数据。

调试网络请求

1. 选择某个网络请求，可以查看其详细信息，包括请求头、响应头、请求数据和响应数据。
2. 可以修改请求数据，重新发送请求，查看响应结果。

四、使用日志管理系统

在大型项目中，我们可能需要使用日志管理系统来集中管理和分析日志信息。通过日志管理系统，我们可以实时查看和分析JavaScript代码的执行情况。

1、ELK Stack

ELK Stack是由Elasticsearch、Logstash、Kibana组成的一套开源日志管理系统，提供了丰富的日志管理和分析功能。

配置Logstash

1. 配置Logstash，将日志数据从各个系统收集到Elasticsearch中。
2. 配置Logstash过滤器，解析和处理日志数据。

配置Elasticsearch

1. 配置Elasticsearch，存储和索引日志数据。
2. 配置Elasticsearch索引，定义日志数据的结构和字段。

配置Kibana

1. 配置Kibana，提供日志数据的可视化和分析功能。
2. 配置Kibana仪表板，展示日志数据的关键指标和趋势。

2、Graylog

Graylog是另一款开源的日志管理系统，提供了丰富的日志管理和分析功能。

配置Graylog

1. 配置Graylog输入，将日志数据从各个系统收集到Graylog中。
2. 配置Graylog流，解析和处理日志数据。

配置Elasticsearch

1. 配置Elasticsearch，存储和索引日志数据。
2. 配置Elasticsearch索引，定义日志数据的结构和字段。

配置Graylog仪表板

1. 配置Graylog仪表板，展示日志数据的关键指标和趋势。
2. 配置Graylog警报，实时监控日志数据的异常情况。

通过以上方法，我们可以查看和调试JavaScript代码的执行情况。不同的方法适用于不同的场景，开发者可以根据具体需求选择合适的方法来查看和调试JavaScript代码的执行情况。

相关问答FAQs：

1. 如何查看网页中执行了JavaScript代码？

• 问题描述：我想知道如何查看网页中执行了哪些JavaScript代码？
• 回答：您可以通过浏览器的开发者工具来查看网页中执行的JavaScript代码。不同浏览器的操作方式略有不同，一般情况下，您可以通过按下F12键打开开发者工具，然后选择"控制台"或"Console"选项卡，在这里可以看到网页中执行的JavaScript代码以及相应的输出结果。

2. 怎样追踪网页中的JavaScript代码执行过程？

• 问题描述：我想了解网页中的JavaScript代码是如何被执行的，有什么方法可以追踪它们的执行过程吗？
• 回答：要追踪网页中的JavaScript代码执行过程，您可以使用浏览器的开发者工具中的"调试"或"Debugger"选项。通过在代码中设置断点，您可以逐步执行JavaScript代码并查看每一步的执行结果。这样可以帮助您更好地理解和调试代码。

3. 如何监控网页中的JavaScript代码执行性能？

• 问题描述：我想了解网页中的JavaScript代码执行性能，有没有什么方法可以监控它们的执行时间和效率？
• 回答：要监控网页中的JavaScript代码执行性能，您可以使用浏览器的开发者工具中的"性能"或"Performance"选项。通过使用性能分析工具，您可以获取JavaScript代码的执行时间、函数调用次数、内存使用情况等信息。这样可以帮助您优化代码，提升网页的性能。