Meet the new F12!

Meet the new F12!

Welcome to the new F12 Developer Tools!

IE11's F12 Developer Tools have introduced some new features for developers! This demo will help you get acquainted with the new F12.

Screenshot of the new F12 Developer Tools

To follow along,
  1. First make sure you are in the desktop IE11 browser
  2. Open up the tools by pressing the 'F12' button on your keyboard. Alternately, click on IE11's Tools (Alt+X) menu and select F12 Developer Tools.
  3. Click , the icon in the top left of this demo, to learn about the available F12 features.

Welcome to the DOM Explorer!

The DOM Explorer allows you to explore your page's DOM! To follow along in IE11's F12 Developer Tools, make sure you've navigated to the DOM Explorer in the tools.

You can:
  • View DOM hierarchy
  • Understand element styles
  • Determine computed box model information
  • See applicable event handlers

When you're done, click the Next button to continue. Console icon () to go to the next tool.


What event handlers are on this circle?
Hint:


Welcome to the Console!

With the new F12, we've made numerous improvements to the console and expanded the console API:
  • Autocomplete
  • Multiline input
  • Console available in every tab
  • Timer API methods: time and timeEnd
  • Listing API methods: dir and dirxml
  • Counting API methods: count and countEnd
  • Tracing API method: trace
  • Grouping API methods: group, groupCollapsed, and groupEnd
  • Selector methods: $, $$

When you're done, click the Next button to continue. Debugger icon () to go to the next tool.



Open the Console

You can use the console by opening the F12 Developer Tools (if they're not open, hit F12). In the tools, click the console tab. Alternatively, you can use the console overlay in any of the tool windows by clicking the console overlay icon in the top right.

Welcome to the Debugger tool!

We've made many improvements to the debugger to help you dive into the code on your website and find and debug issues you may find.

When you're done, click the Next button to continue. Network icon () to go to the next tool.



Open debugger.js to begin debugging.
Hint:

Welcome to the Network tool!

The Network tool lets you capture and examine the network traffic on your website.

When you're done, click the Next button to continue. UI Responsiveness icon ()to go to the next tool.



Start capturing and press the "random image" button a couple times, then stop profiling.


Welcome to the UI Responsiveness tool!

The UI Responsiveness tool enables you to understand and debug the performance of your webpage. Using the tool, you can glean insight into the breakdown of CPU time being spent on your page.

When you're done, click the Next button to continue. Profiler icon ()to go to the next tool.



  1. Start taking a trace by clicking on the green start button in the UI Responsiveness tool
  2. Click and watch the box below animate
  3. Wait for the animation to stop
  4. Stop the trace by clicking on the red stop button

Great! Take a look at your trace.
  • There are a couple triangles at the top indicating calls to window.performance.mark() so you have a reference point for what's going on. What elements need to have their layout recalculated when the animation begins?
  • The graph will show you a breakdown of your CPU use. In this simple animation, where is most of your time being spent? As you can easily see, the box-shadow animations spend a fair amount of time rendering.

Welcome to the Script Profiler tool!

The Script Profiler tool lets you capture and examine the various function calls made by a site and identify possible issues.

When you're done, click the Next button to continue. Memory icon () to go to the next tool.



Start profiling by clicking on the green start button and refresh the page. Try profiling the 'random image' and 'start colors' buttons below. When you are done, click on the red stop button to generate the report.




Welcome to the Memory tool!

The memory tool can be used to understand DOM memory usage and find memory leaks.

When you're done, click the Next button to continue. Emulation icon () to go to the next tool.



There's an element on this page taking up more memory than the other elements. What's its ID?
Hint:


Welcome to the Emulation tool!

The Emulation tool lets you view how your page will look on other devices and how your page will react to different settings. Please allow the browser to access your location for this demo when prompted.


To get started, try seeing what this page will look like in portrait view without turning your screen. Go to custom resolutions and enter a width of 600px and height of 800px.
Hint:
Good job, you got it! Don't forget when emulating mobile devices to change the user agent string to match the device. You can take advantage of some built-in Windows Phone browser features such as text scaling and the viewport meta tag by changing the browser profile to Windows Phone.

There are more things to explore. Play around with the other settings. When you're through, tell the browser that you're at the Eiffel Tower (48.8583, 2.2945) and you're done!