Developer Tools
Internet Explorer developer tools available in Microsoft Internet Explorer(IE) and Microsoft Edge work like web development tools. These developer tools can help to design and debug a web page. Developers can test a web page, maintain its compatibility and fix errors. IE developer tools are also known as F12 developer tools in Windows 10. The UI(User Interface) and features of Internet Explorer 11 Developer Tools have changed substantially. Earlier versions of IE were not very developer friendly but huge improvement is visible in the new versions. IE developer tools now consist of a lot of features identical to browsers such as Chrome and Firefox along with some unique ones which make developing and debugging an easier task.
DOM Explorer
Document Object Model(DOM) Explorer is a feature that allows you to dynamically change the content, style, and structure of HTML page temporarily. For example, the title or text of the webpage can be changed, but JavaScript code cannot be changed and sub-parts like jsquery cannot be accessed. Also, it allows you to view the basic HTML code of a webpage. By default, DOM Explorer opens up on pressing F12 but while exploring other tools you can switch back to it by using Ctrl+1 or by just clicking on the DOM Explorer icon. It also opens up on right clicking on any element of a webpage and selecting “Inspect Element” option.
Console
The console is used to record data related to a webpage, such as network requests, JavaScript, and security errors. Ad-hoc testing and interactional debugging can also be done from the console. Usually, the Console feature is used to test a webpage using JavaScript. This feature is useful as it has the ability to enter commands which can further be checked for an error by developer tools. As it acts as a log, website errors can also be identified using it. As the code runs, you can post standard status codes and errors along with messages containing information. From the Console API calls, you can create customized debug logs. To inspect current return values of key variables and functions, you can provide a command line and interactive tree view.
Debugger
The debugger provides full debugging controls over webpages which makes it the most important developer tool in IE. Web components can be selected individually for debugging but no permanent modifications can be done. The Debugger can be opened by pressing Ctrl+3 after pressing F12 or by just clicking on Debugger icon in developer tools. You can browse and search the code from loaded source files and control execution flow as you go through the code. You will be able to manage page storage resources, set breakpoints and live edit the code while it runs. Local variables can be tracked and edited while debugging. A debugging session can be started by initiating a break in code, setting a breakpoint or by setting exception behavior.
Network
A developer can know the delay, response time and loading time of every element of a webpage using Network tool which makes it another important feature. The incoming traffic can be inspected using this tool. You can view headers, JSON data, and XML data from here. It also helps to debug Ajax requests and to find large files that could be compressed. The element could be an image, a JavaScript file or any other thing on the webpage. The feature should be enabled before reloading or clicking a link you want to analyze. This helps developers, as causes for delay in rendering or loading time of a web page can be identified. Network feature can be enabled using the Network icon or by pressing Ctrl+4 after opening developer tools.
UI Responsiveness
This UI Responsiveness tool allows you to measure page performance relative to layout rendering. You can calculate the execution timings of components of your webpage. You will be able to track the location where most of the CPU cycles are being spent to run the webpage and to output the visual effects to users. This tool helps to find bottlenecks associated with timers or heavy DOM elements. You can get a stepwise analysis of the process causing a delay in page execution. In order to use this tool, you need to record a profile for a user scenario which needs analysis. After you stop the profiling, you will see CPU utilization, visual throughput, and timeline details. The CPU utilization graph reports the processing resources such as scripting, garbage collection, rendering, etc. that are consumed by browser subsystems to run the webpage. The visual throughput graph shows the estimated frames per second during profiling scenario. The timeline details pane provides the full analysis of events that occurred in the various subsystems of the browser.
Profiler
The Profiler tool in IE lets you analyze the execution of JavaScript code running on the browser. In, the profiler you need to begin and stop profiling to get reports of functions, the number of times they were run, and time for each function run. When you open the profiler tab, nothing will be displayed. You will have to start the profiling before running the code you want to include. When you will stop the profiling, you will get a detailed report consisting of function, count(number of times function was run), inclusive time, exclusive time, function type, URL, etc. This report can be saved in CSV format.
Memory
A major performance issue may occur due to a memory problem, which can make your webpage less responsive and laggy as time passes. Memory holes can be identified using the Memory tool in IE. A heap snapshot shows the size of the JavaScript heap, at a particular instance of time at which the snapshot was taken and the number of objects allocated along with the screenshot of the page at that time. Taking snapshots can be continued while going through a user scenario that requires analysis and a summary tile will be created. You can distinguish the heap snapshots at different phases of code execution. Filters are automatically applied to figure out the elements which are really impactful.
Emulation
Emulation is an IE tool that helps with the simulation of a lot of devices, screen sizes, resolutions, and browsers. You can choose between a desktop or a windows phone. You can also specify the browsers like Chrome, Firefox, etc for simulation. An option to set the screen size is also present along with a portrait or landscape view option. If the site to be worked upon uses Geolocation API, customized geolocations can be tested for the website by entering latitude and longitude of any location. Emulation settings can be reset by pressing Ctrl+Shift+L.
2 comments