/    Sign up×
Bounties /Pin to ProfileBookmark

Debugging Svelte app in VSCode with launch.json and sourceMaps?

+ 3,000
Copy linkTweet thisAlerts:
Sep 18.2023

I’m new to Svelte and I’ve learned that it compiles all components into a single bundle.js file. I want to use launch.json in VSCode for debugging. Is sourceMaps a viable option to make this process more effective?  

to post a answer
DebuggingSvelte

1 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.

Was this helpful?

×

Success!

Help @cosmic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 2.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,

tipper: @neststayhome,
tipped: article
amount: 1000 SATS,
)...