advanced front end debugging with ms edge and ms tools
TRANSCRIPT
![Page 1: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/1.jpg)
Advanced Front-End Debugging
withMS EDGE & MS TOOLS
LOVE2DEV.COM
![Page 2: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/2.jpg)
My BioMicrosoft MVPASP Insider Edge User AgentWeb Developer 25 yearsAuthor & Speaker
@ChrisLoveLove2Dev.com
![Page 3: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/3.jpg)
Source Codehttp://
GitHub.com/docluv
Slide Deck http://slideshare.net/docluv/presentations
LOVE2DEV.COM
![Page 4: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/4.jpg)
LOVE2DEV.COM
GOALS
How to use MS Edge F12 toolsNew & Unique Edge FeaturesVorlon
![Page 5: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/5.jpg)
MS Edge Tools
LOVE2DEV.COM
![Page 6: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/6.jpg)
DOM Explorer
![Page 7: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/7.jpg)
DOM Explorer
LOVE2DEV.COM
• Edit HTML• Edit CSS• Inspect Element Event Binding• Inspect Accessibility Tree
![Page 8: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/8.jpg)
Console
LOVE2DEV.COM
![Page 9: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/9.jpg)
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
![Page 10: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/10.jpg)
Debugging
LOVE2DEV.COM
![Page 11: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/11.jpg)
Debugging• Breakpoints• Event Debugging• Time Travel Debugging•Watch & Call Stack•Web Workers
LOVE2DEV.COM
![Page 12: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/12.jpg)
Networking
LOVE2DEV.COM
![Page 13: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/13.jpg)
Networking• Page Waterfall•Detailed Network Timing Data & Visualization•Header & Body Inspection
LOVE2DEV.COM
![Page 14: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/14.jpg)
Performance
LOVE2DEV.COM
![Page 15: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/15.jpg)
Performance•UI Responsiveness• Identify CPU Intensive Code• Identify Frame Rate Issues
• JavaScript Profiling• Identify Code Bottlenecks
LOVE2DEV.COM
![Page 16: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/16.jpg)
Memory Profiling
LOVE2DEV.COM
![Page 17: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/17.jpg)
Memory Profiling• Timeline to Identify Memory Pressure Issues• Track Down Memory Leaks
LOVE2DEV.COM
![Page 18: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/18.jpg)
Emulation
LOVE2DEV.COM
![Page 19: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/19.jpg)
Emulation• Screen Resolutions•User Agent String•GPS
LOVE2DEV.COM
![Page 20: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/20.jpg)
LOVE2DEV.COM
Remote Debugging Tool
![Page 21: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/21.jpg)
Vorlon Features• Easy Setup• Cross Platform•Multi-Device (up to 50)• Extensible
![Page 22: Advanced front end debugging with ms edge and ms tools](https://reader035.vdocuments.mx/reader035/viewer/2022070603/586fd3d91a28ab18428b463b/html5/thumbnails/22.jpg)
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