You can open DevTools in several ways:
Inspect
Ctrl + Shift + I
or F12
Cmd + Option + I
Here are the most commonly used tabs/panels:
console.log
, console.error
, etc.document.querySelector
, etc.) The DOM is a programming interface for HTML and XML documents. When a browser loads a web page, it parses the HTML and creates a tree-like structure of objects that represent elements on the page. This tree is the DOM. Think of it as a live, interactive blueprint of your web page that JavaScript can read and manipulate.Console Filter Options – The Console Sidebar filter in Chrome DevTools, helps you organize and filter the types of messages shown in the Console tab — especially useful when your app logs tons of data.
🔹 Messages: Shows all messages (a combination of errors, logs, warnings, etc.). This is the default view and the most verbose.
🔹 User Messages: Only shows console.log(), console.info(), and console.debug() that were explicitly written by developers.
🔹 Errors: Shows only console.error() messages or thrown JavaScript errors.
🔹 Warnings: Shows only console.warn() messages.Typically used for non-breaking issues or potential risks.
🔹 Info: Shows only console.info() messages. Slightly less noisy than log, often used for status updates.
🔹 Verbose: Shows everything, including things that normally don’t show up like: Internal debug messages, Detailed fetch logs, Framework-level debug info, Great for in-depth debugging, but can be noisy.
🛠️ Other Powerful Features of the Console Tab
🔹 Live Expression Watch
Click + beside “Live Expression” to monitor a variable in real time.
Great for seeing values change while your app runs.
🔹 Run JS Directly
You can execute any JavaScript code in the console.
🔹 Console Commands ($0, $_, etc.)
$0 → the element currently selected in the Elements tab.
$_ → last evaluated expression result.
$1, $2, … → previously selected elements in reverse order.
$$(‘selector’) → shorthand for document.querySelectorAll()
🔹 Group and Trace Logs
console.group(‘Label’) / console.groupEnd() → organize logs
console.trace() → shows a stack trace of where a log was called
🔹 Timers
Great for profiling performance.
🔹 Clear Console
Use the ⛔ icon or Ctrl + L / Cmd + K to clear the log output.
🔹 Preserve Log
Enable this option to keep logs even after page refresh — useful for debugging page loads.
🔹 Pro Tips
Use console.table() to display arrays/objects in table format.
Use custom style
The Sources tab in Chrome DevTools, which is a powerful live code editor and debugger for JavaScript and frontend developers. Let’s break down what all those sections mean so you can use them effectively is split into 3 main parts:
📁 LEFT: Page & Workspace (File Navigator)
🧑💻 MIDDLE: Code Editor
Displays the source file you’re currently inspecting. Here’s where you can:
🛠️ RIGHT: Debugging Tools
This is where the magic of debugging happens. Let’s break each section down:
🔁 Typical Debug Workflow
main.js
or similar from the Page panelF10
, F11
, etc.)304
)The Memory tab helps you:
Heap Snapshot
Good for:
Allocation Instrumentation on Timeline
Good for:
Here’s how you’d typically use the Memory tab to find a leak:
Step 1: Take a Baseline Heap Snapshot
Step 2: Interact with the App
Step 3: Take Another Snapshot
Step 4: Look for Detached DOM Trees or Unexpected Objects
Step 5: Bonus Tips 🔧
Ctrl + Shift + M
) to simulate mobile devices and test responsiveness.Break on...
to debug DOM changes (like deletions, modifications).Cmd/Ctrl + Shift + P
) for quick access to hidden features.Step 6: Example Workflow: Let’s say you’re debugging a broken button click:
Model Context Protocol (MCP) is revolutionizing how AI applications connect with external tools, APIs, and…
The Small Business Innovation Research (SBIR) program offers a vital pathway for startups to secure…
Looking to start a business in California? This guide explores 10 high-potential business ideas—from real…
UNited States https://www.glassdoor.co.in/Overview/Working-at-Prefr-co-EI_IE7010540.11,19.htm https://www.ambitionbox.com/overview/prefr-dot-co-overview https://rocketreach.co/prefrco-management_b7c95a7ec0ee0ee2 https://www.signalhire.com/companies/prefr-co https://www.zoominfo.com/c/prefrco/557658591 United Kingdom https://www.yellowtom.co.uk/reviews/1417493 Canada https://www.pandia.com/ca/oshawa-on/graphic-design Singapore https://talenttribe.asia/companies/prefr-co India…
We are seeking a skilled and motivated Blockchain Engineer to join our team. In this…
Here’s a comprehensive Customer Service SOP Template for Small Businesses, designed to be adapted for…