5:["$","div",null,{"className":"min-h-screen bg-surface-50","children":[["$","div",null,{"className":"bg-surface border-b border-surface-200","children":["$","div",null,{"className":"mx-auto max-w-screen-xl px-4 py-3 sm:px-6 lg:px-8","children":["$","a",null,{"href":"/","className":"inline-flex items-center gap-1.5 text-sm font-medium text-surface-600 hover:text-brand-600 transition-colors no-underline group","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"14","height":"14","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round","aria-hidden":"true","className":"group-hover:-translate-x-0.5 transition-transform","children":["$","path",null,{"d":"m15 18-6-6 6-6"}]}],"Back to directory"]}]}]}],["$","div",null,{"className":"mx-auto max-w-screen-xl px-4 py-10 sm:px-6 lg:px-8","children":["$","div",null,{"className":"mx-auto max-w-2xl","children":[["$","div",null,{"className":"rounded-2xl border border-surface-200 bg-surface shadow-card overflow-hidden","children":[["$","div",null,{"className":"px-6 py-8 sm:px-8","children":[["$","div",null,{"className":"flex items-start gap-5","children":[["$","div",null,{"className":"shrink-0 flex size-16 sm:size-20 items-center justify-center rounded-2xl border border-surface-200 bg-surface-50 overflow-hidden","children":["$","img",null,{"src":"https://www.google.com/s2/favicons?domain=react.dev&sz=128","alt":"React Developer Tools logo","width":80,"height":80,"className":"size-full object-contain p-2"}]}],["$","div",null,{"className":"min-w-0 flex-1 pt-1","children":[["$","h1",null,{"className":"text-xl font-bold text-surface-900 sm:text-2xl leading-snug text-balance","children":"React Developer Tools"}],["$","div",null,{"className":"mt-2 flex flex-wrap gap-2","children":["$","span",null,{"className":"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap bg-brand-100 text-brand-700","children":"Developer Tools"}]}]]}]]}],["$","div",null,{"className":"mt-6","children":["$","a",null,{"href":"https://react.dev","target":"_blank","rel":"noopener noreferrer","className":"inline-flex items-center gap-2 rounded-lg px-5 py-2.5 bg-brand-600 text-white text-sm font-semibold hover:bg-brand-700 transition-colors no-underline shadow-sm","children":["Visit website",["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"14","height":"14","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round","aria-hidden":"true","children":[["$","path",null,{"d":"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}],["$","polyline",null,{"points":"15 3 21 3 21 9"}],["$","line",null,{"x1":"10","y1":"14","x2":"21","y2":"3"}]]}]]}]}]]}],["$","hr",null,{"className":"border-surface-200"}],["$","div",null,{"className":"px-6 py-6 sm:px-8","children":[["$","h2",null,{"className":"text-xs font-semibold uppercase tracking-wider text-surface-500 mb-4","children":"About"}],["$","div",null,{"className":"prose prose-sm prose-surface max-w-none text-surface-700 leading-relaxed","dangerouslySetInnerHTML":{"__html":"

React Developer Tools, maintained by the React team, adds Components and Profiler panels to Chrome DevTools for inspecting React apps.

Inspect component trees, props, and hooks state
Edit state and props live to test UI changes
Profile renders to find unnecessary re-renders
Highlight which components updated on each commit

"}}]]}],["$","div",null,{"className":"border-t border-surface-200 bg-surface-50 px-6 py-4 sm:px-8","children":["$","dl",null,{"className":"flex flex-wrap gap-x-8 gap-y-2 text-xs text-surface-500","children":[["$","div",null,{"className":"flex gap-1.5","children":[["$","dt",null,{"children":"Category:"}],["$","dd",null,{"className":"font-medium text-surface-700","children":"Developer Tools"}]]}],["$","div",null,{"className":"flex gap-1.5","children":[["$","dt",null,{"children":"Platform:"}],["$","dd",null,{"className":"font-medium text-surface-700 capitalize","children":"Chrome"}]]}]]}]}]]}],"$L18"]}]}]]}]

React Developer Tools

About

Have an app for Chrome?