F12 debugging in Ms edge

Abhishek Sur, Microsoft MVP
Architect, Insync
F12 Debugging in MS Edge

Agenda
 DOM Explorer (CTRL + 1)
 Console Tool (CTRL + 2)
 The Debugger Tool (CTRL + 3)
 The Network Tool (CTRL + 4)
 The Performance Tool (CTRL + 5)
 The Memory Tool (CTRL + 6)
 The Emulator Tool (CTRL + 7)
 The Experiment Tool (CTRL + 8)

Built in .NET and TypeScript in
background Edge utilizes the
power of Microsoft .NET and
produces awesome rendering
experience.

The DOM Explorer Tool
The Tool visualizes the DOM Explorer and inspects the
state of a Web page. You can examine HTML Structure
and CSS Styles and test changes to solve display
issues.

Features
 Inspect Element
 BreadCrumbs
 Search
 Change / Edit attributes or Styles
 Drag DOM Elements
 Layout or Box model diagram of element
 Events for DOM
 Change Tracking

The Console Tool
The Tool is used to view errors and other messages,
send debug outputs, inspect Javascript objects and
XML nodes, and to run Javascript in the context of
selected window or frame.

Features
 Inspect Code in Realtime objects
 Show messages that Microsoft shows to Console
 Option to select frames to change Context
 Change / Edit attributes or Styles
 $(), $$(), $0, $1… For selecting elements in DOM
 Support for Console API
 Log, Count, Time, Trace, Assert, Error, Clear etc.

The Debugger Tool
The Debugger tool is used to navigate your code as it
runs, set watches and breakpoints, view call stacks, and
improve readability of compiled/minified Javascript

Features
 Watches
 Call Stack
 Breakpoints & Conditional Breakpoints
 Pretty Print
 Show next statement/ Run to cursor / Set Next
Step

Network Tool
Use the network tool to view communication between
browser and server, inspect request and reply headers,
see response codes and debug ajax.

Features
 Enable/Disable Network traffic capture
 Export traffic capture
 Clear cache / cookie
 Content Type filtering with Search functionalities
 Clear Summary of each request

The Performance Tool
Performance tool allows you profile your webpage
framerate with timeline and javascript execution times
with javascript call stack. The reports on different types
of CPU usage and javascript execution profiling help
you analyze UI performance problems.

Features
 Visual Throughput
 CPU utilization
 Timeline Details
 API for performance.mark() and
performance.measure() to measure performance
of a method.

The Memory Tool
Use Memory tool to diagonise memory issues that can
impact the speed and stability of web pages.

Features
 Profile using Snapshots of heap
 Details of each snapshot with size of each DOM
Element in memory
 Comparison view between two snapshots

The Emulator Tool
Use Emulation tool to test how web pages work with
different browser profiles, user agents, screen sizes and
resolutions and GPS location coordinates.

Features
 Emulate on different browser profiles and screen
sizes
 Emulate Desktop vs Phone
 Change Geo location to emulate

The Experiment Tool
The experiment tool will allow you to edit jacascript
content on the fly and execute directly

More Resources
 Edge documentation
https://dev.windows.com/en-us/microsoft-
edge/platform/documentation
 Static website performance scanner
https://dev.windows.com/en-us/microsoft-
edge/tools/staticscan/
 Microsoft Edge in Git
https://github.com/MicrosoftEdge

F12 debugging in Ms edge

More Related Content

Viewers also liked

Similar to F12 debugging in Ms edge

More from Abhishek Sur

Recently uploaded

F12 debugging in Ms edge