Make Tauri front-end debugging as smooth as debugging regular web projects

## Assumptions

1. This article assumes that you have front-end development experience and experience using VS Code.

2. This article assumes that you have experience in developing and creating Tauri projects.

3. This article will not teach you how to develop, use and avoid pits from scratch.

4. **This article is for development under Windows. **

## Rust side debugging

Regarding debugging on the Rust side, the official documentation also has a more detailed tutorial, but I won’t talk about it here. For details, please see [Debugging in VS Code](https://ift.tt/0IRTrtD “Debugging in VS Code”).

## Web-side debugging

The official document introduces the use of the dev tool that comes with webview to debug the front-end code. In 2022, this is simply a caveman-like approach. Why do you say this? Here are a few things:

1. It is impossible to write code and debug breakpoints in one window. You have to check the problems with breakpoints in the dev tool, and then change the code in VS Code.

2. It is impossible to get complete code tracking, code references and other information.

So how can we make debugging the Tauri front-end as smooth as debugging a regular web project?

### 1. Use dev server

There is nothing to say about this. The difference between tauri and the regular web is that there is an additional set of tauri api. How to open the dev server in the regular web, how to open the tauri web part.

### 2. Modify devPath

Modify the following configuration to the address of your dev server:

`src-tauri/tauri.conf.json`

“`json

{

“build”: {

“devPath”: “DEV_SERVER_URL”

}

}

“`

### 3. Enable Remote Debugging

Add the following environment variables and change `12345` to any available port you want:

`WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` = `–remote-debugging-port=12345`

### 4. Start Tauri App

### 5. Configure Launch Task

VS Code adds the following Launch Task

“`

{

“type”: “msedge”,

“request”: “attach”,

“name”: “Attach to tauri webview”,

“port”: 12345,

“webRoot”: “${workspaceFolder}”,

“sourceMaps”: true

}

“`

### 6. `F5` to start debugging