浏览器控制台调试_在vs代码中配置强大的浏览器控制台调试

浏览器控制台调试

Curious how to configure VS Code to launch Brave Browser for console debugging?

好奇如何配置VS Code以启动Brave Browser进行控制台调试？

Just follow these quick and easy steps:

只需按照以下快速简单的步骤进行操作：

1. Download the Brave Browser. If you don’t have it already.

   下载勇敢的浏览器。 如果您还没有的话。

2. Locate the path to your Brave Browser runtime executable.

   找到您的Brave Browser运行时可执行文件的路径。

   In my case (a MacOS user), it was:

   就我而言(MacOS用户)，它是：

   ‘/Applications/Brave Browser.app/Contents/MacOS/Brave Browser’

   '/ Applications / Brave Browser.app/Contents/MacOS/Brave Browser'

3. Launch the VS Code Debugger.
   启动VS代码调试器。

4. Edit your launch.json file, by clicking the Gear icon in the Debugger.

4.单击Debugger中的Gear图标，编辑launch.json文件。

5. Update your launch.json file.

5.更新您的launch.json文件。

Before: launch.json 之前：launch.json

Edit your launch.json configuration to include the bold changes below, using the path you found in Step 2 as your runtimeExecutable.

使用您在步骤2中找到的路径作为runtimeExecutable ，编辑launch.json配置以包括以下粗体更改。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {"type": "chrome",
      "request": "launch",
      "name": "Launch Brave against localhost",
      "url": "http://localhost:3200","userDataDir": true,
      "webRoot": "${workspaceFolder}","runtimeExecutable": "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
    }
  ]
}

After: launch.json 之后：launch.json

6. Once saved, you’ll see the updated name in the Launch widget. To run the debugger, just click the green Play icon.

6.保存后，您将在启动小部件中看到更新的名称。 要运行调试器，只需单击绿色的播放图标。

With these quick and easy steps, you’ll be debugging with Brave Browser and VS Code in no time!

通过这些快速，简单的步骤，您将立即使用Brave Browser和VS Code进行调试！

翻译自: https://medium.com/@juxton/configure-brave-browser-console-debugging-in-vs-code-f4326d671637

浏览器控制台调试