Debugging JavaScript/TypeScript Using Visual Studio 2017 and Chrome or Edge

Introduction

One of the great 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 didn’t support Visual Studio debugging until the Visual Studio 2017 v15.7 release, and you need Windows 10 April 18 Update: see the comments below.

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.
  • If the code doesn’t break RELOAD THE PAGE by hitting 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 may not immediately hit the breakpoints on an initial page load.  You need to reload the page in the browser.
  • 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).

Visual Studio 2017 v15.7

v15.7 of Visual Studio 2017 was released in early May 2018 and changed the debugger to support the Microsoft Edge browser.  This also changed the behavior for Chrome with respect to the example here:

  • The code consistently breaks at start-up so there’s no need to reload the page with F5.
  • Clicking the ‘Say Hello’ button now opens a dummy ‘dynamic’ screen inside Visual Studio and doesn’t break in the HTML code file.  However, if you hit F10 (single step) it will step into the HTML code file correctly.

Note on Microsoft Edge and Visual Studio 2017 v15.7

Microsoft Edge is now supported for debugging if you use Visual Studio 2017 v15.7 or later and are running on the April 2018 Update edition of Windows 10.

With this set up the example given above does also work in Edge, although the breakpoints are not hit at startup and you need to refresh the browser.  You have to refresh with control-F5 or control-click of the icon, which forces a refresh of the cache.  A regular refresh with F5 can lead to an error.  The breakpoints seem to be hit twice after the refresh.

console.log

With the release of the new debuggers for Chrome and Edge in Visual Studio 2017 v15.7 the situation with respect to seeing the default console.log output has become a little confusing:

  • In Chrome with Visual Studio versions before 2017 v15.7 and Internet Explorer you need to bring up the JavaScript Console in Visual Studio to see console output.  To bring it up break the code at a breakpoint and Debug/Windows/JavaScript Console.  Note that if you bring up the browser development tools with F12 in these versions you are going to stop your debug session in Visual Studio (see below).
  • If debugging with Chrome with Visual Studio versions after 2017 v15.7 console.log output appears in the Visual Studio Output window, Debug output.
  • If debugging with Edge with Visual Studio versions after 2017 v15.7 console.log output doesn’t appear in Visual Studio as far as I can see.  However, you can bring up the usual browser tools with F12 in Edge and see it on the console tab.  This doesn’t break your Visual Studio debug session.

 

Other Problems and Possible Solutions

Note that you CAN’T debug with Visual Studio and Chrome’s own debug tools simultaneously in versions of Visual Studio before Visual Studio 2017 v15.7.  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.
Advertisements

3 thoughts on “Debugging JavaScript/TypeScript Using Visual Studio 2017 and Chrome or Edge

  1. A recent chrome update added support for multiple remote debug connections…so (and I’ve not tested it in VS, but works in Intellij) you should be able hit F12 in chrome and NOT kill the VS remote debug session \0/

  2. Thanks for this comment “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.” This made my day!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s