{"id":226659,"date":"2019-10-16T11:00:34","date_gmt":"2019-10-16T18:00:34","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=226659"},"modified":"2019-10-11T13:46:27","modified_gmt":"2019-10-11T20:46:27","slug":"debug-javascript-in-microsoft-edge-from-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/debug-javascript-in-microsoft-edge-from-visual-studio\/","title":{"rendered":"Debug JavaScript in Microsoft Edge from Visual Studio"},"content":{"rendered":"

As you may know, the next version of Microsoft Edge will adopt the Chromium open source project to create better web compatibility and less fragmentation of different underlying web platforms. If you haven\u2019t already, you can try out preview builds of Microsoft Edge from <\/strong>https:\/\/www.microsoftedgeinsider.com<\/strong><\/a> which is now available on Windows 10, 8.1, 8, 7, and macOS!<\/strong><\/p>\n

With Visual Studio today, you can already debug JavaScript running in the current version of Microsoft Edge, built on top of the EdgeHTML web platform. Starting with Visual Studio 2019 version 16.2, we\u2019ve extended support to the preview builds of Microsoft Edge, which leverage Chromium. Head to visualstudio.com\/downloads\/<\/a> to download the latest Visual Studio now!<\/strong><\/p>\n

\"Visual
Visual Studio now supports debugging JavaScript running in Microsoft Edge!<\/figcaption><\/figure><\/p>\n

 <\/p>\n

Create a new ASP.NET Core Web Application<\/h2>\n

You can now debug JavaScript in Microsoft Edge for your ASP.NET Framework and ASP.NET Core applications. To try out this feature, let\u2019s start by creating a new ASP.NET Core Web Application.<\/p>\n

\"Screenshot
Create a new project in Visual Studio and select ASP.NET Core Web Application.<\/figcaption><\/figure><\/p>\n

 <\/p>\n

To show off support for debugging JavaScript, we\u2019ll use the React.js template which shows you how to integrate React.js with an ASP.NET Core application. Once your project has been created, open ClientApp\/src\/App.js<\/strong> which you\u2019ll see is a React component for our app.<\/p>\n

 <\/p>\n

Using JavaScript to calculate the Fibonacci sequence<\/h2>\n

Let\u2019s assume that as part of this app, a user will input the term in the Fibonacci sequence they want to know and our client-side JavaScript code will be responsible for calculating it and displaying the result to the user. The Fibonacci sequence is a series of numbers where each number is the sum of the two preceding ones, starting with 0 and 1.<\/p>\n\n\n\n\n
Position<\/strong><\/td>\n1<\/td>\n2<\/td>\n3<\/td>\n4<\/td>\n5<\/td>\n6<\/td>\n7<\/td>\n<\/tr>\n
Value<\/strong><\/td>\n0<\/td>\n1<\/td>\n1<\/td>\n2<\/td>\n3<\/td>\n5<\/td>\n8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

To handle this calculation, let\u2019s create a new Fibonacci component and add it to our app. Start by modifying App.js<\/strong> to import our soon-to-be-created Fibonacci component and route to it:<\/p>\n

import React, { Component } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Layout } from '.\/components\/Layout';\r\nimport { Home } from '.\/components\/Home';\r\nimport { FetchData } from '.\/components\/FetchData';\r\nimport { Counter } from '.\/components\/Counter';\r\nimport { Fibonacci } from '.\/components\/Fibonacci';\r\n\r\nexport default class App extends Component {\r\n  displayName = App.name\r\n\r\n  render() {\r\n    return (\r\n      <Layout>\r\n        <Route exact path='\/' component={Home} \/>\r\n        <Route path='\/counter' component={Counter} \/>\r\n        <Route path='\/fetchdata' component={FetchData} \/>\r\n        <Route path='\/fibonacci' component={Fibonacci} \/>\r\n      <\/Layout>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
Now that our app will handle routing the \/fibonacci<\/code> endpoint, let\u2019s modify the NavMenu<\/strong> to navigate to that endpoint. Open ClientApp\/src\/components\/NavMenu.js <\/strong>and add this LinkContainer<\/strong> component at line 36:<\/p>\n
<LinkContainer to={'\/fibonacci'}>\r\n  <NavItem>\r\n    <Glyphicon glyph='alert' \/> Fibonacci\r\n  <\/NavItem>\r\n<\/LinkContainer><\/pre>\n
before the <\/Nav><\/code> tag. Now, you\u2019ll be able to easily test our new \/fibonacci<\/code> route from the NavMenu<\/strong>. Finally, let\u2019s create our Fibonacci component. Create a new JavaScript file (Ctrl<\/strong>+N<\/strong>) and save it as Fibonacci.js<\/strong> in the ClientApp\/src\/components\/<\/strong> folder. Add the code below to your new component:<\/p>\n
import React, { Component } from 'react';\r\n\r\nexport class Fibonacci extends Component {\r\n  displayName = Fibonacci.name\r\n\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      n: 8,\r\n      f_n: null,\r\n    };\r\n    this.calculateFibonacci = this.calculateFibonacci.bind(this);\r\n  }\r\n\r\n  calculateFibonacci() {\r\n    var f_0 = 0;\r\n    var f_1 = 1;\r\n    for (var i = 3; i < this.state.n; i++) {\r\n      var f_2 = f_0 + f_1;\r\n      f_0 = f_1;\r\n      f_1 = f_2;\r\n    };\r\n    this.setState({\r\n      f_n: f_2\r\n    })\r\n    console.log(\"The \" + i.toString() + \"th Fibonnaci number is:\", f_2);\r\n  }\r\n\t\t\r\n  render() {\r\n    return (\r\n      <div>\r\n        <h1>Fibonacci<\/h1>\r\n        <p>This is a simple example of a React component.<\/p>\r\n        <p>The {this.state.n}th Fibonacci number is: <strong>{this.state.f_n}<\/strong><\/p>\r\n        <button onClick={this.calculateFibonacci}>Calculate<\/button>\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
Eventually, we\u2019ll add a form to the render function for the user to supply n<\/code>, the variable we\u2019re using to represent the term in the Fibonacci sequence that they want to know. For now, just to test our logic, we\u2019ll assume that the user wants to know what the 8th<\/sup> term in the sequence is, which is 13. Let\u2019s build our app in the new Microsoft Edge to see if our code is calculating the right answer.<\/p>\n
If you don\u2019t have it installed already, head to https:\/\/www.microsoftedgeinsider.com<\/a> to download the preview builds of Microsoft Edge. In Visual Studio, click the dropdown next to IIS Express<\/strong> and select the version of Microsoft Edge (Beta, Dev, or Canary) that you have installed. If you don\u2019t see Microsoft Edge Beta, Dev or Canary in the dropdown, you may need to restart Visual Studio.<\/p>\n
\"Screenshot
Select Microsoft Edge Beta, Dev, or Canary for Visual Studio to launch<\/figcaption><\/figure><\/p>\n
Now click the green Play<\/strong> button or press F5<\/strong> on your keyboard. Visual Studio will start your web application and Microsoft Edge will automatically launch and navigate to your app.<\/p>\n
\"Screenshot
Your app is successfully running in Microsoft Edge!<\/figcaption><\/figure><\/p>\n
You\u2019ll see the entry we added for our Fibonacci component in the NavMenu<\/strong> on the left. Click on Fibonacci<\/strong>.<\/p>\n
\"A
Microsoft Edge is showing the Fibonacci component we added<\/figcaption><\/figure><\/p>\n
Now click the Calculate<\/strong> button.<\/p>\n
\"Screenshot
Our Fibonacci component is calculating the 8th term in the sequence as 8<\/figcaption><\/figure><\/p>\n
We know that the 8th<\/sup> term should be 13 but our code is saying that the 8th<\/sup> Fibonacci number is 8!<\/p>\n
Debugging JavaScript in Visual Studio<\/h2>\n
Switching back to Visual Studio, since our calculateFibonacci()<\/strong> function prints to the Console, you can actually see that log in the Debug Output.<\/p>\n
\"Screenshot
You can see console.log statements from your client-side JavaScript code in Visual Studio’s Debug Output<\/figcaption><\/figure><\/p>\n
To figure out where our code is going wrong, let\u2019s set a breakpoint on Line 19 inside the for loop in Visual Studio. We\u2019ll start by checking if our code is calculating the 3rd<\/sup> and 4th<\/sup> terms in the Fibonacci sequence correctly. Click the Restart<\/strong> button next to the Stop button or press Ctrl<\/strong>+Shift<\/strong>+F5<\/strong> to bind the breakpoint and start debugging.<\/p>\n
Note<\/strong>: If you have not enabled JavaScript debugging before, your JavaScript breakpoint will not bind successfully. Visual Studio will ask if you want to enable JavaScript debugging and then restart the debugging process and bind your breakpoint. Click Enable JavaScript Debugging (Debugging Will Stop and Restart)<\/strong>.<\/p>\n
\"Screenshot
Click “Enable JavaScript Debugging” and Visual Studio will restart debugging<\/figcaption><\/figure><\/p>\n
We know that the first two terms in the Fibonacci sequence are 0 and 1. The third term should also be 1. Switch from the Output<\/strong> view to Watch 1<\/strong> and add f_2<\/code>, f_1<\/code>, and f_0<\/code> to watch. This is what Visual Studio should look like now:<\/p>\n
\"Screenshot
Visual Studio is paused at Line 19 in Fibonacci.js and you can see the values of f_0, f_1, and f_2 in Watch 1<\/figcaption><\/figure><\/p>\n
Click the Step Over<\/strong> button or press F10<\/strong>. You will now see that our code correctly calculated the third Fibonacci number, 1, as the value of f_2.<\/p>\n\n\n\n\n\n
Position<\/strong><\/td>\n3<\/td>\n4<\/td>\n<\/tr>\n
Value<\/strong><\/td>\n1<\/td>\n2<\/td>\n<\/tr>\n
Did our function compute this term correctly?<\/strong><\/td>\n\"Checkmark\"<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Let\u2019s keep stepping to see if there\u2019s a bug somewhere else in the loop. Step Over<\/strong> two more times and you should see both f_0<\/code> and f_1<\/code> are now equal to 1, which they need to be to calculate the 4th<\/sup> term in the sequence.<\/p>\n
You will now see that our code is paused at Line 18. Let\u2019s add i<\/code> to our watch as it will tell us which term we\u2019re computing in the Fibonacci sequence. Step Over<\/strong> one more time and you\u2019ll see that the value of i<\/code> is now 4. Now the code is checking to see if the value of i<\/code> is less than n<\/code>, the variable we\u2019re using to represent which term in the Fibonacci sequence we\u2019re trying to find. In this example, we\u2019ve hardcoded n<\/code> as 8 since we\u2019re trying to calculate the 8th<\/sup> term in the sequence. Since 4 < 8, step over<\/strong> again and we\u2019ll continue looping.<\/p>\n
Step Over<\/strong> now and you should see that f_2<\/code> is now 2, and since i<\/code> is 4, we know that our code has successfully computed the 4th<\/sup> term in the Fibonacci sequence as 2.<\/p>\n\n\n\n\n\n
Position<\/strong><\/td>\n3<\/td>\n4<\/td>\n<\/tr>\n
Value<\/strong><\/td>\n1<\/td>\n2<\/td>\n<\/tr>\n
Did our function compute this term correctly?<\/strong><\/td>\n\"Checkmark\"<\/td>\n\"Checkmark\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
We could keep stepping over and over again until we find the problem but since we\u2019ve already proven that we\u2019re calculating the 3rd<\/sup> and 4th<\/sup> terms in the Fibonnaci sequence correctly, let\u2019s jump ahead to the 7th<\/sup> term since it\u2019s the last term we calculate before we see the bug.<\/p>\n
Using a conditional breakpoint to jump ahead in the for loop<\/h2>\n
Stop debugging for now by clicking the Stop<\/strong> button or pressing Shift<\/strong>+F5<\/strong>. Right click your breakpoint and select Conditions\u2026<\/strong> or press Alt<\/strong>+F9<\/strong>. This will allow us to set a condition for our breakpoint and we\u2019ll only break when that condition is true.<\/p>\n
\"Screenshot
You can add a condition to a breakpoint and that means you will only break execution when that condition is true.<\/figcaption><\/figure><\/p>\n
Enter i == 7<\/code> as the condition we want to break on, which means we\u2019ll only break in the last loop before we see the bug. Start your web app again by clicking the green Play<\/strong> button or pressing F5<\/strong>. This time, we\u2019ll break only when i<\/code> is 7. Here\u2019s what Visual Studio looks like now:<\/p>\n
\"A
With the conditional breakpoint, we only break when i is 7<\/figcaption><\/figure><\/p>\n
Step over<\/strong> once and you will see that we\u2019ve calculated the 7th<\/sup> term in the Fibonacci sequence correctly since f_2<\/code> is equal to 8.<\/p>\n
Step over<\/strong> three times and we\u2019ll now be paused at i < n<\/code>. Since i<\/code> is now 8, i < n<\/code> actually evaluates to false which means we\u2019re going to break out of the loop. We\u2019ve found the bug: we aren\u2019t going through the loop to calculate the 8th<\/sup> Fibonacci number!<\/p>\n
We can fix this bug by changing the calculateFibonacci()<\/strong> function to:<\/p>\n
calculateFibonacci() {\r\n  var f_0 = 0;\r\n  var f_1 = 1;\r\n  for (var i = 3; i <= this.state.n; i++) {\r\n    var f_2 = f_0 + f_1;\r\n    f_0 = f_1;\r\n    f_1 = f_2;\r\n  };\r\n  this.setState({\r\n    f_n: f_2\r\n  })\r\n  console.log(\"The \" + (i - 1).toString() + \"th Fibonnaci number is:\", f_2);\r\n}<\/pre>\n
Now when i<\/code> is 8, we\u2019ll actually go through the for loop since since 8 <= 8. Remove the breakpoint, click the Restart<\/strong> button next to the Stop button or press Ctrl<\/strong>+Shift<\/strong>+F5<\/strong>. Click on Fibonacci<\/strong> in the NavMenu<\/strong> and click on the Calculate<\/strong> button to see that we\u2019ve correctly calculated the 8th<\/sup> term in the Fibonacci sequence as 13! We did it!<\/p>\n
\"A
Your app in Microsoft Edge correctly calculated the 8th Fibonacci term as 13!<\/figcaption><\/figure><\/p>\n
 <\/p>\n
Attaching to Microsoft Edge<\/h2>\n
So far in this post, we\u2019ve been using the green Play<\/strong> button in Visual Studio to build our web application, launch Microsoft Edge, and automatically have Edge navigate to our app. Starting in Visual Studio 2019 version 16.3 Preview 3, you can now attach the Visual Studio debugger to an already running instance of Microsoft Edge.<\/p>\n
First, ensure that there are no running instances of Microsoft Edge. Now, from your terminal, run the following command:<\/p>\n
start msedge –remote-debugging-port=9222<\/p>\n
From Visual Studio, open the Debug<\/strong> menu and select Attach to Process<\/strong> or press Ctrl<\/strong>+Alt<\/strong>+P<\/strong>.<\/p>\n
\"A<\/p>\n
From the Attach to Process<\/strong> dialog, set Connection type <\/strong>to Chrome devtools protocol websocket (no authentication)<\/strong>. In the Connecting target<\/strong> textbox, type in http:\/\/localhost:9222\/<\/a> and press Enter<\/strong>. You should see the list of open tabs you have in Microsoft Edge listed out in the Attach to Process<\/strong> dialog.<\/p>\n
\"A<\/p>\n
Click Select\u2026<\/strong> and check JavaScript (Microsoft Edge – Chromium)<\/strong>. You can add tabs, navigate to new tabs, and close tabs and see those changes reflected in the Attach to Process<\/strong> dialog by clicking the Refresh<\/strong> button. Select the tab you want to debug and click Attach<\/strong>.<\/p>\n
The Visual Studio debugger is now attached to Microsoft Edge! You can pause execution of JavaScript, set breakpoints, and see console.log()<\/code> statements directly in the Debug Output window in Visual Studio.<\/p>\n
Conclusion<\/h2>\n
To recap:<\/p>\n