Internet Explorer 11 Developer Tools, F12, Just Got Nicer (Again)

Raise your hand if you’ve used the F12 tools before?

agenda 1.Hello, World! 2.Demo of the new features 3.F12, IE, and Windows Phone Q/A

Hello, world!

New features in F12

just my code source maps remembering state shortcut keys console logging and execution improvements memory tool – snapshots dom explorer – changebars dom explorer – pseudo states computed styles profiling improvements

just my code Spend time debugging only your code and not code that comes from a library. This also applies to exceptions.

source maps F12 supports the Source Maps V3 spec Often times, the code you write isn’t what gets generated and referred to by the browser (ie: TypeScript, CoffeeScript, etc.) This feature allows you to map the code you wrote to what is happening in your browser. If you use eval, you can de-anonymize it using this feature as well.

remembering state If you close the browser while F12 is up, we remember where you left off. The debugger keeps track of your state so when you close F12, it’s the same when you bring it back up Watches, breakpoints, open files, pretty printed files, source map, and JMC settings

shortcut keys When broken in the debugger, use ctrl + shift + F5 to abort and refresh the page. Move between tools with ctrl + [ or ctrl + ] Don’t forget ctrl + # to jump to a tool (ie: DOM Explorer is ctrl + 1)

console logging A bunch of awesome improvements: You can log an object and inspect everything inside it You can log multiple objects and inspect them Simplified logging strings (aka the printf syntax) Log messages before F12 is open

console execution improvements Easy way to pick iframes to execute against New console cmd $_ for last expression Auto complete now includes locals

memory tool improvements Create multiple snapshots and see where memory growth is happening The Scope filter helps you identify “left over” objects. Other improvements: Function source nav Gridlines Additional settings options Show in dominators

dom explorer - changebars Keep track of all the CSS changes you make through the tools New “Changes” tab shows all the changes Easily discard changes and revert the item back to it’s original state

dom explorer – pseudo states Support for forcing :hover and :visited Now, you can easily inspect and modify the hover and visited states without having to do any crazy gymnastics.

Windows Phone 8.1

Conclusion