News

VS Code Gets New JavaScript Debugger

• By David Ramel
• July 15, 2020

Microsoft's monthly update to its wildly popular open source, cross-platform Visual Studio Code editor has a new JavaScript debugger.

Working with Node.js and Chrome, the debugger that has been in the works for months is now the default option in the June 2020 update, or VS Code 1.47.

Features and functionality for the debugger as listed on its GitHub site include:

• Debug child process and workers
• Debug Node.js processes in the terminal
• Profiling support
• Easy npm script debugging
• Automatic browser debugging
• Instrumentation breakpoints
• Better autocompletion in debug console
• Return value interception
• Top-Level await
• Pretty-print minified sources
• Support for Microsoft Edge and WebView2
• Better sourcemap and breakpoint behavior
• Copy values in call stack view

Also, this week's post announcing VS Code 1.47 lists:

• Single file debugging: This provides functionality found in other debug extensions, with new icons in the title area indicating debugging can be kicked off with a button click.



• Less cluttered CALL STACK view: This is achieved by hiding debug session nodes that exist for technical reasons, but do not provide much value to users.
• New command alias Set Next Statement for Jump to Cursor: To make the command Jump to Cursor more discoverable for users coming from Visual Studio, the dev team added the command alias Set Next Statement.
• Breakpoint Path on Hover: In the BREAKPOINTS view, hovering over a source breakpoint shows its absolute path.

Besides all that JavaScript debugging goodness, the June 2020 release of VS Code sees:

• Accessibility improvements -- New screen reader capabilities: "Screen readers can now update the cursor offset in the editor. As a result, the screen reader 'Say All' command should work better when stopped and resumed."
• Windows ARM builds -- Windows on ARM is now available in stable: This is pretty self-explanatory, and you can read more about it this GitHub issue and this Reddit conversation.
• Source Control unified view -- All repositories displayed in a single view: Developers can now get a better overview of the entire workspace status. Also, devs can now move the Source Control view to the panel and move other views to the Source Control view container.

  

• View and sort pending changes -- View files as a tree or list, sort by name, path, or status: Developers can sort changes in the source control view by name, path (default), and state with the list view option. The view options (list vs. tree) and sort options are consolidated into a new View & Sort menu item available in the context menu.
• Edit complex settings -- Edit object settings from the Settings editor: "Before, the Settings editor could only be used to edit the settings of primitive types, like strings and booleans, and you needed to edit settings.json directly for more complicated settings types. Now, you can edit non-nested object settings from the Settings editor. Extension authors can use this functionality to increase the visibility of these kinds of settings."
• New HexEditor extension -- Edit files in hexadecimal format from within VS Code: This functionality, providing for native hexadecimal editing in the editor, sees continued improvement including the ability to undo, redo, edit existing hex cells, add new cells to the end of the document), and large file optimization such that developers can now open files larger than 18 MB.
• Notebook UI updates -- Improved UX and undo/redo support: Still in preview, a GitHub Issue Notebooks extension helps developers search GitHub issues and pull requests.
• Remote Development tutorials -- Learn to develop over SSH, inside Containers, and in WSL: Specifically, these are:
  • Working over SSH
  • Developing inside Containers
  • Using Windows Subsystem for Linux

  Other Remote Development functionality includes:

  • Remote -- SSH: Remote server can listen on a socket instead of a port.
  • Remote -- Containers: Prompt to open repository in a volume.
  • Remote -- Containers and WSL: More details are available in this WSL 2 blog post.
• Java Pack Installer for macOS -- This sets developers up to develop in Java with VS Code on macOS: A new Visual Studio Code for Java Pack Installer (note: clicking on link may initiate download) automates the acquisition of dependencies and extensions for Java development on macOS. This was announced in last month's update to Java on Visual Studio Code.

All of the above and more is presented in greater detail in the announcement post.