Debugging JavaScript/TypeScript Using Visual Studio 2017 and Chrome

Introduction

One of the great new features of Visual Studio 2017 is that you can debug JavaScript and TypeScript directly in the Visual Studio IDE if they are running in Google”s Chrome browser.  We’ve been able to do this with Internet Explorer and Visual Studio for some time, but of course Internet Explorer is old and has been superseded by Microsoft’s Edge browser.  Edge does not support Visual Studio debugging.

Debugging with Visual Studio is a nice alternative to the context switch involved in using Chrome’s own debug tools.  All of the Visual Studio debug windows are available: Locals, Watches, Call Stack, and the Immediate Window all work.

The problem is it can seem a little difficult to get it working the first time.  This article is an attempt at a step-by-step guide to create a very simple program that works.

Making It Work

Here are the steps to set up a simple program that will break in debug on all my machines:

    • Start VS2017 and create an ASP.NET project (‘ASP.NET Web Application (.Net Framework)’). On the next screen select the ‘Empty’ template.
    • Add an index.html file. Paste the code below into it.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button type="button" onclick="helloFunction()">Say Hello</button>
    <script>
        console.log("In script");
        function helloFunction() {
            console.log("In helloFunction");
        }
        window.onload = function () {
            console.log("In window.onload");
        }
    </script>
</body>
</html>
  • Put breakpoints on the three console.logs either by clicking on the lines and hitting F9, or by clicking in the margin on the left hand side
  • Select ‘Chrome’ in the debug dropdown in the toolbar, and hit F5 or click the green arrow.
  • RELOAD THE PAGE by hitting ctrl-F5 or the clicking the reload page icon in the browser address bar.  This is the catch: the steps above will bring up the page and show the button, but they WON’T immediately hit the breakpoints on an initial page load.  You need to reload the page in the browser.  Note that this is different from debugging with Internet Explorer from Visual Studio, which will hit the startup breakpoints immediately.
  • The first breakpoint should be hit and Visual Studio will break in debug.

Once the breakpoints are hit you can use Visual Studio’s usual debug tools, single step (F10/F11), continue and hit the next breakpoint (F5), add new breakpoints, use the other debug windows etc.  If you click the button any breakpoint in the button event handler will be hit.

This also works if you create a JavaScript (.js) file and put the code into it (and reference it from the HTML), or if you create a TypeScript (.ts) file and put TypeScript code in it (and reference it from the HTML).

Problems and Possible Solutions

Note that you CAN’T debug with Visual Studio and Chrome’s own debug tools simultaneously.  It’s one or the other.  If you bring up the Chrome tools window by hitting F12 you are going to disable the Visual Studio debug session.

As I mentioned, the steps above work on all my computers.  I’m running Visual Studio 2017 Community Edition and Windows 10 as a standard user.  However, if the breakpoints are not hit some Stack Overflow answers are suggesting some things to try:

  • Run Visual Studio as an Administrator.
  • Disable JavaScript debugging in Visual Studio, build and run, then enable it again. The setting is at Tools/Options/Debugging/’Enable JavaScript debugging for ASP.NET (Chrome and IE)’. The option is about half way down a long list, and not easy to find.