Vue DevTools का परिचय
Vue DevTools एक browser extension है जो आपकी app चलते वक्त components, state, और events inspect करने देता है।
In this page:
Vue DevTools
Chrome, Firefox, या Edge के लिए Vue DevTools extension install करें, या standalone app इस्तेमाल करें। यह component tree दिखाता है, आपको props और state live edit करने देता है, Pinia stores और Router state track करता है, और events का एक timeline रखता है।
यह Vue के development builds के साथ काम करता है।
Note:
DevTools default से सिर्फ development builds से connect होता है।
उदाहरण: Vue DevTools
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Open Vue DevTools to inspect this component.</p>
<p>App name: {{ name }}</p>
</div>
<script>
const app = Vue.createApp({
name: "DevToolsDemo",
data() { return { name: "Inspectable App" }; },
});
app.config.errorHandler = (err) => console.error(err); // app-level error hook
app.mount("#app");
console.log("devtools flag is a boolean:", typeof app.config.devtools === "boolean" || app.config.devtools === undefined);
</script>
</body>
</html>
<!-- Output:
Rendered: Open Vue DevTools to inspect this component.App name: Inspectable App
console: devtools flag is a boolean: true
-->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. #}
आम गलतियां
- एक production build इस्तेमाल करना और कुछ न पाना
- DevTools में state edit करना और इसके persist होने की उम्मीद करना
- file URLs के लिए extension enable करना भूल जाना
चैप्टर सारांश
- DevTools components और state inspect करता है
- यह Pinia और Router दिखाता है
- इसका एक timeline है
- Development builds के साथ काम करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: