What is DevTools in Chrome? Opening it on Mac, Safari, Edge, mobile, React DevTools, MCP

Chrome DevTools is the set of developer tools built into the Chrome browser for inspecting HTML and CSS, debugging JavaScript, viewing network requests, measuring performance and testing mobile layouts. Every web developer uses it daily. I build web apps with Next.js and FastAPI, so this page explains what DevTools is, how to open it and the console in Chrome, Mac, Safari and Edge, debugging on phones and iPads, React DevTools, and the Chrome DevTools MCP server for AI agents.

What is DevTools in Chrome?

Chrome DevTools is a suite of web development tools built into Chrome. Panels include Elements for HTML and CSS, Console for logs and JavaScript, Sources for debugging, Network for requests, Performance and Lighthouse for speed, and Application for storage.

Also asked as: what is dev tools on chrome

You can edit styles live, set breakpoints, inspect API responses, simulate slow networks, emulate mobile devices, audit accessibility and performance, and view cookies, local storage and service workers. Changes made in DevTools are temporary, affecting only your browser session, so they are safe for experiments. Learning DevTools well is one of the fastest ways to debug front-end problems, since it shows exactly what the browser receives and how it renders.

How do you open DevTools in Chrome?

Press F12 or Ctrl+Shift+I on Windows and Linux, or Cmd+Option+I on Mac. You can also right-click any element and choose Inspect, or open the Chrome menu, then More tools, then Developer tools.

Also asked as: how do i open dev tools on chrome

Ctrl+Shift+C, or Cmd+Shift+C on Mac, opens DevTools in element-picking mode, so you can click any part of the page to inspect it. Dock DevTools to the side, bottom or a separate window from its menu. If DevTools will not open, check whether your organisation has disabled it through policy on managed devices. On school or work Chromebooks, administrators often restrict access, and only they can change it.

Where is the DevTools console?

The Console is a tab in DevTools. Open it directly with Ctrl+Shift+J on Windows and Linux or Cmd+Option+J on Mac in Chrome, or open DevTools and click the Console tab. Press Escape to show a console drawer in other panels.

Also asked as: where is dev tools console

The console shows logs, warnings and errors from the page, and lets you run JavaScript in the page's context, such as inspecting variables or testing functions. Filter messages by level or text, and keep logs across page reloads with the preserve log option. Errors include file names and line numbers you can click to open in Sources. Be careful pasting code from strangers into the console, since it can steal session data.

How do you open DevTools on a Mac?

In Chrome, Edge or Firefox on Mac, press Cmd+Option+I to open developer tools, or Cmd+Option+J in Chrome to open the console directly. You can also right-click an element and choose Inspect.

Also asked as: how to dev tools on mac

In Safari, first enable developer features in Settings, Advanced, by checking the option to show features for web developers, then use Cmd+Option+I to open the Web Inspector and Cmd+Option+C for the console. On newer Mac keyboards, Option may be labelled with a symbol only. If shortcuts conflict with other apps, use the browser menu instead. Developers often keep a Chromium browser and Safari both available to test rendering differences.

How do you open DevTools in Safari?

Open Safari Settings, go to Advanced, and enable the option to show features for web developers, which adds the Develop menu. Then open Web Inspector with Cmd+Option+I or by right-clicking and choosing Inspect Element.

Also asked as: how to dev tools safari

Web Inspector includes Elements, Console, Sources, Network, Timelines and Storage tabs, similar to Chrome DevTools. The Develop menu also lets you disable caches, simulate different user agents, test responsive designs and connect to iPhones and iPads for remote debugging. Testing in Safari matters because WebKit renders some CSS and handles some APIs differently from Chromium, and WebKit powers all iOS browsers, so some bugs appear only there.

Where is DevTools in Edge?

In Microsoft Edge, press F12 or Ctrl+Shift+I on Windows, or Cmd+Option+I on Mac. You can also open the menu, choose More tools, then Developer tools, or right-click and select Inspect.

Also asked as: where is dev tools on edge

Edge DevTools is based on Chromium, so it closely matches Chrome's panels, with some additions such as 3D View for inspecting layers and Edge-specific tools for accessibility and issues. If F12 opens a prompt the first time, choose to open DevTools and optionally remember the choice. Organisations can disable DevTools on managed devices through policy. Skills transfer directly between Chrome and Edge, so learning one teaches you both. Edge also integrates DevTools with Visual Studio Code through an extension.

Can you open DevTools on a mobile phone?

Not directly in most mobile browsers, but you can debug mobile pages from a computer. For Android, enable USB debugging, connect the phone, and open chrome://inspect in desktop Chrome. For iPhone, use Safari's Develop menu on a Mac.

Also asked as: can i open dev tools on mobile

Remote debugging gives full DevTools for the phone's page: inspect elements, view console errors, check network requests and profile performance on real hardware. For quick checks without a computer, tools such as Eruda or vConsole can be injected into a page to show an on-screen console. Desktop DevTools device emulation also simulates screen sizes and touch, but real-device testing catches issues emulation misses, such as performance and browser-specific bugs.

Can you open DevTools on an iPad?

Safari on iPad has no built-in DevTools panel. Enable Web Inspector in the iPad's Settings, under Safari, Advanced, then connect the iPad to a Mac and inspect its pages from Safari's Develop menu.

Also asked as: can i open dev tools on ipad

Without a Mac, options are limited: injected on-page consoles like Eruda, bookmarklets that show console output, or apps that offer basic web inspection. Since all iPad browsers use WebKit, debugging in Safari on a Mac covers Chrome and other browsers on iPad too. Test layouts with desktop responsive modes first, then verify on the real device. For web apps, logging errors to a remote service also helps diagnose problems users hit on iPads.

What are React DevTools?

React Developer Tools is a browser extension for Chrome, Firefox and Edge that adds Components and Profiler tabs to DevTools, letting you inspect the React component tree, props, state and hooks, and measure rendering performance.

Also asked as: what are react dev tools

With the Components tab, select a component to see its props and state, edit values live, and find which component rendered a DOM element. The Profiler records renders, showing which components re-rendered, why, and how long they took, which helps fix slow interfaces. A standalone version works for React Native and other environments. It is essential for debugging Next.js and React apps, alongside the browser's own Network and Console panels.

What is the Chrome DevTools MCP server?

Chrome DevTools MCP is a Model Context Protocol server, released by the Chrome team in 2025, that lets AI coding agents control and inspect a live Chrome browser: open pages, read console errors, inspect network requests and record performance traces.

Also asked as: what is dev tools mcp

It closes a gap for coding assistants, which previously wrote front-end code without seeing how it ran. With the server connected to tools such as Claude Code, Cursor or Gemini CLI, an agent can reproduce a bug, check errors, verify a fix and measure performance metrics like largest contentful paint. Use it with test accounts and non-sensitive data, since the agent can see whatever the browser loads.

Pranjul Rathour

GenAI Engineer · India

GenAI engineer and AI product builder with 2+ years shipping production-grade AI systems: RAG pipelines, fine-tuned LLMs, hybrid retrieval and multi-modal apps across vision, speech and OCR, architected end to end from ingestion to deployment. Leads engineering for SCULT INDIA's 14-member team, founded the 500+ member TechVerse Enclave community and has mentored 200+ students. Three hackathon first prizes: Changethon 2025 (IIT Roorkee), Product Genesis at Vividhotsava 2025 (CSJMU) and BYTEBATTLE (MeetKats).

Open to GenAI roles, hackathon judging, mentorship sessions and guest talks at colleges. For campus sessions the inviting institution covers the visit end to end: travel (a First AC train ticket for journeys up to five hours, a flight for anything longer), accommodation, meals, and pickup and drop; the honorarium and workshop fees are negotiable on WhatsApp or on the call, and requests are welcome from institutions that can cover the visit this way. Email pranjulrathour41@gmail.com.

PortfolioInvite me to your campusHire meLinkedInGitHubXInstagramThreadsFacebookBlueskyDev.toBloggerHashnodeSCULTEmail