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

14

Upload: geoffrey-shields

Post on 18-Jan-2018

225 views

Category:

Documents


0 download

DESCRIPTION

F12

TRANSCRIPT

Page 1: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10
Page 2: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

Andy Sterland@AndySterland | [email protected] Program Manager, Visual Studio, Web Diagnostics

What’s new in F12 for Project Spartan

3-638

Microsoft Edge

Page 3: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

F12

Page 4: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

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

F12 Focus for Win10

Page 5: 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

Page 6: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

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

Page 7: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

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…

Page 8: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10
Page 9: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

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 10: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

o javascript editingo css editing

o cookie inspectiono local and session storage

Adding experimental features

Page 11: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

It’ll look something like this…

Page 12: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

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

Join in and help build better tools for you

Page 13: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

?QUESTIONS

Page 14: Microsoft Edge F12 Use Microsoft Edge to finish turning F12 around and get her going in the right direction F12 Focus for Win10

© 2015 Microsoft Corporation. All rights reserved.