microsoft edge f12 use microsoft edge to finish turning f12 around and get her going in the right...

Andy Sterland@AndySterland | Andy.Sterland@microsoft.comSenior Program Manager, Visual Studio, Web Diagnostics

What’s new in F12 for Project Spartan

3-638

Microsoft Edge

F12

Use Microsoft Edge to finish turning F12 around and get her going in the right direction

F12 Focus for Win10

The Road AheadTools for IE11 on Win10+ are frozen

Full steam ahead for Microsoft Edge

Browser Tools – A lot in commonDOM InspectionStyle TracingComputed PropertiesLayout ViewColor PickerDebuggerBreakpointsWatchesConsoleConsole API

CPU profilingStyle profilingNetwork tracingHeap snapshotsSnapshot diffingAuto completionInspect elementPretty printing

So, so many tools in the tool 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 colouring

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…

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…

o javascript editingo css editing

o cookie inspectiono local and session storage

Adding experimental features

It’ll look something like this…

• uservoice.modern.ie• connect.microsoft.com• github.com/microsoft• @IEDevTools

Join in and help build better tools for you

?QUESTIONS

© 2015 Microsoft Corporation. All rights reserved.