KINTO Tech Blog
Development

Debugging my React project with VS Code

Cover Image for Debugging my React project with VS Code

Introduction

Hello, I am Ki-yuno, in charge of front-end development for KINTO FACTORY.

In this article, I would like to outline the process of setting up a debugging environment for React projects in Visual Studio Code (hereafter referred to as VS Code).
I have only used VS Code as super notepad, so I struggled with it quite a bit (mainly due to the language barrier).

For those of you who are about to build a debugging environment in VS Code,
feel free to explore beyond the challenges I faced. Good luck!

Environment Information

OS       : macOS Sonoma 14.1.2
VS Code  : ver1.85.1
Node.js  : 18.15.0
terminal : zsh

Development Procedure

1. Setup launch.json

Add launch.json to build a debugger launch configuration.

Select the "Run and Debug" in the left side menu of VS Code.
Clicking "Create a launch.json file" after making your selection will create a launch.json file in your project.

Creating a launch.json file
Creating a launch.json file

Immediately after creation, a default launch configuration is added to launch.json.

Auto-generated file
A default launch configuration has been added immediately after auto-generation

2. Add a New Launch Configuration

Add a debugger launch configuration to the launch.json you just added.
The launch configuration to be added is as follows:

launch.json
{
    "name": "[localhost]Chromedebug",
    "type": "node-terminal",
    "request": "launch",
    "command": "npm run dev",
    "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
    },
    "sourceMaps":true,
    "trace": true,
    "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/src/*"
    }
}

The edited launch.json will look like the image below.
I deleted the default launch configuration, but there is no problem to leave it as is.

You can also edit the command property if you want to change the command at startup, or add tasks with the preLaunchTask property if you want to run multiple commands when debugging (I'll not go into details about this this time).

Edited launch.json
name The property value will be the name of the launch configuration

3. Start Debugging

All you have to do is press F5 and the debugger will start.

When the debugger is started in VS Code
When the debugger is started successfully, a debugging button will appear at the top center.

You can use the debugging button at the top center or the F key to execute actions such as step in, step over, etc.

When in Trouble

Here are the specific challenges that I encountered.
I hope this helps those who have run into similar issues.

◽ The debugging terminal displays ‘sh-3.2$’, and upon execution, it returns ‘npm command not found’

Restarting VS Code solves this problem.
Apparently this occurs when Microsoft auto-launches VS Code.
In my environment, I log into Microsoft 365 when my PC starts, and I encountered this problem when VS Code auto-launched upon login.

◽ Despite npm being installed, it continues to return 'npm command not found' even when debugging starts

Add the following to the .vscode/settings.json file.
If you have not created the file itself, please do so first.

settings.json
{
  // npm scripts Path setting for executing commands
  "terminal.integrated.profiles.osx": {
    "zsh": {
      "path": "/bin/zsh",
      "args": ["-l", "-i"]
    }
  }
}

This enables the path to pass through to the debugger's execution terminal so that npm commands can be executed.

Summary

In this article, I summarized how to build an environment for debugging React projects in VS Code.
I think we can still play around more make our VS Code workflow more efficient, so I hope next time we can further improve it with tasks.json.

In my opinion, being able to debug during development significantly increases QOL (quality of life) and boosts development productivity.

As an additional effect, this could contribute to a more positive atmosphere in the office and increased the level of happiness during commuting... maybe?
Best wishes for your debugging life.

Thank you for reading!

Lastly, KINTO FACTORY, where I belong, is looking for people to work with. If you are interested, please check out the job openings below!

Facebook

関連記事 | Related Posts

Torii⛩
Torii⛩
Cover Image for Creating a Development Environment Using VS Code's Dev Container

Creating a Development Environment Using VS Code's Dev Container

Torii⛩
Torii⛩
Cover Image for VSCode Dev Containerを使った開発環境構築

VSCode Dev Containerを使った開発環境構築

Torii⛩
Torii⛩
Cover Image for [Sequel! Dev Container] Creating a cloud development environment with GitHub Codespaces

[Sequel! Dev Container] Creating a cloud development environment with GitHub Codespaces

Rino Nakagawara
Rino Nakagawara
Cover Image for コードレビューがちょっと楽になる(かもしれない)話

コードレビューがちょっと楽になる(かもしれない)話

Torii⛩
Torii⛩
Cover Image for [続!Dev Container] GitHub Codespacesでクラウド開発環境を構築

[続!Dev Container] GitHub Codespacesでクラウド開発環境を構築

Cover Image for Vuetify と NuxtJS を使用した言語サポート

Vuetify と NuxtJS を使用した言語サポート

We are hiring!

【フロントエンドエンジニア】新車サブスク開発G/東京

新車サブスク開発グループについてTOYOTAのクルマのサブスクリプションサービスである『 KINTO ONE 』のWebサイトの開発、運用をしています。​業務内容トヨタグループの金融、モビリティサービスの内製開発組織である同社にて、自社サービスである、TOYOTAのクルマのサブスクリプションサービス『KINTO ONE』のWebサイトの開発、運用を行っていただきます。

【フロントエンドエンジニア(コンテンツ開発)】新車サブスク開発G/東京

新車サブスク開発グループについてTOYOTAのクルマのサブスクリプションサービスである『 KINTO ONE 』のWebサイトの開発、運用をしています。​業務内容トヨタグループの金融、モビリティサービスの内製開発組織である同社にて、自社サービスである、TOYOTAのクルマのサブスクリプションサービス『KINTO ONE』のWebサイトの開発、運用を行っていただきます。