logo
 
  1. IT-Security >
  2. Programmierung >
  3. Debug JavaScript in Microsoft Edge from Visual Studio


ArabicEnglishFrenchGermanGreekItalianJapaneseKoreanPersianPolishPortugueseRussianSpanishTurkishVietnamese

➤ Debug JavaScript in Microsoft Edge from Visual Studio

RSS Kategorie Pfeil Programmierung vom | Quelle: devblogs.microsoft.com Direktlink öffnen Nachrichten Bewertung

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’t already, you can try out preview builds of Microsoft Edge from https://www.microsoftedgeinsider.com which is now available on Windows 10, 8.1, 8, 7, and macOS!

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’ve extended support to the preview builds of Microsoft Edge, which leverage Chromium. Head to visualstudio.com/downloads/ to download the latest Visual Studio now!

Visual Studio hearts Microsoft Edge
Visual Studio now supports debugging JavaScript running in Microsoft Edge!

 

Create a new ASP.NET Core Web Application

You can now debug JavaScript in Microsoft Edge for your ASP.NET Framework and ASP.NET Core applications. To try out this feature, let’s start by creating a new ASP.NET Core Web Application.

Screenshot of the "Create a new project" dialog in Visual Studio
Create a new project in Visual Studio and select ASP.NET Core Web Application.

 

To show off support for debugging JavaScript, we’ll 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 which you’ll see is a React component for our app.

 

Using JavaScript to calculate the Fibonacci sequence

Let’s 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.

Position 1 2 3 4 5 6 7
Value 0 1 1 2 3 5 8

 

To handle this calculation, let’s create a new Fibonacci component and add it to our app. Start by modifying App.js to import our soon-to-be-created Fibonacci component and route to it:

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { Fibonacci } from './components/Fibonacci';

export default class App extends Component {
  displayName = App.name

  render() {
    return (
      <Layout>
        <Route exact path='/' component={Home} />
        <Route path='/counter' component={Counter} />
        <Route path='/fetchdata' component={FetchData} />
        <Route path='/fibonacci' component={Fibonacci} />
      </Layout>
    );
  }
}

Now that our app will handle routing the /fibonacci endpoint, let’s modify the NavMenu to navigate to that endpoint. Open ClientApp/src/components/NavMenu.js and add this LinkContainer component at line 36:

<LinkContainer to={'/fibonacci'}>
  <NavItem>
    <Glyphicon glyph='alert' /> Fibonacci
  </NavItem>
</LinkContainer>

before the </Nav> tag. Now, you’ll be able to easily test our new /fibonacci route from the NavMenu. Finally, let’s create our Fibonacci component. Create a new JavaScript file (Ctrl+N) and save it as Fibonacci.js in the ClientApp/src/components/ folder. Add the code below to your new component:

import React, { Component } from 'react';

export class Fibonacci extends Component {
  displayName = Fibonacci.name

  constructor(props) {
    super(props);
    this.state = {
      n: 8,
      f_n: null,
    };
    this.calculateFibonacci = this.calculateFibonacci.bind(this);
  }

  calculateFibonacci() {
    var f_0 = 0;
    var f_1 = 1;
    for (var i = 3; i < this.state.n; i++) {
      var f_2 = f_0 + f_1;
      f_0 = f_1;
      f_1 = f_2;
    };
    this.setState({
      f_n: f_2
    })
    console.log("The " + i.toString() + "th Fibonnaci number is:", f_2);
  }
		
  render() {
    return (
      <div>
        <h1>Fibonacci</h1>
        <p>This is a simple example of a React component.</p>
        <p>The {this.state.n}th Fibonacci number is: <strong>{this.state.f_n}</strong></p>
        <button onClick={this.calculateFibonacci}>Calculate</button>
      </div>
    );
  }
}

Eventually, we’ll add a form to the render function for the user to supply n, the variable we’re using to represent the term in the Fibonacci sequence that they want to know. For now, just to test our logic, we’ll assume that the user wants to know what the 8th term in the sequence is, which is 13. Let’s build our app in the new Microsoft Edge to see if our code is calculating the right answer.

