f12 tools in edge
TRANSCRIPT
![Page 1: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/1.jpg)
![Page 2: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/2.jpg)
Kris van der Mast
www.krisvandermast.com
@KvdM
Since 2007
![Page 3: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/3.jpg)
TESTING WEB APPS WITH REMOTE IE AND F12 DEVELOPER TOOLS
![Page 4: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/4.jpg)
Agenda• Remote IE• IEdge• Demos• Questions
![Page 5: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/5.jpg)
Remote IE• http://dev.modern.ie/tools/vms/• https://remote.modern.ie/subscribe
![Page 6: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/6.jpg)
IE
![Page 7: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/7.jpg)
Spartan
![Page 8: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/8.jpg)
Edge
![Page 9: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/9.jpg)
Fantasy vs reality We’re all awesomedevelopers…But even then wecan use a helping hand…
![Page 10: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/10.jpg)
Browser Tools – A lot in common
DOM InspectionStyle TracingComputed PropertiesLayout ViewColor PickerDebuggerBreakpointsWatchesConsoleConsole API
CPU profilingStyle profilingNetwork tracingHeap snapshotsSnapshot diffingAuto completionInspect elementPretty printing
So, so many tools in the box*Not to scale or remotely mathematically sound!
The 80%Case
![Page 11: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/11.jpg)
Browser Tools – A little unique
TracePointsStatement level JSJust my codeFind references
Set next statementTrack changesTypeScript coloring
3D viewWeb audio editorAnimationShader editor
Reflow event loggingResponsive design modeLots of extensions
Network throttlingDevice emulationPseudo elementsEdit and continue
Paint correlationCSS animationAnimation scrubbing
More…
More…
More…
![Page 12: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/12.jpg)
The Road Ahead
Tools for IE11 on Win10+ are frozen
Full steam ahead for Microsoft Edge
![Page 13: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/13.jpg)
Demos
![Page 14: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/14.jpg)
New async operation “onreadystatechange” Global Codefetch_onClick
New async operation “addEventListner” for DOMContentLoadedGlobal Codeinit
New async operation “addEventListener” for clickGlobal CodeonDOMContentLoaded
Finally we break in the debugger…
![Page 15: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/15.jpg)
Agenda• Remote IE• IEdge• Demos• Questions
![Page 16: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/16.jpg)
• uservoice.modern.ie• connect.microsoft.com• github.com/microsoft• @MSEdgeDevTools• Send a smile
Give feedback to Microsoft!
![Page 17: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/17.jpg)
Questions?
![Page 18: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/18.jpg)
Your feedback is important!Scan the QR Code and let us know via the TechDays App.
Laat ons weten wat u van de sessie vindt via de TechDays App!Scan de QR Code.
Bent u al lid van de Microsoft Virtual Academy?! Op MVA kunt u altijd iets nieuws leren over de laatste technologie van Microsoft. Meld u vandaag aan op de MVA Stand. MVA biedt 7/24 gratis online training on-demand voor IT-Professionals en Ontwikkelaars.
![Page 19: F12 tools in Edge](https://reader035.vdocuments.net/reader035/viewer/2022062316/587d7add1a28ab634b8b634b/html5/thumbnails/19.jpg)