際際滷

際際滷Share a Scribd company logo

F12 tools in Edge

Download as PPTX, PDF
Kris van der Mast
Kris van der Mast

This document discusses testing web apps with Remote IE and F12 Developer Tools. It provides an overview of using Remote IE to test websites on different versions of Internet Explorer. It demonstrates how to use the F12 Developer Tools to debug websites by setting breakpoints, inspecting elements, and profiling performance. The document notes that while tools between browsers share many similarities, they also have some unique capabilities. It concludes by encouraging providing feedback to Microsoft on their browser tools and promoting the Microsoft Virtual Academy for additional learning resources.

1 of 19
Download to read offline
F12 tools in Edge
Kris van der Mast www.krisvandermast.com @KvdM
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 Were all awesome developers But even then we can use a helping hand
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 box *Not to scale or remotely mathematically sound! The 80% Case
Browser Tools A little unique TracePoints Statement level JS Just my code Find references Set next statement Track changes TypeScript coloring 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
The Road Ahead Tools for IE11 on Win10+ are frozen Full steam ahead for Microsoft Edge
Demos
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
Agenda Remote IE IEdge Demos Questions
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.
F12 tools in Edge

More Related Content

F12 tools in Edge

  • 2. Kris van der Mast www.krisvandermast.com @KvdM
  • 3. TESTING WEB APPS WITH REMOTE IE AND F12 DEVELOPER TOOLS
  • 4. Agenda Remote IE IEdge Demos Questions
  • 5. Remote IE http://dev.modern.ie/tools/vms/ https://remote.modern.ie/subscribe
  • 6. IE
  • 9. Fantasy vs reality Were all awesome developers But even then we can use a helping hand
  • 10. 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 box *Not to scale or remotely mathematically sound! The 80% Case
  • 11. Browser Tools A little unique TracePoints Statement level JS Just my code Find references Set next statement Track changes TypeScript coloring 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
  • 12. The Road Ahead Tools for IE11 on Win10+ are frozen Full steam ahead for Microsoft Edge
  • 13. Demos
  • 14. 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
  • 15. Agenda Remote IE IEdge Demos Questions
  • 16. Give feedback to Microsoft!
  • 18. 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.