Control Add-ins Supercharged: Debugging with source maps

So far I’ve shown how to configure gulp to help you with some basic JavaScript development tasks, such as bundling and minifying, and how to automate builds on every source file change. Let’s now take it to an entirely new level: debugging.

If you ever tried to debug your control add-in source code using Visual Studio Code, you might have realized two things: first, that it’s actually pretty simple to do; and second, that it’s not the kind of debugging that you want.

Let’s see why that is.

First, using VS Code with a browser such as Chrome, Edge (especially “Canary”, mmmm) or Firefox is easy. There are debugging extensions built for that purpose that allow you to either launch a browser with VS Code attached as a debugger, or to attach VS Code to a running instance of a browser (some browser configuration needed beforehand). However, when you use VS Code as a debugger like this, it’s hardly more than a glorified browser built-in developer tool – the only benefit of using VS Code is that, well, you are in VS Code, rather than inside the browser. However, you are not really debugging your source files – you are debugging scripts currently loaded in the browser. You can’t set debug breakpoints in your source files – you can only set them in copies of files that are loaded by the browser. If you catch a bug (kind of a point with a debugger) you can’t stop the process and immediately change the line where the bug is, but you have to first locate the matching source script, and then the offending line, and then fix it there. Not exactly a fun pastime.

And that’s annoying enough if you have a single script to work with, but if you have several scripts, bundled together, then minified, well, good luck with that. Debugging minified code is as close as you can get to inquisition-level torture in this century.

So, let’s fix this mess, and let’s enable debugging as it should be – let’s enable debugging of actual source files with full breakpoint integration and all.

That’s what my next branch is about. In it, I introduce source maps and how you can use gulp to build them. And then I explain how you can configure your VS Code to debug your source files.

So, head over to https://github.com/vjekob/supercharged_01/tree/06-gulp-debug and check out some pretty cool stuff.

Vjeko

Vjeko has been writing code for living since 1995, and he has shared his knowledge and experience in presentations, articles, blogs, and elsewhere since 2002. Hopelessly curious, passionate about technology, avid language learner no matter human or computer.

This Post Has 2 Comments

  1. Richard

    Good afternoon, I congratulate you on your blog. I am a Systems Engineer but I have never practiced. I am writing to you since I would like to learn NAV. Because a friend who lives abroad told me that there is a lot of demand for NAV programmers and I would appreciate it if you read. I am already reading Development Environment NAV 2013 and Implementing NAV 2013. Although I think that information is old it can at least help me. If you could guide me I would greatly appreciate it. I live in Venezuela and there are some limitations to download on the internet, including the Bussines Center. I would greatly appreciate your help.
    Regards.

    1. Vjeko

      Thanks for finding my blog useful! I am not sure what kind of help you want from me. I provide my blog as-is, and if what you find here helps you in any way, I am glad it does. Also, if you can’t find the info you need here, I am sorry that you can’t, but beyond writing about topics that I cover here, I can’t provide any help one-on-one. There is a lot of information about Microsoft Dynamics NAV online, also about old and unsupported versions. Good luck!

Leave a Reply