![Page 1: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/1.jpg)
Sofia Event Center14-15 May 2014
Angel TodorovPrincipal Architect, Infragistics Inc.
Debugging, Profiling and Optimizing Web Apps with IE11 – F12 Developer Tools
![Page 2: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/2.jpg)
Contents• Using the DOM Explorer• Using the Console• Debugger• Analyzing network activity• Profiling – time & memory• Using the UI Responsiveness Tool • Emulating geolocation / doc modes /
orientations, etc.• Resources
![Page 3: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/3.jpg)
Using the DOM Explorer• Intellisense & auto-completion• Drag & drop DOM nodes• The “Changes” & “Events” tabs• Pseudo-class toggle (Windows 8.1) –
Hover & Visited
![Page 4: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/4.jpg)
Using the Console• Execution targets (iframes)• Console Debugging API• Intellisense autocompletion• Recording messages
![Page 5: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/5.jpg)
Debugger• Just my Code• No refresh debugging• Pretty print• Source Maps (Windows 8.1)• Tracepoints• Breakpoints changes• Tabbed scripts
![Page 6: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/6.jpg)
Analyzing Network Activity• Request timing • Network toolbar• Request/response details
![Page 7: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/7.jpg)
Profiling – time & memory• Profiler overview• Precision profiling• Inclusive & Exclusive times• Memory tool (brand new) – overview• User marks• Taking and comparing heap snapshots• Detecting memory leaks
![Page 8: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/8.jpg)
Using the UI Responsiveness Tool • Performance dashboard• The timeline view• Interpreting events (timeline details)
![Page 9: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/9.jpg)
Emulation• Document Modes• Enterprise Mode (Windows 8.1)• Display Emulation• Geolocation emulation
![Page 10: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/10.jpg)
Resources• What’s new in F12 Developer Tools:http://msdn.microsoft.com/en-us/library/ie/bg182632(v=vs.85).aspx
• Using the F12 Developer Tools:http://msdn.microsoft.com/en-us/library/ie/bg182326(v=vs.85).aspx
• MS BUILD 2014 - Internet Explorer 11’s Developer Tools, F12, Just Got Nicer (Again)
http://channel9.msdn.com/Events/Build/2014/3-580
![Page 11: Sofia Event Center 14-15 May 2014 Angel Todorov Principal Architect, Infragistics Inc. Debugging, Profiling and Optimizing Web Apps with IE11 F12 Developer](https://reader036.vdocuments.us/reader036/viewer/2022082910/5a4d1b927f8b9ab0599c1d43/html5/thumbnails/11.jpg)
Questions???Share your feedback for this particular sessionand for the overall conference experience at
http://aka.ms/intouchfor a chance to win our prizes!