Wednesday, February 26, 2014

Internet Explorer 11 developer toolbar features

Recently Microsoft has launched new developer tool bar with Internet Explorer 11 with some cool features. In this post we are going to learn about the new features of Internet Explorer Developer toolbar. Microsoft has rewritten whole toolbar and now it loaded with bunch of features.

DOM Explorer:

When you launch Internet Explorer Developer toolbar with F12 by default it will load DOM Explorer and this will have all html and style sheet. You can select any element and modify or change style sheet of live site.

dom-explorer-toolbar-internet-explorer

You modify the existing HTML on left side of pane and you add/modify the style sheet of selected element on the right side of the pane. There is also find functionality given to find any specific element.

It also provides intellisense for modifying and changing HTML and style sheet.

intellisense-html-css-developer-toolbar


Console tool:

Second one on left side is console tool where you can have whole history running JavaScript with console.log statement

console-log-toolbar-internet-explorer

Here it will show whole errors and exception related to client side code executed for this page.

Debugger tool:

This tool is used for the debugging the your client side code when application running and you can easily debug your code with the help of this tool.

Here you can set your breakpoints just like in your IDE and easily debug loop or any client code.You can also debug the compressed JavaScript here. It’s a great way to debug and find errors.

debugger-tool-internet-explorer-developer-tools

Network tool:

Network tool is used for the performance measurement for a web page. It will give you a details of any request network involved in your web page loading. It will tell request completion time in mili seconds. Here you can also find amount data and bandwidth being transferred when your web page loads.

Network-tool-internet-explorer-developer-toolbar

The UI Responsiveness tool:

Next is UI responsiveness tool where you can find if your web page is running slow then what happened which part is consumed more CPU .It will help you identify different source CPU utilization which causes your web page to load slowly in browser.

ui-responsiveness-tool-internet-explorer
With help of this tool you can optimize your web pages performance via changing part/code which causes more CPU Utilization.

Profiler tool:

Profiler tool is used for measuring JavaScript performance. It will show you number of function called during profiling session. From here you can isolate JavaScript which makes your web page slow.

profiler-tool-internet-explorer-toolbar-developer

Memory tool:

With the help of this Memory tool you can easily find the memory leak issues of your web page. The memory tool track memory usage of web page and help you identify where more memory is consumed and where memory leak is happening.

memory-usage-memory-tool-internet-explorer-developer-toolbar

Here is also allows you to take heap snapshot at regular interval and then can analyse via clicking on it.

memory-usage-memory-tool-internet-explorer-developer-toolbar2

With the help of this you can easily identify memory leaks in your code.

Emulation tool:

The emulation tools help you testing your web page on different screen size and hardware's. You can easily emulate different screen size and emulations.

emulation-tool-internet-explorer-developer-toolbar

That’s it. All this awesome features which is provided by developer tool for internet explorer 11. It will definitely going to make your life very easy. Highly recommend this.

Stay tuned for more.. 

Share:

0 comments:

Post a Comment

Your feedback is very important to me. Please provide your feedback via putting comments.

About Me
My Photo

Full Stack Developer,Blogger,Microsoft Mvp, Mentor, Life long learner, 10+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC,Web Forms,C#,AngularJs,Golang
Mvp profile
Subscribe to my blog

Enter your email address:

Follow us on facebook
Blog Archive
Total Pageviews