使用webstorm进行javascript的Debug调试功能

以下是详细讲解使用WebStorm进行JavaScript Debug调试功能的完整攻略：

约定

在本攻略中，我们使用WebStorm Version 2020.3.2，并假设你已经安装和配置好了WebStorm IDE。同时，我们使用以下的JavaScript代码示例：

function sum(a, b) {
    return a + b;
}

console.log(sum(1, 2));

步骤1：在WebStorm中打开项目

首先，在WebStorm中打开你的JavaScript项目。如果你没有现成的项目，也可以创建一个新的JavaScript项目。这个过程比较简单，在菜单栏中选择"File" -> "New" -> "Project"。

步骤2：创建Debug Configuration

接下来，我们需要创建一个Debug Configuration，以确定调试的环境和方式。

1. 在菜单栏中选择"Run" -> "Edit Configurations"。
2. 在窗口左下方的"Add New Configuration"按钮（加号图标）中选择JavaScript。这会创建一个新的Debug Configuration。
3. 输入一个名称，如"Debug JavaScript"。
4. 在"JavaScript file"字段中，选择要进行调试的JavaScript文件。在这个例子中，我们选择上面提到的示例代码。

步骤3：设置断点

接下来，我们需要设置断点以便在调试过程中暂停执行。

在编辑器中打开JavaScript文件，并在行号的左侧单击，以创建一个断点。在这个例子中，我们将断点设置在函数的第一行。

步骤4：运行调试

现在我们已经设置好了Debug Configuration和断点。让我们运行调试并开始检查我们的程序。

1. 在菜单栏中选择"Run" -> "Debug JavaScript"，或者使用快捷键Shift + F9。
2. 当程序运行到设置的断点时，调试会自动暂停执行。此时可以使用WebStorm中的各种调试方式。我们来看看这里的几个例子。

示例1：触发条件断点

在调试过程中，我们可以设置断点做更多的事情，例如，我们可以设置触发条件。通过触发条件，我们指的是只有当某些特定条件满足时才会触发断点。

1. 在函数中添加一个新的断点，然后右键单击该断点，并选择"Edit breakpoint"。
2. 在弹出的窗口中选择"Condition"。
3. 在下拉框中选择"JavaScript"。
4. 在文本框中输入条件a === 1。
5. 点击"OK"。

现在，当执行到断点时，只有当变量"a"的值为1时，调试器才会暂停。

示例2：监视表达式

在调试时，有时候我们需要查看已经定义的表达式的值。WebStorm允许我们通过监视表达式来随时查看表达式的值。

1. 在运行调试时，在调试控制台打开监视表达式窗口。可以通过在工具栏上点击"Add expression"按钮来打开表达式窗口。
2. 在表达式窗口中输入a。
3. 在表达式窗口下面的搜索框中输入"sum"来找到函数的调用，然后点击该函数调用旁边的箭头，以查看变量"a"的值。

现在你已经知道了如何使用WebStorm进行JavaScript Debug调试。尝试使用上述步骤和示例来进行你的下一个调试过程吧！