Debugging Common Frontend Issues

<h2>Introduction</h2>
<p>Frontend development can be tricky. Even small mistakes in HTML, CSS, or JavaScript can break the UI or functionality. This guide covers the most common frontend issues and how to debug them effectively.</p>

<h3>1. CSS Not Applying</h3>
<p>Styles might not appear due to incorrect selectors, specificity issues, or missing files.</p>
<h4>✅ Fix</h4>
<ul>
  <li>Check that the CSS file is correctly linked in HTML.</li>
  <li>Use browser DevTools to inspect elements and see applied styles.</li>
  <li>Increase selector specificity if needed.</li>
</ul>

<h3>2. JavaScript Not Executing</h3>
<p>Common reasons include script placement, typos, or DOM not loaded yet.</p>
<h4>✅ Fix</h4>
<pre><code>&lt;script src="script.js" defer&gt;&lt;/script&gt;</code></pre>
<p>Or wrap code in <code>DOMContentLoaded</code> event:</p>
<pre><code>document.addEventListener('DOMContentLoaded', () => {

console.log("DOM fully loaded"); });</code></pre>

<h3>3. Event Listeners Not Working</h3>
<p>Often caused by selecting the wrong element or attaching before DOM is ready.</p>
<h4>✅ Fix</h4>
<pre><code>const btn = document.querySelector('#myButton');

btn.addEventListener('click', () => console.log("Clicked!"));</code></pre>

<h3>4. Layout Broken / Responsive Issues</h3>
<p>Elements may overlap, overflow, or appear misaligned on different screen sizes.</p>
<h4>✅ Fix</h4>
<ul>
  <li>Use Flexbox or CSS Grid for layout.</li>
  <li>Check media queries for responsiveness.</li>
  <li>Use DevTools device toolbar to test different screen sizes.</li>
</ul>

<h3>5. Console Errors & Warnings</h3>
<p>Browser console is your friend. Common errors include:</p>
<ul>
  <li><strong>TypeError</strong>: calling a method on undefined.</li>
  <li><strong>ReferenceError</strong>: using a variable before declaration.</li>
  <li><strong>404 / Network Error</strong>: missing files or API endpoints.</li>
</ul>
<h4>✅ Fix</h4>
<ul>
  <li>Check variable names and spelling.</li>
  <li>Ensure all file paths and URLs are correct.</li>
  <li>Use try/catch for async operations.</li>
</ul>

<h3>6. Performance Issues / Slow Loading</h3>
<h4>✅ Fix</h4>
<ul>
  <li>Minify CSS/JS and compress images.</li>
  <li>Use lazy loading for images or components.</li>
  <li>Reduce DOM complexity.</li>
</ul>

<h3>7. Browser Compatibility Issues</h3>
<h4>✅ Fix</h4>
<ul>
  <li>Use modern CSS with fallbacks.</li>
  <li>Check features with <a href="https://caniuse.com/" target="_blank">Can I Use</a>.</li>
  <li>Test in multiple browsers regularly.</li>
</ul>

<h3>Conclusion</h3>
<p>Debugging frontend issues becomes easier with systematic approaches: inspect elements, use DevTools, check console errors, and test responsiveness. Following best practices prevents most common problems.</p>