Charles web developer tool

Overview Open Chrome DevTools. Inspect network activity Network features reference. Simulate mobile devices with Device Mode Override the user agent string Override geolocation Simulate device orientation. Analyze runtime performance Optimize website speed Performance features reference Timeline Event Reference. Accessibility features reference Navigate Chrome DevTools with assistive technology Track element focus.

Customization Enable dark theme Change placement: undock, dock to bottom, dock to left. Get started with Google Chrome's built-in web developer tools. Open Chrome DevTools. All of the ways that you can open Chrome DevTools. What's new in DevTools. Stay up to date with the latest DevTools changes. Engineering blog. Learn how the team builds new features in DevTools.

How to view nodes, search for nodes, edit nodes, reference nodes in the Console, break on node changes, and more. A reference of convenience functions available in the Chrome DevTools Console.

If you find yourself typing the same JavaScript expressions into the Console repeatedly, try Live Expressions instead. A tutorial on the most popular network-related features in Chrome DevTools. A comprehensive reference of Chrome DevTools Network panel features. How to view and edit localStorage with the Local Storage pane and the Console.

How to view and edit sessionStorage with the Session Storage pane and the Console. Find and fix problems with the Issues tab. Use the Issues Tab to find and fix problems with your website. Run commands in the Command Menu. Or export your sandbox to a repo. Software Engineer, React Core Team. Designer Developer, Stripe. Skip to main content. Where teams build faster, together Create, share, and get feedback with collaborative sandboxes for rapid web development.

No Setup Superfast Multiplayer Updates Live Shared A sandbox needs no setup - use a template to kickstart new projects, or start from a GitHub repo and begin coding in seconds.

Code from anywhere Code from anywhere with play. There's a More Tools button and list, and there's a More tabs button on the toolbar, both of which are used to select tools, which are also called panels.

The menu bar of DevTools with labels that explain the different sections. When you select the Inspect tool, you can select an element on the current webpage. While the Inspect tool is active, you can move your mouse over different parts of the webpage to get detailed information about page elements, and a multi-color overlay that shows the layout dimensions, padding, and margin of the page element.

The Device Emulation tool displays the current web product in an emulated device mode. The Device Emulation tool allows you to run and test how your product reacts when you resize the browser.

It also gives you an estimation of the layout and behavior on a mobile device. The main toolbar contains tabs for tools that are used in various scenarios. You can customize each of the tools, and the content of a tool can change based on the context. Each tool is introduced below. Next to the Tools tab group are optional error and issues shortcuts. The shortcuts display when JavaScript errors or issues occur on the current webpage.

To open the Console and learn about the error, select the JavaScript Errors button. The Open Issues to view issues Issues button is a blue message icon followed by the number of issues. To open the Issues tool, select the Issues button. The Settings button displays a gear icon. To open DevTools Settings webpage, select the Settings button. The Settings webpage displays a menu to change Preferences , turn on Experiments , and much more.

The Send Feedback button displays a torso with a chat bubble next to it. To open the Send Feedback dialog, select the Send Feedback button.

The Send Feedback dialog allows you to enter information to describe what happened and automatically includes a screenshot. Use Send Feedback to connect with DevTools team to report problems, issues, or suggest ideas. The Customize and control DevTools