If you don’t have it installed already, head to https://www.microsoftedgeinsider.com to download the preview builds of Microsoft Edge. In Visual Studio, click the dropdown next to IIS Express and select the version of Microsoft Edge (Beta, Dev, or Canary) that you have installed. If you don’t see Microsoft Edge Beta, Dev or Canary in the dropdown, you may need to restart Visual Studio.

Screenshot of Visual Studio, selecting the Microsoft Edge Dev browser to launch
Select Microsoft Edge Beta, Dev, or Canary for Visual Studio to launch

Now click the green Play button or press F5 on your keyboard. Visual Studio will start your web application and Microsoft Edge will automatically launch and navigate to your app.

Screenshot of the app in Microsoft Edge
Your app is successfully running in Microsoft Edge!

You’ll see the entry we added for our Fibonacci component in the NavMenu on the left. Click on Fibonacci.

A screenshot of the Fibonacci component we added in Microsoft Edge
Microsoft Edge is showing the Fibonacci component we added

Now click the Calculate button.

Screenshot of Microsoft Edge where our Fibonacci component calculated the 8th term in the sequence as 8
Our Fibonacci component is calculating the 8th term in the sequence as 8

We know that the 8th term should be 13 but our code is saying that the 8th Fibonacci number is 8!

Debugging JavaScript in Visual Studio

Switching back to Visual Studio, since our calculateFibonacci() function prints to the Console, you can actually see that log in the Debug Output.

Screenshot of Visual Studio with our console.log statement shown in the Debug Output
You can see console.log statements from your client-side JavaScript code in Visual Studio’s Debug Output

To figure out where our code is going wrong, let’s set a breakpoint on Line 19 inside the for loop in Visual Studio. We’ll start by checking if our code is calculating the 3rd and 4th terms in the Fibonacci sequence correctly. Click the Restart button next to the Stop button or press Ctrl+Shift+F5 to bind the breakpoint and start debugging.

Note: 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).

Screenshot of Visual Studio asking if you want to enable JavaScript debugging
Click “Enable JavaScript Debugging” and Visual Studio will restart debugging

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 view to Watch 1 and add f_2, f_1, and f_0 to watch. This is what Visual Studio should look like now:

Screenshot of Visual Studio with a breakpoint set on Line 19 in Fibonacci.js and f_0, f_1, f_2 added to Watch 1
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

Click the Step Over button or press F10. You will now see that our code correctly calculated the third Fibonacci number, 1, as the value of f_2.

Position 3 4
Value 1 2
Did our function compute this term correctly? Checkmark

Let’s keep stepping to see if there’s a bug somewhere else in the loop. Step Over two more times and you should see both f_0 and f_1 are now equal to 1, which they need to be to calculate the 4th term in the sequence.

You will now see that our code is paused at Line 18. Let’s add i to our watch as it will tell us which term we’re computing in the Fibonacci sequence. Step Over one more time and you’ll see that the value of i is now 4. Now the code is checking to see if the value of i is less than n, the variable we’re using to represent which term in the Fibonacci sequence we’re trying to find. In this example, we’ve hardcoded n as 8 since we’re trying to calculate the 8th term in the sequence. Since 4 < 8, step over again and we’ll continue looping.

Step Over now and you should see that f_2 is now 2, and since i is 4, we know that our code has successfully computed the 4th term in the Fibonacci sequence as 2.

Position 3 4
Value 1 2
Did our function compute this term correctly? Checkmark Checkmark

We could keep stepping over and over again until we find the problem but since we’ve already proven that we’re calculating the 3rd and 4th terms in the Fibonnaci sequence correctly, let’s jump ahead to the 7th term since it’s the last term we calculate before we see the bug.

Using a conditional breakpoint to jump ahead in the for loop

