Workshop: Debugging with Chrome's AI Assistant

Select a demo below to get started.

1. HTML, CSS & JS Debugging

A user profile card project with common bugs. Use this to demonstrate how the AI assistant can explain console errors (like missing `await` or `TypeError`), refactor JavaScript, and solve tricky CSS layout issues like z-index stacking contexts.

Launch Demo 1

2. Network Request Analysis

A client-server application that generates various API responses. Use this to show how the AI can explain HTTP status codes (200, 401, 304), interpret request/response headers, and summarize complex JSON payloads directly from the Network panel.

Launch Demo 2

3. Performance Analysis

Features two common performance bottlenecks: an inefficient animation causing "Layout Thrashing" and a large table with slow re-renders causing "Long Tasks". Use the Performance panel to record these issues and ask the AI for an explanation and optimization advice.

Launch Demo 3