Debugging JavaScript in Microsoft Edge Browser Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report While working with JavaScript, we often encounter several errors but finding them out is truly an arduous task. So, in this article, we will learn how to debug JavaScript in Microsoft Edge. Steps to debug the JavaScript in Microsoft EdgeFinding the bugBeing familiar with sources tool UIUse a breakpoint to pause the codeSetting a line-of-code breakpointCheck variable valuesFix the codeStep 1: Finding the bugTo start with debugging, we need to perform some actions to reproduce a bug. For demonstration purposes, here We have the code to add two numbers. JavaScript //get-started.js file function onClick() { if (inputsAreEmpty()) { label.textContent = "Error: one or both inputs are empty."; return; } /* <!-- # throw "whoops"; --> */ updateLabel(); } function inputsAreEmpty() { if (getNumber1() === "" || getNumber2() === "") { return true; } else { return false; } } function updateLabel() { var addend1 = getNumber1(); var addend2 = getNumber2(); var sum = addend1 + addend2; label.textContent = addend1 + " + " + addend2 + " = " + sum; } function getNumber1() { return inputs[0].value; } function getNumber2() { return inputs[1].value; } var inputs = document.querySelectorAll("input"); var label = document.querySelector("p"); var button = document.querySelector("button"); button.addEventListener("click", onClick); HTML <html> <head> <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png"> <title>Demo: Debugging JavaScript with Microsoft Edge DevTools</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { font-size: 1.5em } input, button { min-width: 72px; min-height: 36px; border: 1px solid grey; } label, input, button { display: block; } input { margin-bottom: 1em; } </style> </head> <body data-new-gr-c-s-check-loaded="14.1039.0" data-gr-ext-installed=""> <h1>Debugging JavaScript with Microsoft Edge</h1> <label for="num1">Enter the first number</label> <input placeholder="Number 1" id="num1"> <label for="num2">Enter the second number</label> <input placeholder="Number 2" id="num2"> <button>Add</button> <p></p> <script src="get-started.js"></script> </body> </html> Output: OutputNow, it is not giving the correct result in the output as you can see, so we will check what is the error. Moving on to the next step, we will try to get familiar with the sources tool UI Step 2: Being familiar with sources tool UIMicrosoft edge provides us with different developer tools to perform different tasks. To open Developer tools, right click anywhere on the webpage and click on "Inspect" Select the "Sources" tool. It comprises of three parts:- The pane in the upper left corner is called the Navigator tab. It lists down all the files that a webpage has requested. It is also called the page tab.Once you have selected the file from the navigator pane, all the contents of it appear on the right hand side pane, this tab is called the Editor tab.The bottom tab which provides a wide variety of tools for debugging the code is called the Debugger tab. To debug the code, from the navigator tab, select your JavaScript file. Here, We will select get-started.js File. The contents of the file will now be visible in the editor pane, as you can see in the image above. The window at the bottom is called the debugger pane and it provides us with the tools to debug the JavaScript code. Step 3: Use a breakpoint to pause the code:Now coming to the actual part i.e. debugging the code, we need to see where is the error. A common approach to find error is marking breakpoints. It is an alternative for console.log() statement but a little less time consuming than that. So, let's apply breakpoints to our code and check where is the error. As shown in the image above, our output is displayed when the button is clicked. his tells us about the occurrence of an event. Hence, we will make use of an event listener breakpoint. To apply it, in the debugger tab: Scroll a little and click on Event listener breakpoints. Then right click on "mouse" as this event is happening on mouse click. Now, tick the checkbox "click". By doing this, your dev tools will automatically pause whenever any mouse click will happen.Now when you'll rerun the code and click on ADD button, your code will auto pause as soon as the mouse click happens.Step 4: Step through the code:Stepping through your code allows you to walk through the runtime of your code and hence helps you understand it better. Click Step over next function call. DevTools will run the following code without stepping into it.On the Sources tool of DevTools, click Step into next function call to step through the runtime of the updateLabel() function, one line at a time.Step 5: Setting a line-of-code breakpoint:Line-of-code breakpoints are another common types of breakpoints applied at specific line of code where one wants to pause. As you can see in the screenshot above, at line number 20 there is a red circle next to the code. This indicates the line of code breakpoint. Devtools will always pause before this line of code as it could be seen above. When you'll click on Resume script execution, the play button in the debugger pane, then only the code will resume. The values of the variables at that point could be seen at the bottom right pane, as shown in the image above. Step 6: Check variable values:Now, the values of variables returned in the above step doesn't seem correct. On looking at the code, we see the numbers are written in quotes(" ") which raises a possibility that the numbers are being treated as a string. We could try getting more info about these variables. To do so, click on the watch tab, select "+" button and type "typeof sum" to know the type of variable and it will return its datatype as shown. Now, we are able to recognize our error and we need to fix it. Step 7: Fix the codeComing to the last step, we need numbers to parse as integer, so we will replace line 19 with "var sum = parseInt(addend1) + parseInt(addend2);" in the editor pane. This way you can correct your code with the help of Devtools. Remove the breakpoints and then run the code. Now you have corrected the code successfully. Make sure you are fixing your original code as well after testing it in the editor pan as it won't last once you refresh your page. Comment More infoAdvertise with us Next Article Basic and advance shortcut keys in Microsoft Edge Browser I ishita28rai Follow Improve Article Tags : JavaScript Geeks Premier League 2023 Microsoft Edge Similar Reads Microsoft Edge - How to Get Started Learn what's new in Microsoft Edge - Microsoft Edge has become one of the most popular web browsers, known for its speed, security features, and seamless integration with the Windows ecosystem. Whether you're new to Edge or looking to explore its advanced features, this tutorial will guide you throu 7 min read How to Install Microsoft Edge Browser on Windows ? Microsoft Edge is a cutting-edge web browser that has rapidly gained popularity among users worldwide. With its sleek interface, improved speed, and a wide array of features Edge has become a formidable player in the web browser market. Developed by tech giant company Microsoft, it boasts seamless i 2 min read How to Browse in Microsoft Edge Browser Microsoft Edge has evolved significantly over the years and is now a powerful web browser that offers not just a fast browsing experience but a suite of advanced features for security, privacy, and productivity. With its modern Chromium-based engine, Edge is designed to provide a smoother, more effi 6 min read Bookmark in Microsoft Edge Browser When you come across a webpage that you like and want to revisit later, you can save it using the bookmarking feature in your browser. Just like when reading a book we use a bookmark to mark the page so that we can come back where we left off, a browser too has a bookmark feature but for web pages i 3 min read Debugging JavaScript in Microsoft Edge Browser While working with JavaScript, we often encounter several errors but finding them out is truly an arduous task. So, in this article, we will learn how to debug JavaScript in Microsoft Edge. Steps to debug the JavaScript in Microsoft EdgeFinding the bugBeing familiar with sources tool UIUse a breakpo 6 min read Basic and advance shortcut keys in Microsoft Edge Browser Microsoft Edge is a fast, secure, and modern web browser that offers a variety of shortcut keys that can save time and speed up your workflow. In this article, we'll explore both basic and advanced shortcut keys in Edge to navigate the browser with ease and efficiency. Table of Content Benefits of S 3 min read How to View and Edit local Storage in Microsoft Edge Browser Local Storage in Microsoft Edge is a key component for web developers, allowing websites to store data locally in the user's browser. This feature is especially useful for saving preferences, session data, or even small-scale databases that need to persist between sessions. If you're looking to view 5 min read Hidden tricks inside Microsoft Edge Browser The companyâs new improved browser- Microsoft Edge also came up with several secret ones which improve usability as well as productivity. Such âunderground treasuresâ are usually underestimated yet have a great potential to enhance web navigation abilities and ease up everyday routines. This guide l 5 min read Edge ToolsWelcome Tool in Microsoft Edge BrowserThe Welcome tool in Microsoft Edge is just a tab providing various information about the browser's release notes, links for various documents, and videos of everything related to Edge Browser. The whole tab has two sections: one is the Learn section, which contains various links to Edge-related docu 5 min read DevTools in Microsoft Edge BrowserThe Edge browser provides a wide range of tools that can be used to debug or inspect a webpage, these set of tools can be used from a sub-window called Development tools or DevTools. You can check for responsiveness, performance, and network request or edit styles in the browser itself, you can also 15+ min read Network Tool in Microsoft Edge BrowserThe Network Tool is used to view the various network request and corresponding responses of the web page. It provides various types of information about the request such as hearde, payload and initiator. You are also allowed to set various network conditions or filter in the requests or set network 5 min read Network Conditions Tool in Microsoft Edge BrowserThe Network Conditions Tool provides various options to simulate the various network conditions, which helps to check the web page behavior in real-life situations where the network conditions vary a lot. The conditions the toll provides are disabling cache, network throttling, user agents, and acce 4 min read Issues with Microsoft Edge's Developer ToolsWhen developing and testing web applications, identifying and troubleshooting issues is crucial for ensuring performance and functionality. Microsoft Edgeâs Issues Tool is a valuable resource for web developers, offering an easy way to detect issues with web performance, accessibility, and features 6 min read How to Use the Sensors Tool in Microsoft EdgeThe Sensors tool in the Microsoft Edge Developer Tools is an essential feature for developers who want to simulate and test how their website or web app interacts with device sensors. These sensors include things like geolocation, device orientation, and motion sensors. By using the Sensors tool, de 7 min read 3D View Tool in Microsoft Edge BrowserThe 3D View Tool is used to get a 3D visualization of the site to check the different layers and z-index of the sites, which is not easy to debug. The tool provides very clean and colorful visuals and provides good movement controls around the 3D view. The various details, such as size and memory co 9 min read 3D View Tool in Microsoft Edge BrowserThe 3D View Tool is used to get a 3D visualization of the site to check the different layers and z-index of the sites, which is not easy to debug. The tool provides very clean and colorful visuals and provides good movement controls around the 3D view. The various details, such as size and memory co 9 min read Detached Elements Tool in Microsoft Edge BrowserThe Detached Elements Tool is used to find all detached elements in the JS code that cannot be garbage collected. Detached elements are those elements that are removed or are not attached to the DOM, but because in JS some objects are referencing these elements, the garbage collector in the browser 4 min read Animation Tool in Microsoft Edge BrowserThe Animation Tool in Edge can be used by developers to visualize the animations and modify them. The tool provides various options to replay or preview animations and modify their various properties such as time, delay, etc. Dealing with animations can take time to analyze and make corrections but 4 min read Changes Tool in Microsoft Edge BrowserThe Changes Tool in Edge acts as a history page for various changes made to the webpage source files. While using multiple DevTools, you may knowingly or unknowingly change many things related to the web page's CSS and JS code. To check all these changes, which you may use to change your actual sour 4 min read Network Console Tool in Microsoft Edge BrowserThe network console is one of the developer tools offered by Microsoft Edge, a web browser. It provides a picture of network activity during web page loading for web developers and analysts. The Network Console aids in optimizing web page speed and troubleshooting network-related problems by capturi 4 min read Console Tool in Microsoft Edge BrowserThe Console tool is used to check JS errors and warnings but it can also be used to manipulate the JS of the webpage. The tool can also be used alongside other DevTools as by default it is present in the drawer of the DevTools. Overview of Console ToolThe console tools are present in the DevTools of 7 min read Memory Inspector Tool in Microsoft Edge BrowserThe Memory Inspector Tool is used to view Array Buffer and also provide the ASCII representation of the data present in the memory. Typed Array. In the tool the developer inspect different types of memory objects and check if correct values are present in correct memory location. Overview of Memory 7 min read Search Tool in Microsoft Edge BrowserThe Search Tool is Edge find characters in the webpage HTML,CSS, JS and image files. You can search by entering text or regular expression in the input field. The tool saves a lot of time in finding the required file.Benefits of Search ToolSupport for regular expression: Other that just text you can 3 min read Elements Tool in Microsoft Edge BrowserThe Elements Tool provides the HTML and CSS code of the webpage. This code can be modified to check the changes live in the browser itself and you can also check the layout and colors used in the elements of the webpage. The elements in the webpage are the various nodes, text, attributes, and attrib 9 min read Security Tool in Microsoft Edge BrowserSecurity too is used to view HTTPS security information to make the site secure for the users. The various origins of the web page is displayed in this tab and various origins that the websites uses for resources are also mentioned in this tab.Benefits of Security ToolThe various benefits of Securit 3 min read Application Tool in Microsoft Edge BrowserThe application tool provides all kinds of information about a web app, which helps the developers get an idea related to the web app. Some of this information is manifest, service workers, storage, etc., which you can use to check for background processes and test for PWA. The application tool prov 9 min read Rendering Tool in Microsoft Edge BrowserThe Rendering Tool provides various checkboxes and options to render the web page in different ways, which helps developers test the page for layout and design. You will also find various CSS options and various vision deficiencies that you can emulate using this tool.Benefits of a Rendering ToolThe 6 min read WebAuthn Tool in Microsoft Edge BrowserIn this article, we will learn about the WebAuth tool in the Edge browser. The Microsoft Edge browser offers a variety of features and services. One of them is WebAuth, which is a short form of Web authentication. It is defined as a standard for the web that the Wide Web Consortium and the FIDO intr 4 min read Memory Tool in Microsoft Edge BrowserThe Memory Tool in Edge allows you to capture the memory heap and provides various views to view that information. The tool provides various profiles for capturing web page memory information. The information mainly consists of retained size and shallow size, which provide information about the obje 8 min read Inspect Tool in Microsoft Edge BrowserThe Inspect Tool in Microsoft Edge is a powerful web development feature that helps web developers troubleshoot and modify the structure, layout, and functionality of web pages, which includes HTML, CSS, and JavaScript code. This tool is an integrated part of the browser's Developer Tools, which off 3 min read Performance Tool in Microsoft Edge BrowserThe Performance Tool in Edge provides views, graphs, charts, timelines, and various other information related to the web page's performance. The tool records the performance and displays it in a timeline view along with various graphs, charts, and other views that can be used to inspect networks, fr 6 min read Sources Tool in Microsoft Edge BrowserThe Sources Tool in Microsoft Edge is used to inspect and edit the JS code present on the web page. You also get debugging tools to debug the code and view the changes live on the web page. It acts as a code editor built into the browser, providing features such as formatting, color code, a file/fol 7 min read Coverage Tool in Microsoft Edge BrowserThe Coverage Tool is a very basic tool that displays various files requested by the webpage to the server. It provides various information about the file such as URL, type, total bytes, and unused bytes. The tool is mostly used to find out the JS and CSS code that is not being used by the site. This 4 min read Coverage Tool in Microsoft Edge BrowserThe Coverage Tool is a very basic tool that displays various files requested by the webpage to the server. It provides various information about the file such as URL, type, total bytes, and unused bytes. The tool is mostly used to find out the JS and CSS code that is not being used by the site. This 4 min read Elements Tool for HTML, CSS and DOM in Microsoft Edge BrowserThe Elements tool in Microsoft Edge is accessed from the Developer Tools. It gives you a hierarchical presentation of the HTML structure of a webpage and lets you explore, alter, and test CSS styles as well as the DOM. Web developers and designers require this tool to inspect and manipulate web page 4 min read Quick Source Tool in Microsoft EdgeThe Quick Source Tool is used to edit or view files on the web page. This is a lite version of the Sources tool used alongside other DevTools without the need for switching tabs. You can override the files according to your needs and view the changes live on the web page.Table of ContentBenefits of 3 min read Edge OperationsFind unused JS and CSS code in Microsoft Edge BrowserDuring the development of websites developers may leave some unused JS and CSS code in the production. These unused JS and CSS codes are being downloaded by the browser when the site is visited by the user and can result in slowing down the page loading time, increase in internet consumption or incr 3 min read Disable JavaScript in Microsoft Edge BrowserThere can be various reason to disable JavaScript in Edge browser. It may be for testing purpose to check how the website renders without JavaScript or to improve personal experience. There are two ways to disable JavaScript in Edge: Using Site Permission in Setting page Using Command Menu in Develo 2 min read How to View and Edit local Storage in Microsoft Edge BrowserLocal Storage in Microsoft Edge is a key component for web developers, allowing websites to store data locally in the user's browser. This feature is especially useful for saving preferences, session data, or even small-scale databases that need to persist between sessions. If you're looking to view 5 min read Managing Cookies in Microsoft Edge: Viewing, Editing, and DeletingCookies are small files that store information about your browsing activity, such as your login credentials, preferences, and site settings. While cookies are useful for enhancing the browsing experience, they can also impact your privacy and website performance. Microsoft Edge provides tools to man 8 min read Device Emulation in Microsoft Edge Browser [Full Guide]Testing your website or web app on various devices is essential to ensure it offers a consistent and responsive user experience across different screen sizes. Device emulation in the Microsoft Edge browser allows developers and designers to simulate how their site or application will appear on vario 10 min read CSS Font Style and Properties in Styles Pane in Microsoft Edge BrowserIn Edge, the Elements tool Styles Pane provides a font editor to change the CSS font family and properties. This helps developers quickly check for different font styles and properties. The webpage directly updates with any changes made to the Font Editor in the Styles Pane.Benefits of Font Editor i 3 min read Inspecting CSS Grid in Microsoft Edge BrowserCSS has grid layouts, which allow developers to arrange elements in rows and columns. In DevTools, the Elements tool provides a layout pane where you can customize various options related to the inspection of any grid layout on the page.Benefits of inspecting the CSS gridThe various benefits of insp 4 min read Running JavaScript in Console in Microsoft Edge BrowserJavaScript is an important programming language that is mainly developed for web use cases and it plays a vital role in improving the responsiveness and usefulness of websites. On the other hand, Microsoft Edge is a web browser that offers a built-in JavaScript engine for development. So here, we'll 3 min read Network Request Blocking in Microsoft Edge BrowserOne can manage network requests with Microsoft Edge using a feature called Block Network Request. Developers can control network activities. This is helpful for reasons like debugging, security, and page load optimization. In this article, we will understand how to block network activities with this 4 min read Sending Web API requests using Network Console Tool in Microsoft Edge BrowserApplication programming interface testing, sometimes known as API testing, is a subset of software testing that focuses on evaluating the interactions between various APIs and specific API functions. We can test the API in many ways such as accessing the endpoints through the Postman, browser, etc. 3 min read Breakpoints in Microsoft Edge BrowserMicrosoft Edge is a widely used web browser known for its excellent developer tools that help web developers in creating and fine-tuning websites. One of the essential features of these tools is breakpoints, which help in debugging and improving the performance of web applications. Breakpoints allow 5 min read Like