Microsoft Edge DevTools documentation

Development using Microsoft Edge DevTools.

Getting started with DevTools

Get Started

• Overview of DevTools
• Change DevTools placement (Undock, Dock to bottom, Dock to left)
• Run commands in the Command Menu
• Console overview

What's new

• What's New in Microsoft Edge DevTools
• Contact the Microsoft Edge DevTools team

Customizing DevTools

Get Started

• Customize DevTools
• Apply a color theme to DevTools

What's new

• Experimental features in Microsoft Edge DevTools

How-To Guide

• Change DevTools language settings
• Customize keyboard shortcuts

Debugging web projects

Quickstart

• Analyze pages using the Inspect tool

Tutorial

• Get started viewing and changing CSS
• Get started viewing and changing the DOM

How-To Guide

• Find and fix problems using the Issues tool
• Navigate webpage layers, z-index, and DOM using the 3D View tool
• Inspect animations
• Debug Progressive Web Apps (PWAs)
• Inspect network activity

Emulation and Testing

How-To Guide

• Emulate mobile devices (Device Emulation)
• Accessibility-testing features
• Emulate dark or light schemes in the rendered page
• Test keyboard support using the Source Order Viewer
• Force print preview mode
• Emulate vision deficiencies
• Simulate reduced motion

JavaScript and performance

How-To Guide

• Run JavaScript in the Console
• Fix JavaScript errors that are reported in the Console
• Sources tool overview
• JavaScript debugging features
• Find unused JavaScript and CSS code with the Coverage tool
• Fix memory problems
• Debug DOM memory leaks by using the Detached Elements tool
• Understand security issues using the Security tool
• Troubleshooting common performance issues

Reference

Reference

• Keyboard shortcuts
• CSS features reference
• Console features reference
• Console object API Reference

How-To Guide

• Performance features reference

sample

• Sample code for DevTools