Master Chrome and Firefox developer tools to debug, optimize, and build better websites. Your essential companion for web development.
Browser Developer Tools (DevTools) are built-in features that help you inspect, debug, and optimize websites. Available in all modern browsers, they're essential for any web developer.
Inspect and modify HTML and CSS in real-time. The most frequently used panel for debugging layouts and styling issues.
Click the selector icon, then click any element on the page to view its HTML and CSS.
Double-click any element to edit HTML directly. Changes apply instantly (not saved to file).
Add, edit, or disable CSS properties in the Styles pane. Test changes before updating your files.
See margin, border, padding, and content dimensions with the interactive box model diagram.
View JavaScript errors, warnings, and logs. Execute JavaScript commands directly and interact with page variables.
See all JavaScript errors, warnings, and console.log() output in real-time.
Run any JavaScript code directly in the console. Access page variables, DOM, and functions.
Use console.log(), console.error(), console.table() to track variables and execution flow.
Use $0 to reference the currently selected element in the Elements panel.
Monitor all network requests, view response data, and analyze page load performance. Essential for debugging API calls and optimizing load times.
See every HTTP request: HTML, CSS, JS, images, API calls, and more with timing information.
Click any request to see headers, response body, cookies, and timing details.
Filter by type (XHR, JS, CSS, Img), status code, or search for specific files.
Simulate slow 3G, 4G, or offline conditions to test performance on mobile networks.
Debug JavaScript code with breakpoints, step through execution, and inspect variables at runtime. The most powerful debugging tool.
Click line numbers to pause execution at that point. Inspect variables and call stack.
Use step over, step into, and step out controls to execute code line by line.
Monitor specific variables or expressions as you step through code execution.
See the sequence of function calls that led to the current breakpoint.
Record and analyze runtime performance. Identify slow functions, excessive reflows, and optimize your application's speed.
Record page activity to see CPU usage, function calls, and rendering performance over time.
Find slow JavaScript functions, long tasks, and performance issues causing lag.
Monitor FPS (frames per second) to ensure smooth animations and scrolling.
Track memory usage and detect memory leaks in your application.
Inspect and manage storage: cookies, localStorage, sessionStorage, IndexedDB, and service workers.
Access localStorage, sessionStorage, and IndexedDB. Edit, add, or delete entries.
View all cookies for the site. Edit values, expiration dates, or delete cookies.
Debug Progressive Web Apps (PWAs), test offline functionality, and manage cache.
Quickly clear all storage, cookies, and cache for testing fresh state.
Click the device icon (Ctrl+Shift+M) to test your site on different screen sizes and devices. Select from preset devices or enter custom dimensions.
Press Ctrl+Shift+P (Cmd+Shift+P on Mac) to open the Command Menu. Quickly access features like "Screenshot", "Disable JavaScript", or "Clear Cache".
Use $ shortcuts: $0 (selected element), $(selector) like jQuery, $$('div') (querySelectorAll), copy(value) to copy to clipboard.
In Console and Network panels, enable "Preserve log" to keep entries after page navigation or reload—essential for debugging redirects.
Right-click an element → Force State to test :hover, :active, :focus, and :visited styles without manual interaction.
Save changes made in DevTools to local files. Right-click in Sources → "Save for overrides" to test changes persistently.