Skip to content
intermediate Phase 75 · Debugging Basics

Browser DevTools

45m
1 problems
Topic Progress 0%

Network Tab

Request Inspection

// Filter requests by type
// XHR/Fetch: AJAX requests
// JS: JavaScript files
// CSS: Stylesheets
// Img: Images
// Font: Fonts

// Search for specific requests
// Type in filter: magento, graphql, rest

// View request details
// Click request > Headers tab
// - Request URL
// - Request Method (GET, POST)
// - Status Code (200, 301, 404)
// - Request Headers
// - Response Headers

AJAX Request Debugging

// Filter XHR requests
// Find API calls to /rest/V1/ or /graphql

// Preview response data
// Click request > Preview tab
// View JSON response structure

// Copy request as cURL
// Right-click request > Copy > Copy as cURL
// Use for API testing

// Replay request
// Right-click request > Replay
// Modify and resend

Performance Analysis

// Waterfall view
// Shows request loading order and timing

// Key metrics:
// - TTFB (Time to First Byte)
// - Content Download
// - Waiting (TTFB)

// Filter slow requests
// Sort by: Time, Size, Waterfall

// Save HAR file for analysis
// Right-click > Save all as HAR with content

Key Points

  • Network tab shows all HTTP requests
  • Use filters to find specific requests
  • HAR files can be analyzed offline
  • Check for failed requests (4xx, 5xx)

Console Tab

JavaScript Console

// Log messages
console.log('Debug message');
console.warn('Warning message');
console.error('Error message');
console.info('Info message');
console.debug('Debug message');

// Table display
console.table([{name: 'Product 1', price: 100}, {name: 'Product 2', price: 200}]);

// Group messages
console.group('Group Start');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();

// Timing
console.time('Timer');
// ... code ...
console.timeEnd('Timer'); // 123.456ms

DOM Inspection

// Select element
// Click element selector tool (top-left)
// Or use document.querySelector()

document.querySelector('.product-item');
document.querySelectorAll('.price');

// Modify element
// Right-click element > Edit as HTML
// Or: $0.innerHTML = 'New content'

// Add CSS
// Right-click element > Add attribute
// Or: $0.style.color = 'red'

// Copy selector
// Right-click > Copy > Copy selector

Magento-Specific Console

// Access RequireJS modules
require(['jquery'], function($) {
    console.log($);
});

// Access Magento components
var customerData = require('Magento_Customer/js/customer-data');
console.log(customerData.get('cart')());

// Check for JS errors
// Console shows errors with file and line number
// Click to navigate to Sources tab

// Execute jQuery
// jQuery('.product-item').length
// $$('.product-item').length // Shortcut

Key Points

  • Console for JavaScript debugging
  • DOM inspection for HTML/CSS issues
  • RequireJS for Magento module access
  • Use $0 to reference selected element

Performance Tab

Record Performance

// Start recording
// Click record button (circle icon)
// Perform actions on page
// Stop recording

// View results:
// - Overview: CPU, Memory, Network
// - Details: flame chart of activity

// Key metrics:
// - FPS (Frames Per Second)
// - CPU Usage
// - Memory Usage
// - Network Requests

Analyze Loading

// Network waterfall analysis
// Look for:
// - Render-blocking resources
// - Large files
// - Sequential vs parallel loading

// Suggestions:
// - Lazy load images
// - Defer non-critical JS
// - Optimize CSS delivery

Memory Profiling

// Take heap snapshot
// Click camera icon to take snapshot
// Take another snapshot after actions
// Compare snapshots to find memory leaks

// Common Magento memory issues:
// - Unreleased event listeners
// - Large data objects in memory
// - Memory leaks in custom JS

Key Points

  • Performance tab identifies bottlenecks
  • Memory profiling finds leaks
  • Compare before/after optimization
  • Use Lighthouse for comprehensive audit

Debugging Frontend Issues

JavaScript Errors

// Common errors:
// - TypeError: Cannot read property
// - ReferenceError: X is not defined
// - SyntaxError: Unexpected token

// Debug approach:
// 1. Check console for errors
// 2. Note file and line number
// 3. Open Sources tab
// 4. Set breakpoint
// 5. Step through code

CSS Issues

// Computed styles
// Select element > Computed tab
// Shows final CSS applied

// CSS issues:
// - Specificity conflicts
// - Missing styles
// - Layout shifts

// Debug CSS:
// 1. Check element styles
// 2. See which rules are applied
// 3. Override temporarily to test
// 4. Fix in source

AJAX Failures

// Check Network tab for:
// - Failed requests (red)
// - 403 Forbidden
// - 500 Server Error

// Common Magento AJAX issues:
// - CSRF token missing
// - Form key expired
// - Invalid JSON response

// Debug:
// 1. Check request payload
// 2. Verify headers
// 3. Test with cURL

Key Points

  • Start with console for JS errors
  • Network tab for AJAX issues
  • Elements tab for CSS problems
  • Sources tab for code stepping

Practice Problems

0 / 1 solved
Debug AJAX Request

Use browser DevTools to debug a failing AJAX request to the Magento API.

Solution 
// Debugging steps:
// 1. Open Network tab
// 2. Find the request to /rest/V1/products
// 3. Check Status Code (200, 401, 403, etc.)
// 4. Check Request Headers:
//    - Authorization header present?
//    - Content-Type correct?
// 5. Check Response:
//    - Preview tab for JSON
//    - Response headers
// 6. If 401: token expired or invalid
// 7. If 403: insufficient permissions
// 8. Copy as cURL to test in terminal

Quiz

1. What does the Network tab show?

Question 1 options

2. How do you access jQuery in console?

Question 2 options

3. What does $0 represent?

Question 3 options

4. What does TTFB measure?

Question 4 options

Flashcards

Question

Network tab purpose?

Click to reveal answer

Answer

Shows HTTP requests, headers, responses

Question

$0 reference?

Click to reveal answer

Answer

Currently selected element in Elements tab

Question

TTFB meaning?

Click to reveal answer

Answer

Time to First Byte - server response time

Question

console.table() use?

Click to reveal answer

Answer

Displays array/object data as table

Revision Notes

Key Takeaways

  • 1. Network tab shows all HTTP requests and responses
  • 2. Console for JavaScript debugging and DOM access
  • 3. Performance tab identifies loading bottlenecks
  • 4. $0 references the selected element in Elements tab

Interview Tips

  • • Explain how to debug AJAX issues
  • • Discuss performance optimization techniques
  • • Know Magento-specific console commands

Cheat Sheet

Browser DevTools

  • F12: Open DevTools
  • Network: HTTP requests
  • Console: JS debugging
  • Elements: HTML/CSS
  • Sources: Code stepping
  • Performance: Timing analysis