Debugging – Chrome DevTools & Source Maps

Key DevTools panels:

• Elements – inspect/edit HTML & CSS.
• Console – log output, evaluate expressions.
• Sources – set breakpoints, step through code.
• Network – view requests, timings, payloads.
• Performance – capture frames, JS execution, paints.

Source maps map minified code back to original sources.

// webpack.config.js snippet
module.exports = {
  devtool: 'source-map',
};