3-638.pptx

3-638.pptx

1.0x

3-638.pptx

Created 2 years ago

Duration 0:00:00
lesson view count 19
3-638.pptx
Select the file type you wish to download
Slide Content
  1. Andy Sterland

    Slide 1 - Andy Sterland

    • @AndySterland | Andy.Sterland@microsoft.com
    • Senior Program Manager, Visual Studio, Web Diagnostics
    • What’s new in F12 for Project Spartan
    • 3-638
    • Microsoft Edge
    • //build/ content is being presented by Microsoft Office Mix The video for this session will be available shortly
  2. F12

    Slide 2 - F12

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

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

    • F12 Focus for Win10
  4. The Road Ahead

    Slide 4 - The Road Ahead

    • Tools for IE11 on Win10+ are frozen
    • Full steam ahead for Microsoft Edge
  5. Browser Tools – A lot in common

    Slide 5 - Browser Tools – A lot in common

    • DOM Inspection
    • Style Tracing
    • Computed Properties
    • Layout View
    • Color Picker
    • Debugger
    • Breakpoints
    • Watches
    • Console
    • Console API
    • CPU profiling
    • Style profiling
    • Network tracing
    • Heap snapshots
    • Snapshot diffing
    • Auto completion
    • Inspect element
    • Pretty printing
    • So, so many tools in the tool box
    • *Not to scale or remotely mathematically sound!
    • The 80%Case
  6. Slide 6

    • Browser Tools – A little unique
    • TracePoints
    • Statement level JS
    • Just my code
    • Find references
    • Set next statement
    • Track changes
    • TypeScript colouring
    • 3D view
    • Web audio editor
    • Animation
    • Shader editor
    • Reflow event logging
    • Responsive design mode
    • Lots of extensions
    • Network throttling
    • Device emulation
    • Pseudo elements
    • Edit and continue
    • Paint correlation
    • CSS animation
    • Animation scrubbing
    • More…
    • More…
    • More…
  7. New async operation “onreadystatechange”

    Slide 8 - New async operation “onreadystatechange”

    • Global Code
    • fetch_onClick
    • New async operation “addEventListner” for DOMContentLoaded
    • Global Code
    • init
    • New async operation “addEventListener” for click
    • Global Code
    • onDOMContentLoaded
    • Finally we break in the debugger…
  8. javascript editing

    Slide 9 - javascript editing

    • css editing
    • cookie inspection
    • local and session storage
    • Adding experimental features
  9. It’ll look something like this…

    Slide 10 - It’ll look something like this…

  10. uservoice.modern.ie

    Slide 11 - uservoice.modern.ie

    • connect.microsoft.com
    • github.com/microsoft
    • @IEDevTools
    • Join in and help build better tools for you
  11. ?

    Slide 12 - ?

    • QUESTIONS