Advanced front end debugging with ms edge and ms tools
Download as PPTX, PDF2 likes503 views
The document provides an overview of advanced front-end debugging techniques using Microsoft Edge and its development tools. Key features discussed include editing HTML/CSS, console debugging, networking insights, performance profiling, and memory management. Additionally, it highlights the use of the remote debugging tool Vorlon, emphasizing its cross-platform compatibility and extensibility.
Advanced front end debugging with ms edge and ms tools
- 1. Advanced Front-End Debugging with MS EDGE & MS TOOLS LOVE2DEV.COM
- 2. My Bio Microsoft MVP ASP Insider Edge User Agent Web Developer 25 years Author & Speaker @ChrisLove Love2Dev.com
- 4. GOALS How to use MS Edge F12 tools New & Unique Edge Features Vorlon LOVE2DEV.COM
- 6. DOM Explorer
- 7. DOM Explorer LOVE2DEV.COM • Edit HTML • Edit CSS • Inspect Element Event Binding • Inspect Accessibility Tree
- 9. 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
- 11. Debugging • Breakpoints • Event Debugging • Time Travel Debugging • Watch & Call Stack • Web Workers LOVE2DEV.COM
- 13. Networking • Page Waterfall • Detailed Network Timing Data & Visualization • Header & Body Inspection LOVE2DEV.COM
- 15. Performance • UI Responsiveness • Identify CPU Intensive Code • Identify Frame Rate Issues • JavaScript Profiling • Identify Code Bottlenecks LOVE2DEV.COM
- 17. Memory Profiling • Timeline to Identify Memory Pressure Issues • Track Down Memory Leaks LOVE2DEV.COM
- 19. Emulation • Screen Resolutions • User Agent String • GPS LOVE2DEV.COM
- 21. Vorlon Features • Easy Setup • Cross Platform • Multi-Device (up to 50) • Extensible
- 22. Resources • @EdgeDevTools • https://blogs.windows.com/msedgedev • https://github.com/MicrosoftEdge • Vorlon • Slack - https://slackinvorlon.azurewebsites.net/ • GitHub - https://github.com/MicrosoftDX/Vorlonjs LOVE2DEV.COM