如何在Visual Studio Code中为Chrome扩展程序设置调试器

by Victor A. Requena

由Victor A.Requena

Debugging your web applications with Visual Studio Code makes you more efficient. It helps you save a lot of time and keeps your code cleaner. This is because you don’t have to write a bunch of console.logs and you can go through your code execution line by line. But if you’re here, you probably know the benefits of debugging web applications. So let’s begin…

使用Visual Studio Code调试Web应用程序可以提高效率。 它可以帮助您节省大量时间，并使代码更整洁。 这是因为您不必编写一堆console.log并且可以逐行执行代码执行。 但是，如果您在这里，您可能会知道调试Web应用程序的好处。 因此，让我们开始...

设定 (Getting set up)

The first thing you need to do is install the Debugger for Chrome extension. After you’ve installed it, you’re almost ready to go. The next thing you need to do is create a launch file for the Visual Studio Code Debugger. This file contains the debugger’s different configurations for your project.

您需要做的第一件事是安装Debugger for Chrome扩展程序 。 安装后，您几乎可以使用了。 接下来需要做的是为Visual Studio Code Debugger创建启动文件。 该文件包含调试器针对项目的不同配置。

You can create the launch file by going to the debug section in the Activity Bar and clicking the gear icon.

您可以通过转到活动栏中的调试部分并单击齿轮图标来创建启动文件。

A list of options will prompt you to select the “Chrome” one.

选项列表将提示您选择“ Chrome”。

After you’ve done this, you’re going to have a .vscode directory with a launch.json file.

完成此操作后，您将拥有一个带有launch.json文件的.vscode目录。

构型 (Configurations)

There are two kinds of Chrome debugging configurations: launch and attach. You can set this in the request option inside every configuration object.

Chrome有两种调试配置： launch和attach 。 您可以在每个配置对象内的request选项中进行设置。

发射 (Launch)

The launch configuration launches a Chrome instance running a specified file or URL. If you specify a URL, you have to set webRoot to the directory that files are served from. This can be either an absolute path or a path using the ${workspaceFolder} resolver. This is the folder opened in your Visual Studio Code workspace.

启动配置将启动运行指定文件或URL的Chrome实例。 如果指定URL，则必须将webRoot设置为提供文件的目录。 这可以是绝对路径，也可以是使用${workspaceFolder}解析器的路径。 这是在Visual Studio Code工作区中打开的文件夹。

Note: Be careful while setting webRoot, this is used to resolve URLs to a file on your computer.

注意：设置webRoot要小心，这用于将URL解析到计算机上的文件。

You can see an example of two launch configurations: One launching against a local server and the other launching against a local file.

您可以看到两种launch配置的示例：一种针对本地服务器启动，另一种针对本地文件启动。

If you have a Chrome instance running, the one launched by the debugger will use a temporary session. This means that you won’t have your extensions or opened tabs. If you want to launch a Chrome instance with your user and extensions, you have to close every running instance first.

如果您正在运行Chrome实例，则调试器启动的实例将使用一个临时会话。 这意味着您将没有扩展名或打开的选项卡。 如果要使用用户和扩展程序启动Chrome实例，则必须先关闭每个正在运行的实例。

Note: When you stop the debugger, this will close the Chrome window.

注意：停止调试器时，将关闭Chrome窗口。

连接 (Attach)

I personally prefer using this one… This configuration attaches the debugger to a running instance of Chrome. But in order for this option to work, you need to launch Chrome with remote debugging enabled. Launching a Chrome instance with remote debugging varies depending on your OS.

我个人更喜欢使用该配置文件…此配置将调试器附加到正在运行的Chrome实例上。 但是，为了使此选项起作用，您需要在启用了远程调试的情况下启动Chrome。 通过远程调试启动Chrome实例的操作因操作系统而异。

视窗 (Windows)

There are two ways to launch Chrome with remote debugging in Windows. The simplest one is to right-click on the Google Chrome shortcut. Select the properties option and append the following command in the target field.

在Windows中，有两种方法可以通过远程调试来启动Chrome。 最简单的方法是右键单击Google Chrome浏览器快捷方式。 选择属性选项，然后在目标字段中附加以下命令。

--remote-debugging-port=9222

Note: This will launch Chrome with remote debugging enabled every time you click on the shortcut.

注意：每次您单击快捷方式时，这将启动Chrome，并启用远程调试。

The other way is to open the command prompt and execute this command replacing the <chrome_path> with the actual location of your Chrome installation.

另一种方法是打开命令提示符并执行此命令，将<chrome_pa th>替换为您的Chrome安装的实际位置。

<chrome_path>\chrome.exe --remote-debugging-port=9222

苹果系统 (macOS)

Open the terminal and execute the following command:

打开终端并执行以下命令：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

的Linux (Linux)

Launch your terminal and run this command:

启动您的终端并运行以下命令：

google-chrome --remote-debugging-port=9222

What this does — no matter what OS — is open Chrome with a flag, in this case: --remote-debugging-port, and sets it to 9222. You can read more about this here.

无论使用什么操作系统，它的作用都是打开带有标志的Chrome，在这种情况下，该标志是--remote-debugging-port并将其设置为9222 。 您可以在此处了解更多信息。

Note: If you have other Chrome instances running with no remote debugging, make sure to close them before launching a new one.

注意：如果您运行的其他Chrome实例没有进行远程调试，请确保在启动新的Chrome实例之前将其关闭。

Here’s a sample attach configuration.

这是一个示例attach配置。

Note: If you do not set the "url" option, a list will be prompted with your open tabs.

注意：如果您未设置"url"选项，则打开的选项卡将提示一个列表。

This extension have a lot of very useful options that you can use to adapt the configurations to your project. You can read the documentation of some of them here.

此扩展程序有许多非常有用的选项，可用于使配置适应项目。 您可以在此处阅读其中一些文档。

摘要 (Summary)

Congratulations! You’ve learned how to install and set up the debugger for Chrome in Visual Studio Code. You also learned how to launch Google Chrome with remote debugging enabled. Now it’s time for you to explore and expand your new knowledge… I highly recommend you to take a look at the extension’s repository.

恭喜你！ 您已经了解了如何在Visual Studio Code中安装和设置Chrome调试器。 您还学习了如何在启用远程调试的情况下启动Google Chrome。 现在是时候探索和扩展您的新知识了……我强烈建议您看一下扩展的存储库 。

I hope you enjoyed this post. You can find me on Twitter @_svictoreq. ?

希望您喜欢这篇文章。 您可以在Twitter @_svictoreq上找到我。 ？

翻译自: https://www.freecodecamp.org/news/how-to-set-up-the-debugger-for-chrome-extension-in-visual-studio-code-c0b3e5937c01/