React Developer Tools Extension का उपयोग
React Developer Tools आपके browser के लिए x-ray glasses जैसा है जो आपको एक webpage के पीछे छुपे React components देखने देता है।
In this page:
React Developer Tools क्या दिखाता है
React Developer Tools browser extension आपके browser के dev tools में एक Components और एक Profiler tab जोड़ता है, जो आपको सिर्फ raw rendered HTML के बजाय live component tree, इसके current props और state inspect करने देता है।
Note:
इसे Chrome Web Store या Firefox Add-ons से install करें और यह React run करने वाले किसी भी page पर automatically activate हो जाता है।
Warning:
Extension सिर्फ उन pages पर React detect करता है जो असल में React load करते हैं -- यह non-React sites पर inactive/greyed-out रहता है।
उदाहरण: What React Developer Tools Shows
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Header() { return <h3>Header</h3>; }
function Content() { return <p>Content</p>; }
function Layout() {
return (
<div>
<Header />
<Content />
</div>
);
}
// React DevTools' Components tab would show this exact tree:
// Layout > Header, Content
ReactDOM.createRoot(document.getElementById('root')).render(<Layout />);
</script>
</body>
</html>Props और State को Live Inspect करना
Components tab में एक component पर click करना इसके current props और state values को right side पर दिखाता है, और आप उन्हें live edit भी कर सकते हैं यह देखने के लिए कि UI instantly कैसे update होता है, अपना code बदले बिना।
Note:
Components tab में एक state value को live edit करना edge-case data के लिए UI कैसा दिखता है यह test करने का एक fast तरीका है।
Warning:
Dev tools में live-edited values कहीं save नहीं होती -- page refresh करना सब कुछ वापस वहीं reset कर देता है जो code असल में produce करता है।
उदाहरण: Inspecting Props and State Live
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1 (inspect state live)</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>Renders को Profile करना
Profiler tab record करता है कि हर component render होने में कितना समय लेता है और highlight करता है कि एक interaction के दौरान कौन से components re-render हुए, आपको unnecessary re-renders spot करने में help करते हुए।
Note:
Profiler tab में record button click करें, अपनी app के साथ interact करें, फिर यह देखने के लिए recording stop करें कि क्या render हुआ इसका एक flame graph।
Warning:
Profiler recordings आपके current build (अक्सर एक unoptimized dev build) को reflect करती हैं -- production में render times अलग हो सकते हैं।
उदाहरण: Profiling Renders
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Child({ value }) {
return <p>Child rendered with: {value}</p>;
}
function Profiled() {
const [n, setN] = React.useState(0);
return (
<div>
<button onClick={() => setN(n + 1)}>Re-render Child</button>
<Child value={n} />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Profiled />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह न realize करना कि extension अपने React-specific panels सिर्फ उन pages पर activate करता है जो असल में React उपयोग करते हैं।
- Components tab (component tree) को Profiler tab (performance timing) के साथ confuse करना।
- यह भूल जाना कि DevTools panels हर full page reload पर अपना state reset कर देते हैं।
चैप्टर सारांश
- React Developer Tools Chrome, Firefox, और Edge के लिए एक browser extension है।
- यह component tree और current props/state inspect करने के लिए एक Components tab जोड़ता है।
- यह rendering performance measure करने के लिए एक Profiler tab जोड़ता है।
- Development के दौरान असली React applications debug करने के लिए यह essential है।
ब्राउज़र सपोर्ट
Chrome, Firefox, और Edge के लिए एक extension के रूप में available; browser में run होने वाली किसी भी React 16+ application के साथ काम करता है।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: