Topic 5 of 37
Running Code in Browser Console
Overview
The browser console is your primary debugging environment. It provides a REPL (Read-Eval-Print Loop) where you can test JS code instantly without setting up a file. It is connected to the DOM, making it perfect for UI testing.
Syntax
Beyond basic logs, the console provides tools for formatting and structured data viewing.
Console Methods
javascript
console.log("Basic log");
console.warn("Warning message");
console.error("Error message");
console.table([{name: "Alice", age: 25}, {name: "Bob", age: 30}]);Common Pitfalls
- Leaving console.log statements in production code, which can leak sensitive data or impact performance.
Interview Tips
- Know how to use console.time() and console.timeEnd() for basic performance profiling.
Real-World Example
Modifying the DOM live to test a hypothesis before writing actual code.
example
javascript
// Paste this in browser console to hide all images
document.querySelectorAll('img').forEach(img => img.style.display = 'none');