test
This is a repo for testing basic javascript similar to codepen, but in a local dev environment, all in VS Code IDE.
Prerequisites
- Visual Studio Code
- Edge Web Browser
- Microsoft Edge Tools for VS Code (VS Code extension)
- Live Server (VS Code extension)
How to use
- Right click on
index.htmlandOpen with Live Server. - On the
Run and Debugtab of VS Code, selectLaunch Edge Headless and attach DevTools. - Add your javascript to
main.jsand save. See changes automatically reload (thanks to Live Server) in the browser and console pane.
Debugging
The debugging environment is already setup. In order to debug, add a debugger breakpoint in the gutter of the editor window of VS Code (appears as a red dot on left side of line numbers), and during runtime execution it should pause at that breakpoint. Remove the breakpoint by toggling off the red dot on the given line number.
Add'l configs
- Dock the debug toolbar
If the floating toolbar is not your cup of tea, open the VS Code settings from File > Settings > Features > Debug > Tool Bar Location and set this value to docked.
If you want additioanl debugger controls available to you in the status bar, check out this extension.
- Prevent browser from opening when starting Live Server
If you don't want the Edge Browser to open separately (since it's going to open an instance inside of VS Code anyway), go to File > Settings > Extensions > Live Server > Settings: No Browser and check the box. If checked it will start without browser opened.