Console
The console is used for debugging JavaScript present in the source code of the webpage. The console window act as our debug window that allows us to handle JavaScript that isn’t working as expected. It allows you to either run a code block or single lines of JavaScript against the page which is currently loaded in the browser. The console reports the errors which are encountered by the browser as it tries to execute the code.
- The console recognized the correct syntax and generated an alert message corresponding to the JavaScript Code.
- It also recognized type errors and gave us an error message for the wrong syntax.
Application:
- Viewing logged messages
- Running JavaScript
- Preserve Log
- Group similar elements
- Log XmlHttpRequests
- Preserving live expression
Browser Developer Tools
Every web-developer needs some basic set of tools for understanding the underlying structure of the code and enables us to inspect the web content. Developer tools are built directly into the browser. These are the tools that are browser dependent. Most of these tools are common among various browsers and do a range of things, from inspecting elements of a currently-loaded HTML, CSS, and JavaScript. With developer tools, we can directly interact with the source code that is fetched into the client side of our system. This article will explain such basic functionality of the browser’s devtools.
Across all browsers, the basic functionality of the developer tools remains the same, only naming conventions and terminologies changes. In this article, we would be focusing the majority of sections on two popular browsers Firefox and Chrome.