Browser Developer Tools
Learn how browser Developer Tools help you inspect, test, debug, and understand JavaScript code.
What are Browser Developer Tools?
Browser Developer Tools, commonly called DevTools, are built-in tools available in modern web browsers.
Developers use them to inspect HTML and CSS, run JavaScript, view console messages, find errors, and debug web applications.
Developer tools are commonly used while writing, testing, and debugging web applications.
How to Open Developer Tools
On Windows, you can open Developer Tools using these common keyboard shortcuts.
Important Developer Tools Panels
Elements / Inspector
Inspect HTML elements and view the CSS styles applied to the page.
Console
Run JavaScript commands and view console messages and errors.
Sources / Debugger
Open JavaScript files, use breakpoints, and inspect variables.
Network
Inspect requests made by the web page and review their responses.
Simple DevTools Workflow
JavaScript Console
The Console is one of the most useful DevTools panels for JavaScript developers. The console.log() method can be used to display information while testing code.
Example 1: Console.log()
console.log("Welcome to CIIT Training Institute ❤️🧑🎓.....!");
console.log("Course: JavaScript");
console.log("JavaScript is working successfully.");Output
Course: JavaScript
JavaScript is working successfully.
JavaScript Debugger
The Debugger helps developers pause JavaScript execution and inspect what is happening inside a program.
Breakpoint
A breakpoint pauses the program at a selected point so you can inspect variables and understand the execution flow.
Example 2: Debugger
const institute = "CIIT Training Institute";
const student = "Samadhan";
const marks = 85;
console.log("Institute:", institute);
console.log("Student:", student);
debugger;
console.log("Marks:", marks);
console.log("Debugging practice completed ❤️🧑🎓.....!");Output
Student: Samadhan
Marks: 85
Debugging practice completed ❤️🧑🎓.....!
Practical Steps
Open Your Web Page
Open the JavaScript application in your browser.
Open DevTools
Press F12 or Ctrl + Shift + I.
Open Console
Select Console and run JavaScript commands or inspect messages.
Debug Your Code
Use Sources, breakpoints, and the Console to understand your code.
CIIT Training Institute Practice
Use the browser Console while learning JavaScript with CIIT Training Institute.
Practice Commands
2 + 3
"CIIT" + " Training Institute"
console.log("Hello CIIT!");
Summary
Browser Developer Tools help developers inspect, test, and debug web applications. The Console is useful for JavaScript messages and errors, while Sources or Debugger helps developers inspect execution and variables.