<h2>Introduction</h2>
<p>Browser DevTools are a set of powerful tools built directly into modern browsers like Chrome, Firefox, and Edge. They help developers debug, inspect, and optimize web applications with ease.</p>

<h3>1. Opening DevTools</h3>
<ul>
  <li>Chrome: <code>Ctrl + Shift + I</code> or <code>F12</code></li>
  <li>Firefox: <code>Ctrl + Shift + I</code> or <code>F12</code></li>
  <li>Edge: <code>Ctrl + Shift + I</code> or <code>F12</code></li>
  <li>Mac: <code>Cmd + Opt + I</code></li>
</ul>

<h3>2. Elements Panel</h3>
<p>Inspect and modify HTML & CSS in real-time.</p>
<pre><code>{`

Example: Adding a new CSS rule

element.style { border: 2px solid red; } `}</code></pre>

<h3>3. Console Panel</h3>
<p>Run JavaScript commands and debug errors.</p>
<pre><code>{`

console.log("Hello DevTools!"); console.table([{name: "Alice"}, {name: "Bob"}]); console.error("This is an error!"); `}</code></pre>

<h3>4. Network Panel</h3>
<p>Monitor API requests, response times, and caching.</p>
<ul>
  <li>Check HTTP methods (GET, POST, etc.)</li>
  <li>View request & response payloads</li>
  <li>Analyze performance bottlenecks</li>
</ul>

<h3>5. Sources Panel</h3>
<p>Set breakpoints, step through code, and debug JavaScript execution.</p>

<h3>6. Performance Panel</h3>
<p>Record page load & runtime performance to optimize speed.</p>

<h3>7. Application Panel</h3>
<p>Inspect localStorage, sessionStorage, cookies, IndexedDB, and service workers.</p>

<h3>8. Lighthouse Audit</h3>
<p>Run audits to check performance, accessibility, SEO, and best practices.</p>

<h3>Best Practices</h3>
<ul>
  <li>Use console shortcuts like <code>$_</code> (last evaluated result)</li>
  <li>Save snippets for reusable debugging scripts</li>
  <li>Combine Network + Performance tabs for bottleneck detection</li>
  <li>Use Device Toolbar for responsive design testing</li>
</ul>

<h3>Conclusion</h3>
<p>By mastering Browser DevTools, you can debug faster, optimize performance, and build more reliable web applications.</p>