How to debug JavaScript in IE Edge?

To debug JavaScript in Microsoft Edge (often referred to as "IE Edge" in the context of its Microsoft browser lineage), you'll primarily use the built-in Microsoft Edge DevTools, a powerful suite of tools for web development and debugging.

Debugging JavaScript involves a systematic approach to identify, isolate, and resolve issues in your code. Here’s a comprehensive guide:

How to Debug JavaScript in Microsoft Edge

Debugging JavaScript in Microsoft Edge is straightforward using its integrated Developer Tools. These tools provide a robust environment to pause code execution, inspect variables, and understand the flow of your application.

1. Accessing Microsoft Edge DevTools

Before you can debug, you need to open the Developer Tools:

• Keyboard Shortcut: Press F12 (Windows/Linux) or Cmd + Option + I (macOS).
• Context Menu: Right-click anywhere on the webpage and select "Inspect" or "Inspect element."
• Browser Menu: Go to the Edge menu (three dots ...) > More tools > Developer tools.

Once open, the DevTools panel typically docks to the side or bottom of your browser window.

2. Navigating the Sources Panel

The Sources panel is your primary workspace for debugging JavaScript. Getting familiar with its user interface is crucial for effective debugging. It's where you'll find your project files, set breakpoints, and step through your code.

• File Navigator: On the left, you'll see a tree view of your project files. You can navigate through page, filesystem, overrides, and content scripts.
• Code Editor: The center area displays the code of the currently selected file.
• Debugger Pane: On the right, this pane contains powerful tools like Watch, Breakpoints, Scope, Call Stack, and XHR/fetch Breakpoints.

3. Finding the Bug and Setting Breakpoints

The first step in debugging is to identify where the problem might be occurring in your code. Once you have a suspected area, you can use breakpoints to pause the execution of your JavaScript at specific points.

• What is a Breakpoint? A breakpoint is an intentional stopping or pausing place in a program, put in place for debugging purposes. When your code hits a breakpoint, its execution halts, allowing you to examine the state of your application.
• Why use Breakpoints? They allow you to:
  • Inspect variable values at a specific moment.
  • Understand the execution flow of your code.
  • Pinpoint the exact line where an error occurs.

4. Setting a Line-of-Code Breakpoint

The most common type of breakpoint is the line-of-code breakpoint.

1. Open your JavaScript file: In the Sources panel, use the File Navigator to open the JavaScript file containing the code you want to debug.
2. Click the line number: In the Code Editor area, click on the line number next to the line of code where you want to pause execution. A blue marker will appear, indicating a breakpoint has been set.

Other Useful Breakpoint Types:

Breakpoint Type	Description	How to Set
Conditional	Pauses execution only if a specified condition is true. Ideal for loops or functions called many times.	Right-click line number > Add conditional breakpoint
DOM	Pauses when a DOM element's attributes are modified, its subtree is modified, or the element is removed.	In Elements panel, right-click element > Break on > select condition
Event Listener	Pauses when a specific event (e.g., click, load, submit) fires. Useful for debugging event handlers.	In Sources panel, Event Listener Breakpoints pane > check event category
XHR/Fetch	Pauses when an XHR or fetch() request URL contains a specified string. Great for debugging network requests.	In Sources panel, XHR/fetch Breakpoints pane > + > enter URL part

5. Checking Variable Values and Stepping Through Code

Once your code is paused at a breakpoint, you can inspect the current state of your application.

• Inspect Variables:

  • Scope Panel: In the Debugger Pane (right side), the Scope section shows you all the local, closure, and global variables currently in scope and their values.
  • Watch Panel: You can add specific variables or expressions to the Watch panel to monitor their values as you step through the code. Click the + icon and type the variable name.
  • Hover over Variables: In the Code Editor, hover your mouse over a variable name, and a tooltip will display its current value.
  • Console: Type a variable name directly into the Console (accessible at the bottom of DevTools, or by pressing Esc) to immediately see its value.

• Stepping Through Code: Use the debugger controls in the Debugger Pane toolbar to navigate through your code line by line:

  • Resume script execution (F8): Continues execution until the next breakpoint or end of the script.
  • Step over next function call (F10): Executes the current line and moves to the next, stepping over function calls (executes the function in one go).
  • Step into next function call (F11): Executes the current line and, if it's a function call, steps into that function.
  • Step out of current function (Shift + F11): Jumps out of the current function back to where it was called.
  • Step (F9): Similar to Step over but steps into async code.

6. Fixing the Code

After inspecting variables, understanding the call stack, and stepping through the execution, you should have enough information to pinpoint the source of the bug.

1. Identify the cause: Determine why the variable has an unexpected value, or why the code is taking an incorrect path.
2. Modify your source code: Go back to your actual project files in your code editor (e.g., VS Code) and make the necessary corrections.
3. Refresh the browser: Reload the webpage in Edge to apply your changes.
4. Repeat: If the bug persists or a new issue arises, repeat the debugging process from step 1.

Practical Tips for Efficient Debugging

• Use console.log(): For quick checks without setting breakpoints, console.log() statements are invaluable for outputting variable values or messages to the Console.
• The Console Panel: Beyond logging, the Console allows you to run JavaScript commands in real-time on the current page, which is great for testing snippets or inspecting global objects.
• Call Stack: This panel shows you the sequence of function calls that led to the current point of execution. It's essential for understanding the flow and context of your code.
• Network Panel: If your JavaScript relies on API calls, use the Network panel to inspect requests and responses, ensuring data is sent and received as expected.
• Error Messages: Always pay attention to error messages in the Console. They often provide valuable clues about the location and type of bug.

By following these steps and utilizing the comprehensive features of Microsoft Edge DevTools, you can effectively debug your JavaScript applications and resolve issues efficiently. For more detailed information, refer to the official Microsoft Edge DevTools documentation.