[{"data":1,"prerenderedAt":1888},["ShallowReactive",2],{"blog-how-to-inspect-element-on-mac-en":3,"blog-locales-how-to-inspect-element-on-mac":461,"blog-related-how-to-inspect-element-on-mac-en":462},{"id":4,"title":5,"author":6,"body":7,"category":425,"date":426,"dateModified":426,"description":427,"descriptionEs":428,"descriptionJa":428,"descriptionZh":428,"extension":429,"faqs":430,"image":428,"meta":446,"navigation":447,"path":448,"readingTime":449,"seo":450,"stem":451,"tags":452,"thumbnail":428,"titleEs":428,"titleJa":428,"titleZh":428,"__hash__":460},"blog/blog/how-to-inspect-element-on-mac.md","How to Inspect Element on a Mac (Every Method, 2026)","Soraia",{"type":8,"value":9,"toc":412},"minimark",[10,14,23,69,74,77,95,109,124,129,133,139,176,183,195,201,205,221,225,228,262,265,269,276,283,286,290,301,319,326,330,342,360,376,380,402,406,409],[11,12,13],"p",{},"You spotted a button, a layout, or a font on a website and you want to see how it's built. On a Mac, the tool for that is built right into every browser. It's called Inspect Element (or the Web Inspector in Safari), and once you know the shortcut it takes about a second to open.",[11,15,16,17,22],{},"This guide covers every method on macOS: the keyboard shortcut, the right-click route, the extra step Safari needs, and how to actually use the panel once it's open. If you're on Windows or a phone too, the ",[18,19,21],"a",{"href":20},"/blog/how-to-inspect-element-on-any-device","companion guide to inspect element on any device"," covers the rest.",[24,25,27,33],"callout",{"color":26},"primary",[11,28,29],{},[30,31,32],"strong",{},"Key takeaways:",[34,35,36,49,58,61],"ul",{},[37,38,39,40,44,45,48],"li",{},"In Chrome, Edge, Brave, and Firefox on Mac, press ",[41,42,43],"code",{},"Cmd + Option + I"," or right-click and choose ",[30,46,47],{},"Inspect",".",[37,50,51,52,55,56,48],{},"Safari needs one setup step first: enable the ",[30,53,54],{},"Develop menu"," in Settings, then use ",[41,57,43],{},[37,59,60],{},"The Elements panel shows the live HTML and CSS. You can edit it, but changes are local and vanish on refresh.",[37,62,63,64,68],{},"Inspecting lets you ",[65,66,67],"em",{},"see"," the code. Copying it cleanly for reuse is the painful part, which is where a dedicated tool helps.",[70,71,73],"h2",{"id":72},"the-shortcut-cmd-option-i","The shortcut: Cmd + Option + I",[11,75,76],{},"In every Chromium browser on macOS (Chrome, Edge, Brave, Arc, Opera) and in Firefox, the shortcut is the same:",[34,78,79,87],{},[37,80,81,84,85],{},[30,82,83],{},"Open developer tools:"," ",[41,86,43],{},[37,88,89,84,92],{},[30,90,91],{},"Open straight into element-picker mode:",[41,93,94],{},"Cmd + Option + C",[11,96,97,98,101,102,104,105,108],{},"Or, the route most people remember: ",[30,99,100],{},"right-click"," anywhere on the page and choose ",[30,103,47],{}," (Chrome, Edge, Brave) or ",[30,106,107],{},"Inspect Element"," (Firefox).",[11,110,111,112,119,120,123],{},"That opens the browser's ",[18,113,118],{"href":114,"rel":115,"target":117},"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools",[116],"nofollow","_blank","developer tools"," with the ",[30,121,122],{},"Elements"," tab in front. This is the live, rendered page: the actual HTML and CSS as it exists right now, including everything JavaScript has added since the page loaded.",[11,125,126,128],{},[41,127,94],{}," is the underrated one. It opens the tools already in picker mode, so your next click lands on the exact element you cared about instead of making you hunt for it in the tree.",[70,130,132],{"id":131},"inspecting-in-safari-enable-the-develop-menu-first","Inspecting in Safari (enable the Develop menu first)",[11,134,135,136,138],{},"Safari is the one browser on a Mac that hides this feature by default. If you've ever wondered why right-clicking a page in Safari shows no ",[30,137,107],{}," option, that's why. You have to turn it on once:",[140,141,142,148,159,166],"ol",{},[37,143,144,145,48],{},"Open ",[30,146,147],{},"Safari",[37,149,150,151,154,155,158],{},"From the menu bar, choose ",[30,152,153],{},"Safari → Settings"," (",[41,156,157],{},"Cmd + ,",").",[37,160,161,162,165],{},"Click the ",[30,163,164],{},"Advanced"," tab.",[37,167,168,169,172,173,48],{},"Turn on ",[30,170,171],{},"Show features for web developers",". On older macOS versions this reads ",[30,174,175],{},"Show Develop menu in menu bar",[11,177,178,179,182],{},"That's it, and you only do it once. Now you have a ",[30,180,181],{},"Develop"," menu in the menu bar, and you can open the Web Inspector two ways:",[34,184,185,190],{},[37,186,187,189],{},[41,188,43],{}," opens the inspector on the current tab.",[37,191,192,194],{},[41,193,94],{}," opens it in element-picker mode.",[11,196,197,198,200],{},"Right-clicking a page now also shows ",[30,199,107],{},". Safari's Web Inspector looks a little different from Chrome's, but the idea is identical: an Elements view on the left, styles on the right.",[70,202,204],{"id":203},"inspecting-in-firefox-on-a-mac","Inspecting in Firefox on a Mac",[11,206,207,208,210,211,213,214,216,217,220],{},"Firefox needs no setup. Press ",[41,209,43],{}," for the full toolbox, ",[41,212,94],{}," for the picker, or right-click and choose ",[30,215,107],{},". The panel is called the ",[30,218,219],{},"Inspector",", and the layout (markup on one side, rules on the other) will feel familiar if you've used Chrome.",[70,222,224],{"id":223},"how-to-actually-use-the-panel","How to actually use the panel",[11,226,227],{},"Opening the tools is the easy part. Here's how to read what you see:",[34,229,230,236,250,256],{},[37,231,232,235],{},[30,233,234],{},"Hover over a node"," in the Elements panel and the matching part of the page highlights. This is the fastest way to map code to what's on screen.",[37,237,238,241,242,245,246,249],{},[30,239,240],{},"Click a node"," and the ",[30,243,244],{},"Styles"," panel (Safari and Chrome) or ",[30,247,248],{},"Rules"," panel (Firefox) shows every CSS rule applying to it, top to bottom in cascade order.",[37,251,252,255],{},[30,253,254],{},"Edit text:"," double-click any text content in the markup and type. The page updates instantly.",[37,257,258,261],{},[30,259,260],{},"Edit CSS:"," click a value in the Styles panel and change it. Tweak a color, a font size, a margin, and watch the page react live.",[11,263,264],{},"This is genuinely useful for learning how a layout holds together, testing a copy change before you ship it, or debugging your own site.",[70,266,268],{"id":267},"why-your-edits-dont-save","Why your edits don't save",[11,270,271,272,275],{},"Here's the part that trips people up. Every change you make in Inspect Element is ",[30,273,274],{},"local to your browser only",". It lives in memory, nobody else can see it, and it disappears the second you refresh the page or close the tab. You are not editing the real website, you're editing a temporary copy your browser is holding.",[11,277,278,279,282],{},"That's by design and it's a good thing: you can experiment freely without breaking anything. But it means Inspect Element is a ",[65,280,281],{},"viewing and testing"," tool, not a way to capture code you want to keep.",[11,284,285],{},"So what if you do want to keep it?",[70,287,289],{"id":288},"seeing-the-code-is-easy-copying-it-cleanly-isnt","Seeing the code is easy. Copying it cleanly isn't.",[11,291,292,293,296,297,300],{},"This is where DevTools quietly fights you. You can right-click an element in the panel and choose ",[30,294,295],{},"Copy → Copy element"," (the HTML) or ",[30,298,299],{},"Copy styles"," (its computed CSS). But:",[34,302,303,306,309,316],{},[37,304,305],{},"The HTML references stylesheets that live elsewhere, so pasted markup arrives unstyled.",[37,307,308],{},"\"Copy styles\" dumps one node's final values, missing inherited rules, child styles, hover states, and media queries.",[37,310,311,312,315],{},"Class names on modern sites are often minified into noise like ",[41,313,314],{},".a1b2c",", so the structure is hard to read.",[37,317,318],{},"You repeat all of this node by node. For one button it's fine. For a navbar or a pricing section, it's an afternoon.",[11,320,321,322,325],{},"If your goal is to ",[65,323,324],{},"reuse"," what you found rather than just look at it, manual copy-paste is the slow road.",[70,327,329],{"id":328},"the-one-click-alternative","The one-click alternative",[11,331,332,337,338,341],{},[18,333,336],{"href":334,"rel":335},"https://chromewebstore.google.com/detail/miromiro/kpmkikjpclolhodgckeogmiiaehpfjhl",[116],"MiroMiro"," is a free Chrome extension that does the part DevTools makes hard. You click any element or section on a live site and get its ",[30,339,340],{},"complete, clean code"," in one step:",[34,343,344,347,357],{},[37,345,346],{},"The HTML bundled with the CSS that actually applies to it, not just referenced.",[37,348,349,350,353,354,48],{},"Clean ",[30,351,352],{},"Tailwind"," output (matching the site's utility classes) or plain ",[30,355,356],{},"HTML + CSS",[37,358,359],{},"The whole component, children and nested structure included, not one node at a time.",[11,361,362,363,366,367,371,372,375],{},"So inspecting tells you ",[65,364,365],{},"how"," something is built. The ",[18,368,370],{"href":369},"/inspect","web inspector tool"," hands you the code to ",[65,373,374],{},"rebuild"," it. Paste it straight into a project, or feed it to Cursor, Claude, or v0 as real context instead of a screenshot the AI has to guess from.",[70,377,379],{"id":378},"keep-reading","Keep reading",[34,381,382,388,395],{},[37,383,384,387],{},[18,385,386],{"href":20},"Inspect element on any device",". The pillar guide covering Windows, Chromebook, iPhone, and Android.",[37,389,390,394],{},[18,391,393],{"href":392},"/blog/how-to-view-and-copy-website-source-code","How to view and copy a website's source code",". View Source, DevTools, and the clean-copy method.",[37,396,397,401],{},[18,398,400],{"href":399},"/website-to-code","Turn any website into clean code",". The one-click tool behind these workflows.",[70,403,405],{"id":404},"one-less-monthly-bill-in-your-stack","One less monthly bill in your stack",[11,407,408],{},"If you build for a living, you're probably already paying for Cursor, Claude, v0, maybe Figma. That's €75+/month, every month, before you ship anything. MiroMiro is the one tool in that workflow that doesn't have to be another recurring bill:",[410,411],"lifetime-math",{},{"title":413,"searchDepth":414,"depth":414,"links":415},"",2,[416,417,418,419,420,421,422,423,424],{"id":72,"depth":414,"text":73},{"id":131,"depth":414,"text":132},{"id":203,"depth":414,"text":204},{"id":223,"depth":414,"text":224},{"id":267,"depth":414,"text":268},{"id":288,"depth":414,"text":289},{"id":328,"depth":414,"text":329},{"id":378,"depth":414,"text":379},{"id":404,"depth":414,"text":405},"Web Development","2026-06-09","How to inspect element on a Mac in every browser: the Cmd+Option+I shortcut, Safari's Develop menu, Chrome, Firefox, and how to actually use the panel.",null,"md",[431,434,437,440,443],{"question":432,"answer":433},"What is the keyboard shortcut to inspect element on a Mac?","In Chrome, Edge, Brave, and Firefox on macOS, press Cmd+Option+I to open developer tools, or Cmd+Option+C to jump straight into element-picker mode. You can also right-click anything on the page and choose Inspect. Safari uses the same Cmd+Option+I shortcut, but only after you enable its Develop menu in Settings first.",{"question":435,"answer":436},"Why is there no Inspect Element option in Safari on my Mac?","Safari hides its developer tools by default. Open Safari, go to Safari in the menu bar, choose Settings, click the Advanced tab, and turn on 'Show features for web developers' (older versions call it 'Show Develop menu in menu bar'). After that, right-clicking a page shows Inspect Element and Cmd+Option+I opens the Web Inspector.",{"question":438,"answer":439},"How do I inspect element in Chrome on a Mac?","Right-click anywhere on the page and choose Inspect, or press Cmd+Option+I. The Elements panel opens showing the live HTML, and the Styles panel on the right shows the CSS for whatever you select. Cmd+Option+C opens the same tools already in element-picker mode so you can click the exact thing you want to inspect.",{"question":441,"answer":442},"Can I edit a website's text or design with Inspect Element?","Yes, but only on your own screen. Double-click any text in the Elements panel to change it, or edit CSS values in the Styles panel to recolor or resize things. The changes are local to your browser and disappear the moment you refresh the page. Nobody else sees them, and the real website is never affected.",{"question":444,"answer":445},"How do I save or reuse the code I find with Inspect Element?","DevTools lets you copy one element's HTML or its computed styles, but you have to do it node by node and the styling rarely survives the paste. To keep a whole component as clean, reusable HTML and CSS in one step, use a browser extension like MiroMiro that bundles the markup with the styles that actually apply to it.",{},true,"/blog/how-to-inspect-element-on-mac",6,{"title":5,"description":427},"blog/how-to-inspect-element-on-mac",[453,454,455,456,457,458,459],"how to inspect element on mac","inspect element mac","inspect element shortcut mac","inspect element safari","web inspector","chrome devtools mac","inspect element","19XD5uRPBxdGKaKNP80fpdbWwgjBsBUi9nGiw70pBu0",[],[463,1004,1592],{"id":464,"title":465,"author":6,"body":466,"category":425,"date":426,"dateModified":426,"description":970,"descriptionEs":428,"descriptionJa":428,"descriptionZh":428,"extension":429,"faqs":971,"image":428,"meta":993,"navigation":447,"path":20,"readingTime":994,"seo":995,"stem":996,"tags":997,"thumbnail":428,"titleEs":428,"titleJa":428,"titleZh":428,"__hash__":1003,"score":449},"blog/blog/how-to-inspect-element-on-any-device.md","How to Inspect Element on Any Device or Browser (2026 Guide)",{"type":8,"value":467,"toc":960},[468,471,474,506,510,517,531,538,545,551,558,562,569,572,603,618,629,633,636,642,649,654,678,685,690,717,720,724,727,747,753,759,781,790,794,797,803,821,824,848,859,862,866,877,880,891,899,918,925,932,934,954,956,958],[11,469,470],{},"You spotted a button you like, a layout you want to understand, or a bug on your own page, and someone told you to \"just inspect element.\" It's good advice. Inspect Element is the closest thing the web has to X-ray vision: it shows you exactly how any page is built, for free, in tools you already have.",[11,472,473],{},"The catch is that \"inspect element\" works differently depending on what you're using. A Mac and a Windows laptop use different keys. Safari hides it behind a setting. And on a phone, the honest answer is that there's no button to tap at all. This guide covers all of it accurately, then shows you what to do once inspecting isn't enough.",[24,475,476,480],{"color":26},[11,477,478],{},[30,479,32],{},[34,481,482,485,500,503],{},[37,483,484],{},"Inspect Element opens your browser's developer tools and shows the live HTML and CSS of any page. It's free and already installed.",[37,486,487,488,491,492,495,496,499],{},"Shortcuts: ",[41,489,490],{},"Cmd+Option+I"," on Mac, ",[41,493,494],{},"F12"," or ",[41,497,498],{},"Ctrl+Shift+I"," on Windows and Chromebook, or right-click and choose Inspect.",[37,501,502],{},"Phones have no built-in inspect button. iPhone pairs with Safari on a Mac, Android pairs with Chrome remote debugging on a desktop.",[37,504,505],{},"Edits you make are temporary and local. They vanish on refresh and never touch the real site. To actually reuse a design, you extract it as clean code.",[70,507,509],{"id":508},"what-inspect-element-actually-does-and-where-it-stops","What \"Inspect Element\" actually does (and where it stops)",[11,511,512,513,516],{},"Inspect Element opens your browser's ",[18,514,118],{"href":114,"rel":515,"target":117},[116]," and points them at whatever you clicked. The panel that appears (DevTools, or Web Inspector in Safari) is split into two parts that do most of the work:",[34,518,519,525],{},[37,520,521,524],{},[30,522,523],{},"The Elements panel"," shows the live DOM, the actual HTML structure of the page as it exists right now. Hover over a line and the matching part of the page highlights.",[37,526,527,530],{},[30,528,529],{},"The Styles panel"," shows every CSS rule applying to the element you selected, including which rules win and which get crossed out.",[11,532,533,534,537],{},"That combination answers the questions people open Inspect Element to ask: ",[65,535,536],{},"What font is this? Why is this text blue? Which class controls the layout?"," You can also change values and watch the page update instantly, which makes it a fast sandbox for testing a tweak before you commit it in your real code.",[11,539,540,541,544],{},"Here's the limit that trips people up. ",[30,542,543],{},"Everything you do in Inspect Element is local and temporary."," You're editing a copy of the page that lives in your browser's memory, not the file on the server. Change the headline to \"Hello,\" and it changes on your screen only. Refresh the page and it's back to normal. You cannot break a website by inspecting it, and you cannot save your edits to it either.",[11,546,547,548,550],{},"That distinction matters for the most common reason people inspect a page: they want to ",[65,549,324],{}," something they see. Inspecting shows you the code, but it doesn't hand it to you in a form you can drop into your own project. More on that at the end.",[11,552,553,554,557],{},"If you want the raw HTML the server first delivered (before JavaScript runs), that's a different feature called View Source. The two are easy to confuse, so it's worth reading ",[18,555,556],{"href":392},"how to view and copy a website's source code"," to know which one you actually need.",[70,559,561],{"id":560},"how-to-inspect-element-on-mac-windows-and-chromebook","How to inspect element on Mac, Windows, and Chromebook",[11,563,564,565,568],{},"The fastest way to open Inspect Element on any laptop or desktop is the same gesture everywhere: ",[30,566,567],{},"right-click the thing you're curious about and choose Inspect"," (or Inspect Element). The tools open with that exact element already selected, which saves you hunting for it.",[11,570,571],{},"If you prefer the keyboard, the shortcut depends on your machine:",[34,573,574,581,591],{},[37,575,576,84,579],{},[30,577,578],{},"Mac:",[41,580,43],{},[37,582,583,84,586,495,588],{},[30,584,585],{},"Windows:",[41,587,494],{},[41,589,590],{},"Ctrl + Shift + I",[37,592,593,84,596,598,599,602],{},[30,594,595],{},"Chromebook (Chrome OS):",[41,597,590],{},", or ",[41,600,601],{},"Search + Esc"," then choose the tools",[11,604,605,606,608,609,611,612,495,614,617],{},"A few practical notes. On Mac, ",[41,607,43],{}," works in Chrome, Edge, and Firefox out of the box, but Safari needs one setting flipped first (covered below). On Windows, ",[41,610,494],{}," sometimes collides with a laptop's function-key behavior, so if it does nothing, try ",[41,613,590],{},[41,615,616],{},"Fn + F12",". On a Chromebook the keys match Windows, since Chrome OS runs the same DevTools underneath.",[11,619,620,621,624,625,48],{},"Want the platform-specific walkthrough with every menu path and the quirks unique to macOS? See the full guide to ",[18,622,623],{"href":448},"inspect element on a Mac",". For a complete reference of every key combination across browsers, see ",[18,626,628],{"href":627},"/blog/inspect-element-shortcuts-and-commands","inspect element shortcuts and commands",[70,630,632],{"id":631},"how-to-inspect-element-on-iphone-ipad-and-android","How to inspect element on iPhone, iPad, and Android",[11,634,635],{},"This is where most articles get vague or simply wrong, so here's the accurate version.",[11,637,638,641],{},[30,639,640],{},"Mobile browsers do not have a built-in Inspect Element."," There's no long-press menu on your phone's screen that opens DevTools. Tapping and holding gives you \"copy\" or \"share,\" not \"inspect.\" The reason is partly screen space and partly design: the tools that read and edit a page need a keyboard and a wide window to be usable.",[11,643,644,645,648],{},"What you do instead is ",[30,646,647],{},"inspect the phone's page from a computer."," The page runs on the phone, but the developer tools run on the desktop, connected over a cable.",[11,650,651],{},[30,652,653],{},"To inspect a page on an iPhone or iPad:",[140,655,656,659,669,672],{},[37,657,658],{},"You need a Mac. This route is Apple-only, because the Web Inspector that does the work lives in desktop Safari.",[37,660,661,662,665,666,48],{},"On the iPhone, open ",[30,663,664],{},"Settings → Safari → Advanced"," and turn on ",[30,667,668],{},"Web Inspector",[37,670,671],{},"On the Mac, open Safari, enable the Develop menu (see the next section), then connect the iPhone by cable.",[37,673,674,675,677],{},"In Safari's ",[30,676,181],{}," menu you'll see your iPhone listed with its open tabs. Click a tab and Web Inspector opens on the Mac, showing that page's live code.",[11,679,680,681,48],{},"The step-by-step with screenshots and the common pairing snags is in the dedicated guide to ",[18,682,684],{"href":683},"/blog/how-to-inspect-element-on-iphone","inspect element on iPhone",[11,686,687],{},[30,688,689],{},"To inspect a page on Android:",[140,691,692,702,705,711],{},[37,693,694,695,698,699,48],{},"On the phone, enable ",[30,696,697],{},"Developer options"," (tap the build number seven times in Settings → About), then switch on ",[30,700,701],{},"USB debugging",[37,703,704],{},"Connect the phone to any desktop (Windows, Mac, or Linux) by cable.",[37,706,707,708,48],{},"On the computer, open Chrome and go to ",[41,709,710],{},"chrome://inspect",[37,712,713,714,716],{},"Your phone's open tabs appear in the list. Click ",[30,715,47],{}," next to one and full Chrome DevTools opens on the desktop, wired to the live page on your phone.",[11,718,719],{},"So the short version: yes, you can inspect a phone's page, but never on the phone alone. iPhone needs a Mac, Android needs a desktop running Chrome.",[70,721,723],{"id":722},"how-to-inspect-element-in-chrome-safari-and-firefox","How to inspect element in Chrome, Safari, and Firefox",[11,725,726],{},"The shortcuts above open the tools, but each browser has its own panel layout and one or two setup details worth knowing.",[11,728,729,732,733,735,736,154,738,740,741,746],{},[30,730,731],{},"Chrome (and Edge)."," Nothing to enable. ",[41,734,494],{},", ",[41,737,590],{},[41,739,43],{}," on Mac), or right-click → Inspect all work immediately. Chrome's tools are the most documented of the bunch; the official ",[18,742,745],{"href":743,"rel":744,"target":117},"https://developer.chrome.com/docs/devtools/",[116],"Chrome DevTools documentation"," is the reference most developers reach for. Edge uses the same engine, so everything here applies to it too.",[11,748,749,752],{},[30,750,751],{},"Firefox."," Also ready by default. Use the same shortcuts or right-click → Inspect (Firefox labels it \"Inspect\" as well). Its Inspector and Style Editor sit in slightly different places than Chrome's, but the concepts map one to one: live HTML on the left, applied CSS on the right.",[11,754,755,758],{},[30,756,757],{},"Safari."," This is the one that needs a toggle first, which is why so many Mac users think they \"don't have\" Inspect Element. To turn it on:",[140,760,761,767,775],{},[37,762,763,764,48],{},"Open Safari and go to ",[30,765,766],{},"Settings → Advanced",[37,768,769,770,772,773,158],{},"Tick ",[30,771,171],{}," (older versions call it ",[30,774,175],{},[37,776,777,778,780],{},"A ",[30,779,181],{}," menu now appears in Safari's menu bar.",[11,782,783,784,786,787,789],{},"After that, right-click any element and choose ",[30,785,107],{},", or press ",[41,788,43],{},". Safari's Web Inspector is also the tool you use for the iPhone workflow above, so enabling it here does double duty.",[70,791,793],{"id":792},"editing-text-and-styles-with-inspect-element","Editing text and styles with Inspect Element",[11,795,796],{},"Inspect Element isn't read-only. You can change the page live, which is genuinely useful for testing an idea before you write real code.",[11,798,799,802],{},[30,800,801],{},"To edit text:"," double-click any text node in the Elements panel and type. The page updates as you type. This is handy for previewing a headline change or checking whether a longer label breaks the layout.",[11,804,805,808,809,812,813,816,817,820],{},[30,806,807],{},"To edit styles:"," select an element, then in the Styles panel click a value and change it. Type a new color, bump the ",[41,810,811],{},"padding",", switch ",[41,814,815],{},"display: block"," to ",[41,818,819],{},"flex",", and the page reflows instantly. You can also add a brand-new property by clicking the blank space inside a rule.",[11,822,823],{},"A few things make this more powerful than it first looks:",[34,825,826,832,838],{},[37,827,828,831],{},[30,829,830],{},"Toggle rules on and off"," with the checkbox next to each one, to see what a single property is actually doing.",[37,833,834,837],{},[30,835,836],{},"Use the device toolbar"," (the phone icon in Chrome's DevTools) to preview how the page responds at different screen widths.",[37,839,840,843,844,847],{},[30,841,842],{},"Inspect hover states"," by forcing ",[41,845,846],{},":hover"," from the Styles panel, so you can read styles that only appear on interaction.",[11,849,850,851,854,855,858],{},"And then the part everyone learns the hard way: ",[30,852,853],{},"none of it saves."," The moment you refresh, navigate away, or close the tab, every edit disappears. That's by design. You're working on a throwaway copy. It makes Inspect Element a safe place to experiment, and a frustrating place if you were hoping to ",[65,856,857],{},"keep"," what you built.",[11,860,861],{},"So if you tweaked a component into something you love, you still have to recreate it in your real codebase by hand. Which raises the obvious question.",[70,863,865],{"id":864},"from-inspecting-to-reusing-getting-the-design-as-clean-code","From inspecting to reusing: getting the design as clean code",[11,867,868,869,872,873,876],{},"Here's the gap. Inspect Element is excellent at ",[65,870,871],{},"showing"," you how a page is built. It's poor at ",[65,874,875],{},"handing it over"," in a form you can reuse.",[11,878,879],{},"You can right-click an element in DevTools and choose Copy → Copy element (the HTML) or Copy styles (its computed CSS). For a quick reference, fine. But paste it into a fresh file and it almost never looks right, because:",[34,881,882,885,888],{},[37,883,884],{},"The HTML references stylesheets you didn't copy, so you get an unstyled skeleton.",[37,886,887],{},"\"Copy styles\" dumps one node's final values, missing inherited rules, hover states, media queries, and the styles on every child element.",[37,889,890],{},"You get a flat blob instead of the clean class structure the site actually uses.",[11,892,893,894,898],{},"For a single button that's a minor annoyance. For a hero section, a pricing table, or a navbar, you end up rebuilding it by hand, which can eat an afternoon. This is the same wall you hit when ",[18,895,897],{"href":896},"/blog/how-to-copy-ui-components-from-any-website-into-cursor-claude-v0","copying UI components into Cursor, Claude, or v0",": the raw DevTools output is too messy to be useful context.",[11,900,901,902,904,905,908,909,912,913,917],{},"The fix is to extract the whole component as clean, complete code in one step instead of copying node by node. That's what a ",[18,903,457],{"href":369}," built for reuse does. ",[18,906,336],{"href":334,"rel":907},[116]," is a free Chrome extension: click any element or section on a live page and get its ",[30,910,911],{},"HTML bundled with the CSS that actually applies to it",", as clean Tailwind or vanilla CSS, with the real fonts, colors, and structure included. The kind of ",[18,914,916],{"href":915},"/blog/design-tools-that-export-clean-html-css","export-ready HTML and CSS"," you can paste without untangling it first.",[11,919,920,921,924],{},"So instead of inspect → copy element → copy styles → paste → rebuild, it's: click the section, copy, paste, done. You can reuse it directly or hand it to an AI tool as accurate context. If your goal is a whole page rather than one section, the same idea scales: ",[18,922,923],{"href":399},"turn any website into clean code"," from its URL.",[11,926,927,931],{},[18,928,930],{"href":334,"rel":929},[116],"Install MiroMiro for free"," and copy your first clean component in under 30 seconds.",[70,933,379],{"id":378},[34,935,936,942,948],{},[37,937,938,941],{},[18,939,940],{"href":392},"How to view and copy any website's source code",". View Source, DevTools, and the clean one-click route, compared.",[37,943,944,947],{},[18,945,946],{"href":896},"How to copy UI components into Cursor, Claude, and v0",". Turn what you inspect into real AI context.",[37,949,950,953],{},[18,951,952],{"href":915},"Design tools that export clean HTML and CSS",". When you need code you can paste, not untangle.",[70,955,405],{"id":404},[11,957,408],{},[410,959],{},{"title":413,"searchDepth":414,"depth":414,"links":961},[962,963,964,965,966,967,968,969],{"id":508,"depth":414,"text":509},{"id":560,"depth":414,"text":561},{"id":631,"depth":414,"text":632},{"id":722,"depth":414,"text":723},{"id":792,"depth":414,"text":793},{"id":864,"depth":414,"text":865},{"id":378,"depth":414,"text":379},{"id":404,"depth":414,"text":405},"Inspect element on any device or browser. Keyboard shortcuts for Mac, Windows, and Chromebook, the truth about phones, plus how to reuse the code you find.",[972,975,978,981,984,987,990],{"question":973,"answer":974},"What is Inspect Element?","Inspect Element is a feature built into every desktop browser that opens the developer tools and shows you the live HTML and CSS of the page you're looking at. You can hover over any part of the page to see which code produces it, read the styles applying to it, and make temporary edits. It's free, it's already installed, and it's the standard way developers and designers see how a site is built.",{"question":976,"answer":977},"Is Inspect Element free?","Yes. Inspect Element is part of the browser itself, so there's nothing to install and nothing to pay. Chrome, Safari, Firefox, and Edge all ship with developer tools that include it. The only setup is enabling the Develop menu in Safari, which is a one-time toggle in settings.",{"question":979,"answer":980},"Can you inspect element on a phone?","Not directly. Mobile browsers on iPhone and Android don't have a built-in Inspect Element you can open by tapping the screen. To inspect a page running on a phone, you connect it to a computer: an iPhone pairs with Safari's Web Inspector on a Mac, and an Android phone pairs with Chrome's remote debugging on any desktop. The page runs on the phone, but you read and edit its code on the computer.",{"question":982,"answer":983},"Do changes made with Inspect Element save?","No. Anything you edit in Inspect Element lives only in your browser's memory for that session. Refresh the page and every change is gone. You're editing a local copy of the page, not the real site on the server, so you can't break the actual website and you can't permanently change it either.",{"question":985,"answer":986},"How do I open Inspect Element on a Mac?","Press Cmd+Option+I in Chrome, Firefox, or Edge to open developer tools, or right-click any element and choose Inspect. In Safari you first enable the Develop menu in Settings, then press Cmd+Option+I or right-click and choose Inspect Element.",{"question":988,"answer":989},"What's the difference between Inspect Element and View Source?","View Source (Ctrl+U) shows the raw HTML document the server first sent, before any JavaScript runs. Inspect Element shows the live, rendered page as it exists right now, including everything JavaScript added or changed. On modern sites built with React or Vue, View Source often looks nearly empty, so Inspect Element is what you usually want.",{"question":991,"answer":992},"Can I copy the code I see in Inspect Element and reuse it?","You can copy a single element's HTML or its computed styles, but reusing it elsewhere rarely works on the first try. The HTML references stylesheets you didn't copy, and the computed styles miss inherited rules, hover states, and child elements. To get a whole component as clean, paste-ready HTML and CSS, a dedicated extraction tool does in one click what manual copying does poorly.",{},9,{"title":465,"description":970},"blog/how-to-inspect-element-on-any-device",[459,998,999,454,1000,457,1001,1002],"how to inspect element","inspect element chrome","inspect element iphone","devtools","view source","-WIHZmswn5i_ay-Belde8eLsEa12n7ByCGAq4cYuU2s",{"id":1005,"title":1006,"author":6,"body":1007,"category":425,"date":426,"dateModified":426,"description":1560,"descriptionEs":428,"descriptionJa":428,"descriptionZh":428,"extension":429,"faqs":1561,"image":428,"meta":1580,"navigation":447,"path":627,"readingTime":1581,"seo":1582,"stem":1583,"tags":1584,"thumbnail":428,"titleEs":428,"titleJa":428,"titleZh":428,"__hash__":1590,"score":1591},"blog/blog/inspect-element-shortcuts-and-commands.md","Inspect Element Shortcuts & Commands (Chrome, Mac, Windows)",{"type":8,"value":1008,"toc":1552},[1009,1012,1052,1056,1059,1182,1185,1214,1221,1225,1228,1241,1253,1259,1293,1304,1308,1311,1387,1390,1394,1400,1406,1421,1425,1431,1441,1465,1525,1535,1545,1547,1550],[11,1010,1011],{},"The fastest way to see how any website is built is one keypress away. The trouble is that the inspect element shortcut is different on Windows than on Mac, and a few browsers add their own quirks on top. This is the complete reference: every shortcut by operating system and browser, the commands worth knowing once DevTools is open, and what to do when the changes you make vanish on refresh.",[24,1013,1014,1018],{"color":26},[11,1015,1016],{},[30,1017,32],{},[34,1019,1020,1030,1040,1046,1049],{},[37,1021,1022,1023,495,1025,1027,1028,48],{},"On Windows and Linux the inspect element shortcut is ",[41,1024,494],{},[41,1026,498],{},"; on Mac it is ",[41,1029,490],{},[37,1031,1032,1035,1036,1039],{},[41,1033,1034],{},"Ctrl+Shift+C"," (or ",[41,1037,1038],{},"Cmd+Option+C"," on Mac) jumps straight into the element picker so your next click selects a node.",[37,1041,1042,1043,1045],{},"Right-click then ",[30,1044,47],{}," is the universal mouse method and works in every browser.",[37,1047,1048],{},"Safari hides inspect element until you turn on the Develop menu in Settings.",[37,1050,1051],{},"Edits in DevTools never save. To keep what you change, export it as real code.",[70,1053,1055],{"id":1054},"the-universal-inspect-element-keyboard-shortcuts","The universal Inspect Element keyboard shortcuts",[11,1057,1058],{},"Most browsers share the same keys because Chrome, Edge, and Brave all run on the same engine. Firefox matches them too. Safari is the one exception, and even it uses the same shortcut once you flip a setting. Here is the full grid.",[1060,1061,1062,1081],"table",{},[1063,1064,1065],"thead",{},[1066,1067,1068,1072,1075,1078],"tr",{},[1069,1070,1071],"th",{},"OS",[1069,1073,1074],{},"Browser",[1069,1076,1077],{},"Open DevTools",[1069,1079,1080],{},"Pick / inspect element",[1082,1083,1084,1103,1120,1135,1149,1164],"tbody",{},[1066,1085,1086,1090,1093,1099],{},[1087,1088,1089],"td",{},"Windows / Linux",[1087,1091,1092],{},"Chrome, Edge, Brave",[1087,1094,1095,495,1097],{},[41,1096,494],{},[41,1098,498],{},[1087,1100,1101],{},[41,1102,1034],{},[1066,1104,1105,1107,1110,1116],{},[1087,1106,1089],{},[1087,1108,1109],{},"Firefox",[1087,1111,1112,495,1114],{},[41,1113,494],{},[41,1115,498],{},[1087,1117,1118],{},[41,1119,1034],{},[1066,1121,1122,1125,1127,1131],{},[1087,1123,1124],{},"Mac",[1087,1126,1092],{},[1087,1128,1129],{},[41,1130,490],{},[1087,1132,1133],{},[41,1134,1038],{},[1066,1136,1137,1139,1141,1145],{},[1087,1138,1124],{},[1087,1140,1109],{},[1087,1142,1143],{},[41,1144,490],{},[1087,1146,1147],{},[41,1148,1038],{},[1066,1150,1151,1153,1155,1160],{},[1087,1152,1124],{},[1087,1154,147],{},[1087,1156,1157,1159],{},[41,1158,490],{},"*",[1087,1161,1162],{},[41,1163,1038],{},[1066,1165,1166,1169,1172,1177],{},[1087,1167,1168],{},"Any",[1087,1170,1171],{},"Any (mouse)",[1087,1173,1174,1175],{},"Right-click → ",[30,1176,47],{},[1087,1178,1179,1180],{},"Right-click element → ",[30,1181,47],{},[11,1183,1184],{},"*Safari needs the Develop menu enabled first. More on that below.",[11,1186,1187,1188,1190,1191,1035,1193,1195,1196,1199,1200,1035,1202,1204,1205,1208,1209,48],{},"There are two distinct actions worth keeping straight. ",[41,1189,494],{}," and ",[41,1192,498],{},[41,1194,490],{},") ",[30,1197,1198],{},"open the DevTools panel",". ",[41,1201,1034],{},[41,1203,1038],{},") opens DevTools ",[65,1206,1207],{},"and"," immediately turns on the element picker, so the very next thing you click on the page gets selected and highlighted in the Elements tab. If you already know which element you want, the picker shortcut saves a step. Chrome keeps a full list in its ",[18,1210,1213],{"href":1211,"rel":1212,"target":117},"https://developer.chrome.com/docs/devtools/shortcuts/",[116],"DevTools shortcuts docs",[11,1215,1216,1217,48],{},"For a deeper primer on what DevTools actually is, MDN has a clear overview of ",[18,1218,1220],{"href":114,"rel":1219,"target":117},[116],"browser developer tools",[70,1222,1224],{"id":1223},"how-to-open-enable-turn-on-inspect-element","How to open, enable & turn on Inspect Element",[11,1226,1227],{},"If a keyboard shortcut feels fiddly, every browser gives you a menu route too.",[11,1229,1230,1233,1234,1237,1238,1240],{},[30,1231,1232],{},"Chrome, Edge, Brave:"," click the three-dot menu, then ",[30,1235,1236],{},"More tools → Developer tools",". Or just right-click any spot on the page and choose ",[30,1239,47],{},". Right-clicking is often the quickest path because it opens DevTools with that exact element pre-selected.",[11,1242,1243,1246,1247,1250,1251,48],{},[30,1244,1245],{},"Firefox:"," open the hamburger menu, then ",[30,1248,1249],{},"More tools → Web Developer Tools",", or right-click and choose ",[30,1252,47],{},[11,1254,1255,1258],{},[30,1256,1257],{},"Safari (the one that needs setup):"," Safari hides its developer tools by default. To turn on inspect element:",[140,1260,1261,1269,1273,1281],{},[37,1262,144,1263,1265,1266,158],{},[30,1264,153],{}," (or press ",[41,1267,1268],{},"Cmd+,",[37,1270,161,1271,165],{},[30,1272,164],{},[37,1274,1275,1276,1278,1279,158],{},"Check ",[30,1277,171],{}," (older versions call this ",[30,1280,175],{},[37,1282,1283,1284,1286,1287,1289,1290,1292],{},"A new ",[30,1285,181],{}," menu appears in the menu bar. Now ",[41,1288,490],{}," works, and right-click → ",[30,1291,107],{}," is available.",[11,1294,1295,1298,1299,1303],{},[30,1296,1297],{},"If inspect element is greyed out or missing:"," the usual cause on a work or school computer is a device-management policy that disables DevTools in Chrome or Edge. There is no in-browser fix for that; it is controlled by your IT admin. On Safari, a missing option just means the Develop menu is not enabled yet, so run through the four steps above. Some websites also try to block the right-click menu with a script. That only disables the context menu, not the tools themselves, so the keyboard shortcut or the browser menu still opens DevTools. If you need to do this from a tablet or phone, our guide on ",[18,1300,1302],{"href":1301},"/blog/how-to-open-inspect-element","how to open inspect element"," covers the connected-device routes step by step.",[70,1305,1307],{"id":1306},"useful-devtools-commands-once-its-open","Useful DevTools commands once it's open",[11,1309,1310],{},"The shortcut gets you in. These commands are what make the panel actually fast to use.",[34,1312,1313,1326,1336,1354,1366],{},[37,1314,1315,1325],{},[30,1316,1317,1318,154,1321,1324],{},"Search the DOM with ",[41,1319,1320],{},"Ctrl+F",[41,1322,1323],{},"Cmd+F"," on Mac)."," With the Elements panel focused, this opens a search box that scans the live HTML. Type a class name, an ID, some text content, or even a CSS selector, and it jumps to matching nodes. This is the fastest way to find a buried element without endless scrolling.",[37,1327,1328,1335],{},[30,1329,1330,1331,154,1333,158],{},"The element picker, ",[41,1332,1034],{},[41,1334,1038],{}," Toggles the cursor-with-crosshair mode. Hover over the page and DevTools highlights each element with its size and spacing; click to lock it into the Elements panel. It is the same action as right-click → Inspect, just keyboard-driven.",[37,1337,1338,1341,1342,1345,1346,1349,1350,1353],{},[30,1339,1340],{},"Edit as HTML."," Right-click any node in the Elements panel and choose ",[30,1343,1344],{},"Edit as HTML"," to rewrite the raw markup of that element and its children inline. Press ",[41,1347,1348],{},"Esc","'s sibling, ",[41,1351,1352],{},"Ctrl+Enter",", to commit, or click away.",[37,1355,1356,1365],{},[30,1357,1358,1359,154,1362,158],{},"The device toolbar, ",[41,1360,1361],{},"Ctrl+Shift+M",[41,1363,1364],{},"Cmd+Shift+M"," This toggles responsive design mode. You get a resizable viewport with presets for common phones and tablets, so you can check how a layout reflows without a real device. Pair it with the picker to inspect the mobile version of any element.",[37,1367,1368,1371,1372,1375,1376,1379,1380,1382,1383,1386],{},[30,1369,1370],{},"Copy options."," Right-click a node and open the ",[30,1373,1374],{},"Copy"," submenu for ",[30,1377,1378],{},"Copy element"," (the HTML), ",[30,1381,299],{}," (its computed CSS), or ",[30,1384,1385],{},"Copy selector"," (a CSS path to it).",[11,1388,1389],{},"That last one points at the real limitation, which the next two sections get into.",[70,1391,1393],{"id":1392},"editing-text-styles-with-inspect-element","Editing text & styles with Inspect Element",[11,1395,1396,1397,1399],{},"One of the most satisfying tricks DevTools allows is live editing. Double-click any text in the Elements panel and retype it, and the page updates instantly. Click a value in the ",[30,1398,244],{}," panel on the right and change a color, a font size, or a margin, and you watch it apply in real time. People use this to preview copy changes, test a new brand color, or screenshot a \"what if\" version of a competitor's page.",[11,1401,1402,1403,1405],{},"Here is the catch that surprises everyone the first time: ",[30,1404,853],{}," Refresh the tab and every edit is gone. That is not a bug. DevTools is editing your browser's local, in-memory copy of the page, not the files sitting on the server. You have full read-and-edit access to what your browser downloaded, and zero write access to the source. The moment the page reloads, the original code comes back down from the server and overwrites your tweaks.",[11,1407,1408,1409,1412,1413,1416,1417,1420],{},"So inspect element is a brilliant ",[65,1410,1411],{},"viewer"," and a temporary ",[65,1414,1415],{},"sandbox",". What it is not is a way to take anything with you. If you only wanted to see the code or fake a screenshot, you are done. If you wanted to reuse what you found, that is a different problem. The same gap shows up when you try to ",[18,1418,1419],{"href":392},"view and copy a website's source code",": seeing it is easy, keeping it cleanly is not.",[70,1422,1424],{"id":1423},"make-edits-permanent-export-what-you-change-as-real-code","Make edits permanent: export what you change as real code",[11,1426,1427,1428,1430],{},"The reason a DevTools edit cannot survive a refresh is the reason copy-pasting from it rarely works either. ",[30,1429,299],{}," hands you one node's flat computed values, not the cascade, not the child elements, not the hover states or media queries. So you paste it into a new file and get an unstyled skeleton or a blob of inline CSS that needs untangling. For a single button it is fine. For a hero, a pricing table, or a navbar it is an afternoon of reconstruction.",[11,1432,1433,1434,1437,1438,1440],{},"The fix is to extract the live element as clean, self-contained code in one step instead of node by node. That is exactly what ",[18,1435,336],{"href":334,"rel":1436},[116]," does. It is a free Chrome extension and a ",[18,1439,457],{"href":369}," that lets you click any element on a page and get:",[34,1442,1443,1450,1459,1462],{},[37,1444,1445,1446,1449],{},"The ",[30,1447,1448],{},"HTML plus the CSS that actually applies to it",", bundled together rather than referenced",[37,1451,349,1452,1454,1455,1458],{},[30,1453,352],{}," output or ",[30,1456,1457],{},"vanilla HTML and CSS",", whichever you prefer",[37,1460,1461],{},"The whole component, including nested children and real structure, not one node at a time",[37,1463,1464],{},"True colors, fonts, and spacing values, alongside any SVGs and assets",[1060,1466,1467,1479],{},[1063,1468,1469],{},[1066,1470,1471,1473,1476],{},[1069,1472],{},[1069,1474,1475],{},"DevTools copy",[1069,1477,1478],{},"Extract real code (MiroMiro)",[1082,1480,1481,1492,1503,1514],{},[1066,1482,1483,1486,1489],{},[1087,1484,1485],{},"HTML",[1087,1487,1488],{},"One node at a time",[1087,1490,1491],{},"Whole component, nested",[1066,1493,1494,1497,1500],{},[1087,1495,1496],{},"CSS",[1087,1498,1499],{},"Flat computed dump",[1087,1501,1502],{},"The real cascade that applies",[1066,1504,1505,1508,1511],{},[1087,1506,1507],{},"Survives refresh?",[1087,1509,1510],{},"No",[1087,1512,1513],{},"Yes, it leaves the browser",[1066,1515,1516,1519,1522],{},[1087,1517,1518],{},"Reusable?",[1087,1520,1521],{},"Needs heavy cleanup",[1087,1523,1524],{},"Paste and edit",[11,1526,1527,1528,1531,1532,1534],{},"So the workflow becomes: use the inspect element shortcut to find the section, then export it as code you can actually keep. From there you can drop it into your own project, or ",[18,1529,1530],{"href":896},"paste it into Cursor, Claude, or v0"," as accurate context so the AI adapts real code instead of guessing from a screenshot. If you want the bigger picture, ",[18,1533,923],{"href":399}," covers the full one-click path.",[11,1536,1537,1538,1540,1541,1544],{},"Shortcuts let you inspect anything. Reusing what you inspect, cleanly, is the part the keyboard cannot do. And if you ever need to inspect from a phone or tablet where there is no ",[41,1539,494],{}," key, ",[18,1542,1543],{"href":20},"how to inspect element on any device or browser"," walks through every platform.",[70,1546,405],{"id":404},[11,1548,1549],{},"If you build for a living, you are probably already paying for Cursor, Claude, and v0. That is €75+/month, every month, before you ship anything. MiroMiro is the one piece of that workflow that does not have to be another recurring bill. It is €9/month, or €69 one-time for one of the 125 lifetime spots:",[410,1551],{},{"title":413,"searchDepth":414,"depth":414,"links":1553},[1554,1555,1556,1557,1558,1559],{"id":1054,"depth":414,"text":1055},{"id":1223,"depth":414,"text":1224},{"id":1306,"depth":414,"text":1307},{"id":1392,"depth":414,"text":1393},{"id":1423,"depth":414,"text":1424},{"id":404,"depth":414,"text":405},"The inspect element shortcut for every browser and OS: F12, Ctrl+Shift+I, Cmd+Option+I, plus the DevTools commands and how to reuse what you find as real code.",[1562,1565,1568,1571,1574,1577],{"question":1563,"answer":1564},"What is the keyboard shortcut to inspect element?","On Windows and Linux, press F12 or Ctrl+Shift+I to open DevTools, then Ctrl+Shift+C to activate the element picker. On Mac, the inspect element shortcut is Cmd+Option+I to open DevTools and Cmd+Option+C to pick an element. These work in Chrome, Edge, Brave, and Firefox. In Safari you enable the Develop menu first, then use the same Cmd+Option+I.",{"question":1566,"answer":1567},"How do I open inspect element on Chrome?","The Chrome inspect element shortcut is F12 or Ctrl+Shift+I on Windows and Linux, and Cmd+Option+I on Mac. You can also right-click anywhere on the page and choose Inspect, which opens DevTools with that exact element already highlighted in the Elements panel. The same keys work in Edge and Brave because they share Chrome's engine.",{"question":1569,"answer":1570},"What is the inspect element shortcut on Mac?","On Mac, press Cmd+Option+I to open DevTools and Cmd+Option+C to start the element picker. This is the inspect element shortcut in Chrome, Edge, Brave, and Firefox. Safari uses the same keys, but you first have to turn on the Develop menu under Safari, Settings, Advanced, then check 'Show features for web developers'.",{"question":1572,"answer":1573},"Why is inspect element greyed out or missing?","In Safari it is hidden until you enable the Develop menu in Settings, Advanced. In Chrome and Edge, a managed work or school device can disable DevTools through policy, which greys out the option. Some sites also try to block the right-click menu with JavaScript, but the keyboard shortcut and the browser menu still open DevTools.",{"question":1575,"answer":1576},"How do I inspect element on a phone?","Phones have no built-in inspect element shortcut. On Android you connect the phone to a computer with USB and use Chrome's remote debugging at chrome://inspect. On iPhone you connect to a Mac and use Safari's Web Inspector. For inspecting on the go without a cable, see our guide on how to inspect element on any device.",{"question":1578,"answer":1579},"How do I save the changes I make in inspect element?","You cannot. Edits in DevTools live only in your browser tab and disappear the moment you refresh, because you are changing your local copy of the page, not the server's files. To keep what you change, you have to export it as real HTML and CSS. A tool like MiroMiro extracts the live code of any element so the styling survives outside the browser.",{},7,{"title":1006,"description":1560},"blog/inspect-element-shortcuts-and-commands",[1585,1586,1302,1587,455,1588,459,1589],"inspect element shortcut","inspect element commands","inspect element chrome shortcut","devtools shortcut","chrome devtools","X3PTaaxsgtvboE04IcPGBi058wZahf0zRNrkOODeBpc",5,{"id":1593,"title":1594,"author":6,"body":1595,"category":425,"date":426,"dateModified":426,"description":1859,"descriptionEs":428,"descriptionJa":428,"descriptionZh":428,"extension":429,"faqs":1860,"image":428,"meta":1876,"navigation":447,"path":683,"readingTime":449,"seo":1877,"stem":1878,"tags":1879,"thumbnail":428,"titleEs":428,"titleJa":428,"titleZh":428,"__hash__":1886,"score":1887},"blog/blog/how-to-inspect-element-on-iphone.md","How to Inspect Element on iPhone (2026 Guide)",{"type":8,"value":1596,"toc":1851},[1597,1600,1603,1644,1648,1654,1657,1664,1668,1677,1747,1750,1754,1757,1763,1769,1775,1779,1790,1801,1807,1811,1822,1825,1835,1844,1846,1849],[11,1598,1599],{},"You found a layout, a button, or an animation on your iPhone and you want to see how it's built. So you long-press, you dig through the share sheet, you check Settings, and there's nothing. No inspect element, no view source, no developer tools you can open on the phone.",[11,1601,1602],{},"That's not your iPhone being broken. Safari on iOS genuinely has no built-in inspector you can open on the device itself. The good news is there's a real, supported way to inspect an iPhone's pages, plus a couple of honest workarounds when you don't have the hardware for it.",[24,1604,1605,1609,1641],{"color":26},[11,1606,1607],{},[30,1608,32],{},[34,1610,1611,1617,1623,1629,1635],{},[37,1612,1613,1616],{},[30,1614,1615],{},"iOS Safari has no on-device inspect element."," You cannot open developer tools on the phone alone.",[37,1618,1619,1622],{},[30,1620,1621],{},"The real method needs a Mac."," Enable Web Inspector on the iPhone, connect by USB, and inspect the page from Safari's Develop menu on the Mac.",[37,1624,1625,1628],{},[30,1626,1627],{},"No Mac?"," Third-party inspector apps and bookmarklets like Eruda approximate it. They are workarounds, not the genuine Web Inspector.",[37,1630,1631,1634],{},[30,1632,1633],{},"Viewing source"," on iOS is possible with a small bookmarklet, which is lighter than full inspection.",[37,1636,1637,1640],{},[30,1638,1639],{},"Copying the code cleanly"," is the real bottleneck. Spotting an element is easy. Reusing its HTML and CSS is the hard part.",[1642,1643],"hr",{},[70,1645,1647],{"id":1646},"why-theres-no-inspect-element-on-the-iphone-itself","Why there's no inspect element on the iPhone itself",[11,1649,1650,1651,1653],{},"On a desktop you right-click and choose ",[30,1652,47],{},", and developer tools open in the same window. iOS doesn't work that way. Safari for iPhone ships without any visible developer tools, and there's no setting that adds an in-page inspector.",[11,1655,1656],{},"Apple's reasoning is that the inspector is heavy and built for a keyboard-and-mouse workflow. So instead of running on the phone, the tooling runs on a Mac and reaches across a cable into the iPhone's live Safari session. The phone renders the page. The Mac does the inspecting.",[11,1658,1659,1660,1663],{},"That means the honest answer to \"how to inspect element on iPhone\" is: you inspect it ",[65,1661,1662],{},"from"," a computer, not on the phone. Here's exactly how.",[70,1665,1667],{"id":1666},"the-real-method-inspect-an-iphone-page-from-a-mac","The real method: inspect an iPhone page from a Mac",[11,1669,1670,1671,1676],{},"This is the supported, accurate path, and it gives you the genuine ",[18,1672,1675],{"href":1673,"rel":1674,"target":117},"https://developer.apple.com/documentation/safari-developer-tools",[116],"Safari Web Inspector"," with the live DOM, real styles, the console, and the network panel.",[140,1678,1679,1701,1711,1726,1732,1741],{},[37,1680,1681,1684,1685,1688,1689,1692,1693,1692,1695,1697,1698,1700],{},[30,1682,1683],{},"On the iPhone, turn on Web Inspector."," Open ",[30,1686,1687],{},"Settings",", go to ",[30,1690,1691],{},"Apps",", then ",[30,1694,147],{},[30,1696,164],{},", and switch ",[30,1699,668],{}," on. (On older iOS versions the path is Settings, Safari, Advanced.)",[37,1702,1703,1706,1707,1710],{},[30,1704,1705],{},"Connect the iPhone to the Mac with a USB cable."," A wireless connection is possible later, but a cable is the reliable way to start. Tap ",[30,1708,1709],{},"Trust"," if the iPhone asks.",[37,1712,1713,1716,1717,1719,1720,1722,1723,1725],{},[30,1714,1715],{},"On the Mac, enable Safari's Develop menu."," Open Safari, go to ",[30,1718,1687],{},", then the ",[30,1721,164],{}," tab, and tick ",[30,1724,171],{}," (older versions call it \"Show Develop menu in menu bar\").",[37,1727,1728,1731],{},[30,1729,1730],{},"Open the page on the iPhone."," Browse to the site you want to inspect in Safari on the phone and leave that tab open.",[37,1733,1734,1737,1738,1740],{},[30,1735,1736],{},"On the Mac, open the Develop menu."," Click ",[30,1739,181],{}," in the menu bar, find your iPhone by name in the list, and choose the open tab underneath it.",[37,1742,1743,1746],{},[30,1744,1745],{},"Inspect."," The Web Inspector opens on the Mac, showing the iPhone's live page. Hover nodes to highlight them on the phone, click an element to see its styles, and use the console exactly as you would on desktop.",[11,1748,1749],{},"This is the only way to get Safari's true inspector against a real iPhone. If you have a Mac, use it. Nothing else is as accurate.",[70,1751,1753],{"id":1752},"no-mac-honest-workarounds","No Mac? Honest workarounds",[11,1755,1756],{},"If you're on Windows, or you simply don't have a Mac nearby, there's no first-party route to Safari's Web Inspector. Be clear-eyed about that. What follows are approximations, useful but imperfect.",[11,1758,1759,1762],{},[30,1760,1761],{},"Third-party inspector browsers."," Some iOS apps (search the App Store for an \"Inspect Browser\" type tool) bundle their own lightweight DevTools-style panel. You browse inside the app rather than Safari, and you get a basic element view and console. The catch: it's the app's engine and its own inspector, not Safari's, so results can differ from what real Safari renders.",[11,1764,1765,1768],{},[30,1766,1767],{},"A bookmarklet console like Eruda."," Eruda is an open-source mobile debug console you load into any page by tapping a bookmark. It injects a floating panel with elements, console, and network tabs. It runs inside the page, so it can't see everything a native inspector can, but for quick checks on the go it's genuinely handy.",[11,1770,1771,1774],{},[30,1772,1773],{},"Desktop emulation as a sanity check."," When you only need to understand a responsive layout, open the same URL in Chrome DevTools on a desktop and switch on device emulation. It mimics an iPhone viewport. It is not the same as a real device, but it's fast and it's free.",[70,1776,1778],{"id":1777},"how-to-view-page-source-on-iphone","How to view page source on iPhone",[11,1780,1781,1782,1785,1786,1789],{},"Sometimes you don't need a full inspector. You just want the raw HTML. Safari on iOS hides the ",[41,1783,1784],{},"view-source:"," trick, but a ",[30,1787,1788],{},"bookmarklet"," brings it back:",[140,1791,1792,1795,1798],{},[37,1793,1794],{},"Bookmark any page in Safari.",[37,1796,1797],{},"Edit that bookmark and replace its address with a small JavaScript snippet that opens the current page's source (search \"view source bookmarklet\" for a ready-made one).",[37,1799,1800],{},"Tap the bookmark on any page to read its markup.",[11,1802,1803,1804,48],{},"This is lighter than inspection and good for a quick look at meta tags or structure. For live, rendered HTML and CSS, you still want the Mac and Web Inspector route above. If you want the full picture of source-viewing across devices, see ",[18,1805,1806],{"href":392},"how to view and copy any website's source code",[70,1808,1810],{"id":1809},"the-part-everyone-skips-copying-the-code-cleanly","The part everyone skips: copying the code cleanly",[11,1812,1813,1814,1817,1818,1821],{},"Here's the honest pivot. Even once you're inspecting an iPhone page from a Mac, ",[30,1815,1816],{},"seeing"," the code and ",[30,1819,1820],{},"reusing"," it are two different jobs.",[11,1823,1824],{},"Web Inspector and DevTools let you copy a single node's HTML or its computed styles. But you don't get the full cascade, the inherited rules, the hover states, or the child elements' CSS. Paste that into a fresh project and it looks broken. For one button, fine. For a whole section, you're rebuilding it by hand.",[11,1826,1827,1828,1831,1832,1834],{},"This is where the desktop side of your workflow does the heavy lifting. ",[18,1829,336],{"href":334,"rel":1830},[116]," is a desktop Chrome extension, so you run it on the Mac or PC after you've spotted something on mobile. You click an element or a whole section on the live site and get its complete, clean code in one step: the HTML plus the CSS that actually applies, as Tailwind or vanilla, with the real structure intact. It's the ",[18,1833,457],{"href":369}," for reuse, not just for looking.",[11,1836,1837,1838,1840,1841,48],{},"If your goal is to take what you found on your phone and actually build with it, the desktop extraction step is what saves the afternoon. You can read more about that flow in ",[18,1839,923],{"href":399},", and this whole topic sits under our pillar guide, ",[18,1842,1843],{"href":20},"how to inspect element on any device",[70,1845,405],{"id":404},[11,1847,1848],{},"If you build for a living you're probably already paying for Cursor, Claude, and v0, which is €75+/month before you ship anything. MiroMiro is the one tool in that workflow that doesn't have to be another recurring bill. It's free to install, and there's a €69 one-time option (125 lifetime spots) instead of €9/month:",[410,1850],{},{"title":413,"searchDepth":414,"depth":414,"links":1852},[1853,1854,1855,1856,1857,1858],{"id":1646,"depth":414,"text":1647},{"id":1666,"depth":414,"text":1667},{"id":1752,"depth":414,"text":1753},{"id":1777,"depth":414,"text":1778},{"id":1809,"depth":414,"text":1810},{"id":404,"depth":414,"text":405},"How to inspect element on iPhone the honest way: connect to a Mac and use Safari Web Inspector, plus no-computer workarounds and how to view page source.",[1861,1864,1867,1870,1873],{"question":1862,"answer":1863},"Can you inspect element on iPhone without a computer?","Not with the real Web Inspector. Safari on iOS has no built-in developer tools you can open on the phone itself. Without a computer your only options are workarounds: a third-party browser app that bundles its own inspector, or a bookmarklet like Eruda that injects a small debug console into the page. These approximate the experience but they do not give you Safari's actual Web Inspector.",{"question":1865,"answer":1866},"Can you inspect element in Safari on iPhone?","Yes, but the inspector runs on a Mac, not on the phone. You turn on Web Inspector on the iPhone (Settings, Apps, Safari, Advanced, Web Inspector), connect the iPhone to a Mac with a USB cable, open Safari on the Mac, enable its Develop menu, then choose your iPhone from Develop and inspect the live page. The iPhone shows the page, the Mac shows the inspector.",{"question":1868,"answer":1869},"Do I need a Mac to inspect element on an iPhone?","For the genuine Safari Web Inspector, yes. The official tooling only connects an iPhone to Safari running on macOS. On Windows there is no first-party path to Safari's inspector, so people fall back to bookmarklets, third-party inspector apps, or testing the same page in Chrome DevTools on the desktop using device emulation.",{"question":1871,"answer":1872},"How do I view the page source on my iPhone?","Safari on iOS hides the view-source feature, but you can add a bookmark whose address is a small JavaScript snippet (a bookmarklet) that opens the current page's HTML, or use a tool like Eruda. For a quick read of raw markup, a view-source bookmarklet is the lightest option. For live, rendered HTML and CSS you still need the Mac and Web Inspector route.",{"question":1874,"answer":1875},"Why does inspect element matter if I just want to copy the code?","Inspecting shows you the structure and styles, but copying them cleanly is a separate problem. DevTools and Web Inspector copy one node's computed values, not the full cascade, so pasted code rarely looks right. To grab a whole component with the CSS that actually applies, use a desktop extension like MiroMiro on the Mac or PC side after you spot something on mobile.",{},{"title":1594,"description":1859},"blog/how-to-inspect-element-on-iphone",[1880,1000,1881,1882,457,1883,1884,1885],"how to inspect element on iphone","inspect element safari iphone","inspect element on mobile","view source iphone","safari web inspector","mobile web debugging","wifbQrebCUkqbkQeJk4wuSGtGutNlBhW8lmLnpbVYvA",4,1781805656624]