Stop debugging for now by clicking the Stop button or pressing Shift+F5. Right click your breakpoint and select Conditions… or press Alt+F9. This will allow us to set a condition for our breakpoint and we’ll only break when that condition is true.

Screenshot of Visual Studio, adding a condition to the breakpoint you set on Line 19
You can add a condition to a breakpoint and that means you will only break execution when that condition is true.

Enter i == 7 as the condition we want to break on, which means we’ll only break in the last loop before we see the bug. Start your web app again by clicking the green Play button or pressing F5. This time, we’ll break only when i is 7. Here’s what Visual Studio looks like now:

A screenshot of Visual Studio, breaking on line 19 in Fibonacci.js when i is 7
With the conditional breakpoint, we only break when i is 7

Step over once and you will see that we’ve calculated the 7th term in the Fibonacci sequence correctly since f_2 is equal to 8.

Step over three times and we’ll now be paused at i < n. Since i is now 8, i < n actually evaluates to false which means we’re going to break out of the loop. We’ve found the bug: we aren’t going through the loop to calculate the 8th Fibonacci number!

We can fix this bug by changing the calculateFibonacci() function to:

calculateFibonacci() {
  var f_0 = 0;
  var f_1 = 1;
  for (var i = 3; i <= this.state.n; i++) {
    var f_2 = f_0 + f_1;
    f_0 = f_1;
    f_1 = f_2;
  };
  this.setState({
    f_n: f_2
  })
  console.log("The " + (i - 1).toString() + "th Fibonnaci number is:", f_2);
}

Now when i is 8, we’ll actually go through the for loop since since 8 <= 8. Remove the breakpoint, click the Restart button next to the Stop button or press Ctrl+Shift+F5. Click on Fibonacci in the NavMenu and click on the Calculate button to see that we’ve correctly calculated the 8th term in the Fibonacci sequence as 13! We did it!

A screenshot of your app in Microsoft Edge, correctly calculating the 8th Fibonacci term as 13
Your app in Microsoft Edge correctly calculated the 8th Fibonacci term as 13!

 

Attaching to Microsoft Edge

So far in this post, we’ve been using the green Play 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.

First, ensure that there are no running instances of Microsoft Edge. Now, from your terminal, run the following command:

start msedge –remote-debugging-port=9222

From Visual Studio, open the Debug menu and select Attach to Process or press Ctrl+Alt+P.

A screenshot of a computer Description automatically generated

From the Attach to Process dialog, set Connection type to Chrome devtools protocol websocket (no authentication). In the Connecting target textbox, type in http://localhost:9222/ and press Enter. You should see the list of open tabs you have in Microsoft Edge listed out in the Attach to Process dialog.

A screenshot of a computer screen Description automatically generated

Click Select… and check JavaScript (Microsoft Edge – Chromium). You can add tabs, navigate to new tabs, and close tabs and see those changes reflected in the Attach to Process dialog by clicking the Refresh button. Select the tab you want to debug and click Attach.

The Visual Studio debugger is now attached to Microsoft Edge! You can pause execution of JavaScript, set breakpoints, and see console.log() statements directly in the Debug Output window in Visual Studio.

Conclusion

To recap:

  • We created an ASP.NET Core web application in Visual Studio 2019 version 16.2 and built it in a preview build of Microsoft Edge
  • We added a new component to our web application that contained a bug
  • We found the bug by setting breakpoints and debugging our web app running in Microsoft Edge from Visual Studio!
  • We showed you how to attach the Visual Studio debugger to an existing instance of Microsoft Edge

We’re eager to learn more about how you work with JavaScript in Visual Studio! Please send us feedback by clicking the Feedback icon in Visual Studio or by tweeting @VisualStudio and @EdgeDevTools.

A close up of a screen Description automatically generated

The post Debug JavaScript in Microsoft Edge from Visual Studio appeared first on Visual Studio Blog.

...

➥ Externe Webseite mit kompletten Inhalt öffnen

Kommentiere zu Debug JavaScript in Microsoft Edge from Visual Studio






