Configuration of F5 for Svelte in VS Code-CodePudding

I have

Installed node.js with digit
Installed Visual Studio Code with Svelte plugin
Created and run a basic app successfully.

Having made a change to the app (in App.svelte file) how do I compile and run the app from within VS Code? Ideally

in debug mode
from pressing F5

CodePudding user response：

You need a launch config: Run and Debug > Select Chrome as environment.

Make sure to npm run dev from the VS Code terminal.

You can use the @debug in your .svelte files to trigger debugger.

And debugger in your JavaScript or TypeScript.

Hit debugger Play button.

CodePudding user response：

Installation

Install node.js with digit

Installed Visual Studio Code with Svelte plugin

Once per editing session

(Not every time the app is run following a code change)

Start server with Svelte compiler. From VS Code terminal run npm run dev

More installation on first time

Note the port from localhost url in text that appears in the terminal window

In the editor (VS Code)

Run
Add Configuration
Chrome: Launch

In the configuration just added to file .vscode/launch.json" change the port of the url to the port noted from the terminal window.

Run the app

F5 or use Run and Debug from tool bar at left side of VS Code.

A browser instance should open with the app in it.

Set breakpoint and debug

In the browser (Chrome for me) right click and choose Inspect. Within the Inspect window the code, including the original Svelte code which would not get to the browser in a production environment, is available and a breakpoints can be set.

When a breakpoint triggers the source code unit opens as an new read-only tab in the VS Code editor. Debugging can now continue in either the browser or editor.

Refresh following a change

A debug control bar appears over the tabs in the editor. Providing the browser has not been closed clicking the green circular arrow in this control bar refreshes the application in the browser.