f12 tools in edge

Kris van der Mast

www.krisvandermast.com

@KvdM

Since 2007

TESTING WEB APPS WITH REMOTE IE AND F12 DEVELOPER TOOLS

Agenda• Remote IE• IEdge• Demos• Questions

Remote IE• http://dev.modern.ie/tools/vms/• https://remote.modern.ie/subscribe

IE

Spartan

Edge

Fantasy vs reality We’re all awesomedevelopers…But even then wecan use a helping hand…

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

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…

The Road Ahead

Tools for IE11 on Win10+ are frozen

Full steam ahead for Microsoft Edge

Demos

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…

Agenda• Remote IE• IEdge• Demos• Questions

• uservoice.modern.ie• connect.microsoft.com• github.com/microsoft• @MSEdgeDevTools• Send a smile

Give feedback to Microsoft!

Questions?

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.