There's an extension available for Google Chrome for Visual Studio Code that greatly helps when debugging SPFx projects. To start using the extension, first install it in VS Code:

1. Click on the EXTENSIONS pane in VS Code (or press Ctrl + Shift + X):

2. Search for Debugger for Chrome and click on Install. Remember to reload VS Code window by clicking on the reload button to load this new extension.
3. Now, we will need to introduce Chrome debugging for VS Code. Start by clicking on the debug icon on the left (or Ctrl + Shift + D):

4. Then, click on No Configurations and on Add configuration:

5. Select Chrome from the drop-down list.
6. This creates a new launch.json configuration file to parametrize the configuration for debugging with Chrome. Remove all contents in the file and replace it with following:

{ 
    "version": "0.2.0", 
    "configurations": [ 
        { 
            "name": "Local workbench", 
            "type": "chrome", 
            "request": "launch", 
            "url": "https://localhost:4321/temp/workbench.html", 
            "webRoot": "${workspaceRoot}", 
            "sourceMaps": true, 
            "sourceMapPathOverrides": { 
                "webpack:///../../../src/*": "${webRoot}/src/*", 
                "webpack:///../../../../src/*": "${webRoot}/src/*", 
                "webpack:///../../../../../src/*": "${webRoot}/src/*" 
            }, 
            "runtimeArgs": [ 
                "--remote-debugging-port=9222" 
            ] 
        } 
    ] 
}

7. The configuration adds a new parameter for Chrome, --remote-debugging-port, which in turn enables remote debugging in Chrome. With this configuration, we can run Chrome's own remote debugger in one instance and our code in another instance and see the debugging details within the remote debugger.

Once the configuration is done, you can try debugging your code using the following steps:

1. First, configure a new breakpoint in your code. You can choose any line of code for the breakpoint, such as something in the render() method of your web part. Press F9 to insert a breakpoint or click on the left side of the line number:

2. We'll now need to run the project within a local SharePoint Workbench but without a browser instance. When we start debugging, we will have a browser window, thus, the one that gulp serve normally executes is not needed. Run the following command:

gulp serve --nobrowser

3. Start debugging by pressing F5 in Visual Studio Code. This will now open a Chrome instance with remote debugger enabled and show the DEBUG window within VS Code.

4. Switch to the new browser window, and add the web part to the canvas.

>

5. Note how the breakpoint lights up in red now when the web part is added to the canvas.

6. Reload SharePoint Workbench by pressing Ctrl + R in your browser. The breakpoint is now caught, and VS Code allows you to perform traditional debugging against your code. The code execution within the browser is paused:

Properties of your code are now available for inspection in VS Code:

Call Stack is also visible to aid in debugging:

7. When you click on VARIABLES | Local | this: #document, you can immediately see a lot of interesting data about your running code:

Debugging with Chrome remote debugging in a locally hosted SharePoint Workbench is a good way to perform the majority of your troubleshooting and code debugging. It is, however, a good practice to also run your code against the hosted SharePoint Workbench in SharePoint Online. You can use the exact same approach, but you'll need to change the url property in the launch.json to point to https://{tenant}.sharepoint.com/_layouts/workbench.aspx.

As you'll typically need both, the Local workbench and Hosted workbench, for debugging, it's a good idea to add another configuration:

1. Open launch.json that you created earlier.
2. Add another configuration under the configurations node and name it Hosted workbench. Copy the configuration from the Local workbench configuration, but change the url to reflect SharePoint Online. Your configuration should now look like this:

{
  "version": "0.2.0",
  "configurations": [
  {
    "name": "Local workbench",
    "type": "chrome",
    "request": "launch",
    "url": "https://localhost:4321/temp/workbench.html",
    "webRoot": "${workspaceRoot}",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "webpack:///../../../src/*": "${webRoot}/src/*",
      "webpack:///../../../../src/*": "${webRoot}/src/*",
      "webpack:///../../../../../src/*": "${webRoot}/src/*"
    },
    "runtimeArgs": [
      "--remote-debugging-port=9222"
    ]
  },
  {
    "name": "Hosted workbench",
    "type": "chrome",
    "request": "launch",
    "url": "https://{tenant}.sharepoint.com/_layouts/workbench.aspx",
    "webRoot": "${workspaceRoot}",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "webpack:///../../../src/*": "${webRoot}/src/*",
      "webpack:///../../../../src/*": "${webRoot}/src/*",
      "webpack:///../../../../../src/*": "${webRoot}/src/*"
    },
    "runtimeArgs": [
      "--remote-debugging-port=9222"
    ]
  }
  ]
}

3. Verify that you now have two debug configurations, Local workbench and Hosted workbench, in the top drop-down list under VS Code DEBUG:

4. If you select Hosted workbench and initiate debugging by pressing F5 in VS Code, a new browser session opens and navigates you directly to SharePoint Online's Hosted workbench.