在Visual Studio Code中调试创建React App应用程序

Z时代
2024-01-10
分类：综合

react

In this post, we are going to create an Create React App application, then add configuration to debug it in Visual Studio Code.

在本文中，我们将创建一个Create React App应用程序，然后添加配置以在Visual Studio Code中对其进行调试。

Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for only $10!
查看“ 学习Visual Studio Code” ，仅需10美元，即可了解有关Web开发中最热的编辑器所需的所有知识！

TLDR - For an Create React App application, install the Debugger for Chrome extension, create a debug configuration in VS Code, and then run in debug mode.
TLDR-对于Create React App应用程序，请安装Debugger for Chrome扩展程序，在VS Code中创建调试配置，然后在调试模式下运行。

学习VS代码 (Learn VS Code)

If you're interested in learning more about VS Code, you definitely want to check out the upcoming Learn VS Code course.
如果您有兴趣了解有关VS Code的更多信息，那么您一定要查看即将推出的“ 学习VS Code”课程。

创建一个入门项目 (
Creating a Starter Project
)

To be able to test an Create React App application, you need an Create React App application :) I'll provide the basic steps, but for more reference on how to get started look at the Create React App page.

为了能够测试Create React App应用程序，您需要一个Create React App应用程序：）我将提供基本步骤，但是有关如何入门的更多参考，请参阅Create React App页面。

First, you'll need to install the Create React App.

首先，您需要安装Create React App。

npm install -g create-react-app

After that finishes, you'll need to actually generate your new application. This will take a bit as it needs to install LOTS of NPM packages.

完成之后，您将需要实际生成新的应用程序。这将需要一些时间，因为它需要安装NPM软件包的LOTS。

create-react-app my-app

Open the project in VS Code and you should see the following.

在VS Code中打开项目，您应该看到以下内容。

Now, that you've got your new fancy React app, go ahead and run it to make sure everything looks right.

现在，您已经有了新的精美React应用程序，继续运行它以确保一切正常。

npm start

Should look like this.

应该看起来像这样。

创建调试配置 (
Creating Debug Configuration
)

Assuming you've made it this far, we are ready to start debugging! Before we do, however, it's worth understanding how configuring debugging in VS Code works. Basically debug configurations are saved in a launch.json file which is stored inside of a .vscode folder. This .vscode folder is used to store different configurations for Code including our required debugging stuff.

假设您已经做到了这一点，我们就可以开始调试了！但是，在进行此操作之前，有必要了解VS Code中配置调试的工作方式。基本上，调试配置保存在启动中 。存放在中的json文件。 vscode文件夹。这个。 vscode文件夹用于存储Code的不同配置，包括我们所需的调试内容。

Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the extension tab in VS Code. After installing, reload VS Code.

在创建调试配置之前，您需要安装Debugger for Chrome扩展程序。从VS Code的扩展选项卡中找到并安装此扩展。安装后，重新加载VS Code。

Now, to create a debug configuration, you can open the debug panel (the bug looking button on the left panel). At the top of the debug panel, you should see a dropdown that says "No Configurations".

现在，要创建调试配置，您可以打开调试面板（左侧面板上的bug查找按钮）。在调试面板的顶部，您应该看到一个下拉菜单，显示“无配置”。

To the right of that dropdown, there is a gear icon. Click this button to have VS Code automatically generate that .vscode folder and launch.json file mentioned above.

在该下拉菜单的右侧，有一个齿轮图标。单击此按钮.vscode VS Code自动生成上述的.vscode文件夹和launch.json文件。

Then choose Chrome.

然后选择Chrome。

You should get the following configuration created for you.

您应该为您创建以下配置。

The only thing we need to do is update the port from 8080 to 3000.

我们唯一需要做的就是将端口从8080更新到3000。

让我们调试 (
Let's Debug
)

Now we're ready! Go ahead and click the play button at the top of the Debug panel which will launch an instance of Chrome in debug mode. Keep in mind your app should already be running from using ng serve earlier. In VS Code, you should see the Debug toolbar pop up.

现在我们准备好了！继续并单击“调试”面板顶部的播放按钮，这将在调试模式下启动Chrome实例。请记住，您的应用程序应该早已通过使用ng serve来运行。在VS Code中，应该会看到“调试”工具栏弹出。

With this up and running, you can set a breakpoint in your App.js. Open up your App.js and add a breakpoint inside of the render function by clicking in the gutter (to the left of the line numbers). Should look like this.

在此过程中，您可以在App.js中设置一个断点。打开App.js，并通过单击装订线（在行号左侧）在渲染函数内部添加断点。应该看起来像这样。

Now, refresh debugging by clicking the refresh button on the debugging toolbar. This should open your application again and trigger this breakpoin. You should be directed back to VS Code directly to the place where you set your breakpoint.

现在，通过单击调试工具栏上的刷新按钮来刷新调试。这将再次打开您的应用程序并触发此断点。您应该直接回到VS Code，直接回到设置断点的位置。

From here, you can set more breakpoints, inspect variables, etc. If you are interested in learning more about debugging JavaScript in general in either Chrome or VS Code you can check out Debugging JavaScript in Chrome and Visual Studio Code.

从这里，您可以设置更多的断点，检查变量等。如果您想了解有关在Chrome或VS Code中调试JavaScript的更多信息，可以在Chrome和Visual Studio Code中查看Debugging JavaScript 。

Again, if you're interested in learning more about VS Code, you'll definitely want to check out the upcoming Learn VS Code course.

同样，如果您有兴趣学习有关VS Code的更多信息，那么您肯定会想了解即将举行的Learn VS Code课程。

If you have any follow up questions or comments, leave one below of find me on twitter @jamesqquick.

如果您有任何后续问题或意见，请在twitter @jamesqquick上留下以下“找到我”的内容。

For video content, check out my YouTube Channel

有关视频内容，请访问我的YouTube频道