Browser Developer Tools

Browser Developer Tools

What is a browser?  The software which is used to retrieve information on the World Wide Web is known as a web browser or often called as a browser. When a user places a request for any specific information from any website, the browser fetches the necessary data from the server and displays it on your screen, in other words, it is an application that helps in retrieving, presenting, and movement of data.

Browser developer tools –as the name suggest the tools used to develop, enhance and upgrade the web pages are known as browser developer tools.

Every browser has an inbuilt developer tool which performs a lot of work, from inspecting currently-loaded HTML, CSS, JavaScript, and the time taken to load a requested page.

Commonly used Developer Tools:

Chrome Developer Tools

Firebug for Mozilla Firefox

Internet Explorer Developer Tools –F12 Tools

Popular Java Script Tools

There developer tools are categorized mainly in four categories, which help the developers to edit pages on-the-fly and diagnose problems quickly, which ultimately helps better websites.

The listed is the important panels which are most commonly used are HTML and the DOM, Web page assets, resources and network information, Profiling and auditing, JavaScript debugging

HTML and the DOM

HTML and DOM viewer and editor is included in almost all the web development tools. tools allow the user to see the page in the same way the browser see the page, i.e by using the tool you can see the raw HTML, raw CSS styles, and the DOM (Document  object model) and can make changes In addition to selecting and editing, the HTML elements panels will usually also display properties of the DOM object, such as display dimension, and CSS properties.

Web page assets, resources and network information

When a web page is loaded it requires content in the form of images, scripts, font and other external files. Web developments tools allow developers to inspect ensure that all the contents of the web page is uploaded and downloaded as expected. When you reload the page you can see the changes in network logs.

The web development tools also allow developers to view the source file and edit the same; the changes made in the file are immediately reflected in the web browser.

Web development tools also allow developers to view information about the network usage, such as viewing that what is the downloading and uploading time.

Console

The console helps the developers to view and analyze the HTML errors for a selected web page, to conduct the debugging, and to check the DOM.

Profiling and auditing

 

It helps the developers to check and capture the performance of a web application; with the help of the panel the developers can improve the performance of their scripts.

The Auditing features may provide suggestions, to the developers after analysing a web page, for optimizations to decrease page load time and increase responsiveness. Web development and tools also provide features which keeps record of the time it takes to send and receive a web page , memory usage, and the types of events which are taking place These features allow developers to enhance the features of webpage

JavaScript debugging

JavaScript is commonly used in web browsers. Web development tools commonly include a panel to debug scripts by allowing developers to add watch expressions, breakpoints, view the call stack, and pause, step over, step into, and step out of functions while debugging JavaScript.

A JavaScript console is commonly included. The consoles allow developers to type in JavaScript commands and call functions, or view errors that may have been encountered during the execution of a script

All the modern web browsers include a powerful suite of developers tools, which help the developers to do a variety of things, from inspecting the currently displayed page (HTML, CSS, and JavaScript), and making your web page better. It also helps the user in optimising the page load time of web pages.

For more details visit

 http://skillbakery.com/courses/browser-developer-tools.html