Friday, March 29

Author: James Quick

Web Tricks

Debugging Node Code in VS Code

Visual Studio Code has an amazing amount of functionality built in, including support for debugging applications. Although the functionality is there, it took me several tries to figure out how to get things configured to debug Node applications. It became even more tricky when using Nodemon, so I figured it was worth it to share the various configurations I've learned. This article will not dive deep into inspecting variables, call stack, etc. but will focus more on the actual configurations. If you are looking for an article more focused on applied debuggging concepts, check out Debugging JavaScript in Chrome and Visual Studio Code. Watch on YouTube TLDR - Debugging Node in Visual Studio Code Download Debugger for Chrome extension Create Debug configuration from one of the 4 below Launc...
Web Tricks

Debugging JavaScript in Google Chrome and Visual Studio Code

Learning to debug is an essential skill for taking the next step as a developer. It's important to understand and leverage the vast array of tools that exist for a given languge. Unfortunately, debugging might not seem as obvious when working with JavaScript outside of a full-fledged IDE. At least not initially. Let's take a look at getting started debugging JavaScript in the Google Chrome Dev Tools as well as my favorite text editor for Web Development, Visual Studio Code. Watch on YouTube https://youtu.be/AX7uybwukkk TLDR - Debugging JavaScript in Chrome? Open the 'Sources' tab Inspect code Set breakpoints, inspect variables, etc. TLDR - Debugging JavaScript in Visual Studio Code? Download the Debugger for Chrome extension Create Debug configuration Launch Debug configuration Set breakpo...
Web Tricks

Getting Started with Live Coding in Visual Studio Code w/ Live Share

  Live Share for Visual Studio Code is HOT OFF THE PRESS and publically available as of May 7th 2018! What? You've been living under a rock and haven't heard of it? Don't worry, let me fill you in. Live Share is an extension for VS Code that enables real-time collaboration between developers. Live Share is an extension for VS Code that enables real-time collaboration between developers. As you'll see in a second, you'll have the ability to share a "session" with someone else, allowing them to edit code as well as share a sever and debugging session. I've seen real-time collaboration in action with Cloud 9 before, but to have this now be a part of my favorite text editor is extremely exciting! So, let's go ahead and take a look at how it works. TLDR: How do I set up Live Share in 4...