Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyTo debug a Svelte app in VSCode, you need to set up a launch.json file with the correct configuration. Here's a step-by-step guide:
1. First, make sure you have the Debugger for Chrome extension installed in your VSCode. If not, you can install it from the VSCode marketplace.
2. In your VSCode, go to the Run view (Ctrl+Shift+D) and click on "create a launch.json file" link. This will open a dropdown asking for the environment, select "Chrome: Launch".
3. This will create a launch.json file in your .vscode directory with a default configuration. You need to modify this configuration to match your Svelte app settings.
Here's an example of how your launch.json file should look like:
In this configuration:
- "type" is set to "chrome" which means we are debugging in Chrome.
- "request" is set to "launch" which means we are launching a new Chrome instance for debugging.
- "name" is just a name for the configuration.
- "url" is set to "http://localhost:5000" which is the default URL for Svelte apps. If your app is running on a different port, you need to change this.
- "webRoot" is set to "${workspaceFolder}" which is the root directory of your project.
4. Now, start your Svelte app by running npm run dev in your terminal.
5. Go back to the Run view in VSCode, select the configuration you just created from the dropdown at the top, and press F5 or click on the green play button to start debugging.
Remember to set breakpoints in your code where you want the execution to pause. You can do this by clicking in the gutter to the left of the line numbers in your code files.
This setup should allow you to debug your Svelte app in VSCode with source maps.
Debugging Svelte app in VSCode with launch.json and sourceMaps?
I’m new to Svelte and I’ve learned that it compiles all components into a single bundle.jslaunch.json
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyTo debug a Svelte app in VSCode, you need to set up a launch.json file with the correct configuration. Here's a step-by-step guide:1. First, make sure you have the Debugger for Chrome extension installed in your VSCode. If not, you can install it from the VSCode marketplace.
2. In your VSCode, go to the Run view (Ctrl+Shift+D) and click on "create a launch.json file" link. This will open a dropdown asking for the environment, select "Chrome: Launch".
3. This will create a launch.json file in your .vscode directory with a default configuration. You need to modify this configuration to match your Svelte app settings.
Here's an example of how your launch.json file should look like:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}"
}
]
}
In this configuration:
- "type" is set to "chrome" which means we are debugging in Chrome.
- "request" is set to "launch" which means we are launching a new Chrome instance for debugging.
- "name" is just a name for the configuration.
- "url" is set to "http://localhost:5000" which is the default URL for Svelte apps. If your app is running on a different port, you need to change this.
- "webRoot" is set to "${workspaceFolder}" which is the root directory of your project.
4. Now, start your Svelte app by running npm run dev in your terminal.
5. Go back to the Run view in VSCode, select the configuration you just created from the dropdown at the top, and press F5 or click on the green play button to start debugging.
Remember to set breakpoints in your code where you want the execution to pause. You can do this by clicking in the gutter to the left of the line numbers in your code files.
This setup should allow you to debug your Svelte app in VSCode with source maps.