Advanced Front-End Debugging

withMS EDGE & MS TOOLS

LOVE2DEV.COM

My BioMicrosoft MVPASP Insider Edge User AgentWeb Developer 25 yearsAuthor & Speaker

@ChrisLoveLove2Dev.com

Source Codehttp://

GitHub.com/docluv

Slide Deck http://slideshare.net/docluv/presentations

LOVE2DEV.COM

LOVE2DEV.COM

GOALS

How to use MS Edge F12 toolsNew & Unique Edge FeaturesVorlon

MS Edge Tools

LOVE2DEV.COM

DOM Explorer

DOM Explorer

LOVE2DEV.COM

• Edit HTML• Edit CSS• Inspect Element Event Binding• Inspect Accessibility Tree

Console

LOVE2DEV.COM

Console• Error, Warning, Information, More Messages• Change variable values or inject code into a live site with the Console’s command line• Single & Multiline Commands

LOVE2DEV.COM

Debugging

LOVE2DEV.COM

Debugging• Breakpoints• Event Debugging• Time Travel Debugging•Watch & Call Stack•Web Workers

LOVE2DEV.COM

Networking

LOVE2DEV.COM

Networking• Page Waterfall•Detailed Network Timing Data & Visualization•Header & Body Inspection

LOVE2DEV.COM

Performance

LOVE2DEV.COM

Performance•UI Responsiveness• Identify CPU Intensive Code• Identify Frame Rate Issues

• JavaScript Profiling• Identify Code Bottlenecks

LOVE2DEV.COM

Memory Profiling

LOVE2DEV.COM

Memory Profiling• Timeline to Identify Memory Pressure Issues• Track Down Memory Leaks

LOVE2DEV.COM

Emulation

LOVE2DEV.COM

Emulation• Screen Resolutions•User Agent String•GPS

LOVE2DEV.COM

LOVE2DEV.COM

Remote Debugging Tool

Vorlon Features• Easy Setup• Cross Platform•Multi-Device (up to 50)• Extensible

LOVE2DEV.COM

Resources•@EdgeDevTools• https://blogs.windows.com/msedgedev• https://github.com/MicrosoftEdge

• Vorlon• Slack - https://slackinvorlon.azurewebsites.net/• GitHub - https://github.com/MicrosoftDX/Vorlonjs