➤ Ähnliche Beiträge

  • 1.

    Using Visual Studio for Cross Platform C++ Development Targeting Windows and Linux

    vom 757.86 Punkte ic_school_black_18dp
    A great strength of C++ is the ability to target multiple platforms without sacrificing performance. If you are using the same codebase for multiple targets, then CMake is the most common solution for building your software. You can use Visual Studio f
  • 2.

    Debug JavaScript in Microsoft Edge from Visual Studio

    vom 723.68 Punkte ic_school_black_18dp
    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’t already, you can try out preview builds of
  • 3.

    Performance Improvements in Visual Studio 2019

    vom 492.93 Punkte ic_school_black_18dp
    Performance has been a big focus area for Visual Studio 2019, with improvements in many areas, including: Faster Visual Studio startup Faster branch switching experience in Visual Studio C++ open folder – time to IntelliSense improvements Faster C++ compiler
  • 4.

    Making every developer more productive with Visual Studio 2019

    vom 472.11 Punkte ic_school_black_18dp
    Today, in the Microsoft Connect(); 2018 keynote, Scott Guthrie announced the availability of Visual Studio 2019 Preview 1. This is the first preview of the next major version of Visual Studio. In this Preview, we’ve focused on a few key areas, such
  • 5.

    Get to code: How we designed the new Visual Studio start window

    vom 471.28 Punkte ic_school_black_18dp
    By now, many of you may have noticed a very prominent change to the launch of Visual Studio in Visual Studio 2019 Preview 1. Our goal with this new experience is to provide rapid access to the most common ways that developers get to their code: whether it
  • 6.

    Get to code: How we designed the new Visual Studio start window

    vom 471.28 Punkte ic_school_black_18dp
    By now, many of you may have noticed a very prominent change to the launch of Visual Studio in Visual Studio 2019 Preview 1. Our goal with this new experience is to provide rapid access to the most common ways that developers get to their code: whether it
  • 7.

    Announcing Visual Studio Online Public Preview

    vom 427.54 Punkte ic_school_black_18dp
    TL;DR Available beginning at Microsoft’s Ignite conference as a public preview, Visual Studio Online provides managed, on-demand development environments that can be used for long-term projects, to quickly prototype a new feature, or for short-term
  • 8.

    Visual Studio 2017 version 15.9 now available

    vom 407.59 Punkte ic_school_black_18dp
    Today, we are releasing Visual Studio 2017 version 15.9. The easiest way to update is directly from within Visual Studio 2017 by selecting Help>Check for Updates or select “Update” from the Visual Studio Installer. You can also download from the Vis
  • 9.

    .NET Core Support and More in Visual Studio 2019 version 16.3 – Update Now!

    vom 402.41 Punkte ic_school_black_18dp
    As we continue to deliver on our mission of any developer, any app, any platform, it’s always an exciting time on the Visual Studio team when we get to launch major features.  Today we’ve released Visual Studio 2019 version 16.3 which contains su
  • 10.

    Android Studio 3.0 Canary 1

    vom 398.32 Punkte ic_school_black_18dp
    By Jamal Eason, Product Manager, Android Just in time for Google I/O 2017, we're providing a sneak peak of Android Studio 3.0 - available to download today on our canary release channel. Android Studio's our official IDE, purpose-built for Android, and we keep increasing our investment. The feature set in Android Studi
  • 11.

    EA and Visual Studio’s Linux Support

    vom 363.76 Punkte ic_school_black_18dp
    EA is using Visual Studio’s cross-platform support to cross-compile on Windows and debug on Linux. The following post is written by Ben May, a Senior Software Engineer of Engineering Workflows at EA. Thanks Ben and EA for your partnership, and for he
  • 12.

    Visual Studio tips and tricks

    vom 343 Punkte ic_school_black_18dp
    Whether you are new or have been using Visual Studio for years, there are a bunch of tips and tricks that can make you more productive. We’ve been sharing tips on Twitter using the #vstip hashtag for a while, and this is a collection of the best ones