Breakpoints in Microsoft Edge Browser
Last Updated :
01 Nov, 2023
Microsoft 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 developers to pause the execution of their code at specific points and inspect variables and program conditions. In this article, we will understand how to set breakpoints on the code that is rendered on the Microsoft Edge screen with the developer tools breakpoint feature.
Breakpoints are the points in the code which pause the execution of the code. They are used for debugging or understanding the flow of code.
How to set Breakpoints in Edge?
Step 1: Open your Microsoft Edge and then open any webpage you want to debug. Then you open the Developer Tools like below.
.gif)
Step 2: Navigate to the Sources tab in developer tools to view and edit your source code. You will find a list of source files on the left of the sources tab. Click on the file you want to set breakpoints in. Click on the line number of the code line to set a breakpoint and pause the execution.
Types of Breakpoints :
- Line Breakpoints: To pause execution at a specific line of code.
- Conditional Breakpoints: To pause based on the condition by right-clicking on the breakpoint
- Event Listener Breakpoints: Breakpoints based on specific events to pause execution on the trigger of events in your code.
- XHR/fetch Breakpoints: Breakpoints on XMLHttpRequest or fetch API to pause execution when data is retrieved or sent.
- DOM Breakpoints: DOM breakpoints are useful for tracking changes like attribute modifications, node removals, and more. This feature is important for debugging issues related to dynamic page content.
- Exception Breakpoints: Exception breakpoints are used to pause code execution when an uncaught exception is thrown. You can also pause on caught exceptions by checking into an optional checkbox on the sources tab.
- Logpoints: This does not break but it logs when a specific breakpoint triggers.
- Function Breakpoints: Function breakpoints let you pause code execution whenever a specific function is called regardless of its position in the code.
Example 1: Let us implement a small example with a button printing a message on click and debug it with breakpoints.
Steps:
- In Edge visit the index.html page.
- Open Developer Tools.
- In Developer Tools, go to the Sources tab.
- On the left panel, select script.js
- Click on the line console.log(message); to set a breakpoint with a red color dot
- Click the Press Me button on the webpage.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakpoint Example</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button id="myButton">Press Me</button>
<script src="script.js"></script>
</body>
</html>
|
Javascript
function printMessage() {
let message = "Hello GeekforGeeks!";
let next = "Message is Printed on the console"
console.log(message);
alert(next);
}
document.getElementById("myButton").addEventListener("click", function() {
printMessage();
});
|
Output: In this example, the execution got paused at console.log until I resumed it to execute alert().
.gif)
Example 2: In this example, we will implement conditional breakpoints which pauses when x equals y variable in javascript code.
Steps:
- In Edge visit the index.html page.
- Open Developer Tools.
- In Developer Tools, go to the Sources tab.
- On the left panel, select script.js
- Click on the line after x +=i to set a breakpoint with a red color dot
- Right-click on the breakpoint, and in the context menu, select Edit breakpoint. A dialog will appear where you can enter a condition.
- Click Save in the dialog. Now, the debugger will only pause execution on that line if the condition is met.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakpoint Example</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<script src="script.js"></script>
</body>
</html>
|
Javascript
let x = 10;
let y = 15;
for (let i = 0; i < 10; i++) {
x += i;
y += 2;
}
|
Output: The execution stops when both the s and y values equal to 25.
.gif)
Example 3: Here we will implement the XHR Breakpoint. We will make a request to JSON placeholder API that gets blocked using the Network Tab in Edge.
Steps:
- In Edge visit the index.html page.
- Open Developer Tools.
- In Developer Tools, go to the Network tab.
- Click on the Request that you want to block, then choose Block Request URL or enter the URL that you want to block.
- The browser blocks the request to the API
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakpoint Example</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<script src="script.js"></script>
</body>
</html>
|
Javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
|
Output: It blocks for request to https://jsonplaceholder.typicode.com/posts/1 which is shown with red color.
.gif)
Benefits Of Breakpoints :
- Breakpoints help you figure out errors in your code.
- You can test variables, properties, and functions during runtime.
- Breakpoints allow you the execute the code line by line.
- Breakpoints can be configured with conditions.
- You can set breakpoints on specific events, such as mouse clicks or AJAX requests, to understand how these events trigger.
- Breakpoints allow you to easily test different scenarios without changing your code.
Conclusion :
In this article, you learned to implement breakpoints in Edge. Breakpoints are used to debug complex applications and also understand code flow. You can set them at multiple places within your code to test specific points in execution.
Share your thoughts in the comments
Please Login to comment...