Chrome में पूरे लंबे पेज का स्क्रीनशॉट लेने का सबसे तेज़ तरीका एक्सटेंशन के बिना है: F12 से DevTools खोलें, Ctrl + Shift + P (Mac पर Cmd + Shift + P) दबाएँ, “screenshot” टाइप करें और फ़ुल साइज़ वाला विकल्प चुनें। Chrome पूरे पेज की एक लंबी PNG सेव करता है। कई पेजों के लिए या CI में, स्क्रिप्ट एक ऑप्शन से यही काम कर देती है। अगर नतीजा कटा हुआ, खाली या दोहराए हेडर वाला आए, तो कारण लगभग हमेशा लेज़ी लोडिंग, ऊँचाई की सीमा या कोई फ़िक्स्ड एलिमेंट होता है, और हर एक का हल नीचे है।
तरीका 1: DevTools, कुछ इंस्टॉल नहीं करना
- पेज खोलें और उसके पूरी तरह लोड होने का इंतज़ार करें।
- DevTools खोलने के लिए
F12दबाएँ। Ctrl + Shift + P(Mac परCmd + Shift + P) से कमांड मेन्यू खोलें और “screenshot” टाइप करें।- Capture full size screenshot चुनें। Chrome एक PNG डाउनलोड करता है।
इसी कमांड मेन्यू में दिखने वाले हिस्से और चुने हुए एलिमेंट के लिए भी कमांड हैं। Chrome का डॉक्यूमेंटेशन पुष्टि करता है कि मेन्यू इन शॉर्टकट से खुलता है और उसमें “Capture area screenshot” कमांड है, और स्क्रीनशॉट पर DevTools टिप्स पूरे पेज, एक नोड और एक क्षेत्र को कैप्चर करना बताते हैं।
तरीका 2: फ़ोन की चौड़ाई में पूरे पेज का स्क्रीनशॉट
पहले ऊपर के प्रीव्यू में डिवाइस चुनकर लेआउट जाँच लें। पूरे पेज को वैसे कैप्चर करने के लिए जैसे फ़ोन उसे बनाता है, डिवाइस मोड इस्तेमाल करें: Ctrl + Shift + M (Mac पर Cmd + Shift + M) से डिवाइस टूलबार चालू करें, डिवाइस चुनें, More options मेन्यू खोलें और Capture full size screenshot चुनें। Chrome के डिवाइस मोड डॉक्यूमेंटेशन में यही विकल्प है, साथ में फ़ोन की रूपरेखा वाले स्क्रीनशॉट के लिए Show device frame भी। pixel ratio और फ़ाइल के नाम की सलाह के साथ चरण-दर-चरण तरीका कंप्यूटर पर वेबसाइट का मोबाइल स्क्रीनशॉट कैसे लें में है।
तरीका 3: स्क्रिप्ट, कई पेजों या CI के लिए
अगर दर्जनों पेजों के लिए वही कैप्चर चाहिए, तो उसे ऑटोमेट करें। Playwright में यह एक ऑप्शन है:
await page.screenshot({ path: 'page.png', fullPage: true });पहले viewport सेट करें (फ़ोन साइज़ के कैप्चर के लिए जैसे { width: 390, height: 844 }), और स्क्रिप्ट हर रन में हर पेज की एक इमेज बनाएगी। fullPage Playwright की स्क्रीनशॉट गाइड में दर्ज है।
स्क्रीनशॉट कटा, खाली या दोहराया हुआ क्यों आता है
ये समस्याएँ पूरे पेज के कैप्चर के काम करने के तरीके से आती हैं: ब्राउज़र viewport को पूरी ऊँचाई तक बढ़ाता है और बिना स्क्रॉल किए पेज को एक बार बनाता है। Puppeteer में पूरे पेज के स्क्रीनशॉट पर एक लेख कारण और हल बताता है, जो Chrome पर आधारित किसी भी कैप्चर पर लागू होते हैं:
- लेज़ी-लोड इमेज प्लेसहोल्डर ही रह जाती हैं, क्योंकि वे दिखने वाले क्षेत्र में आने पर लोड होती हैं और कैप्चर कभी स्क्रॉल नहीं करता। कैप्चर से पहले पेज को नीचे तक स्क्रॉल करके वापस आएँ और इमेज के लोड होने का इंतज़ार करें।
- बहुत ऊँचे पेज कट जाते हैं। लेखक Puppeteer में 16,384 पिक्सल की डिफ़ॉल्ट सीमा बताता है, और कुछ सेटअप 32,768 तक जाते हैं। उसके आगे पेज को हिस्सों में कैप्चर करके जोड़ें।
- फ़िक्स्ड और sticky एलिमेंट दोहराए जाते हैं या ग़लत जगह दिखते हैं। कैप्चर से पहले उन्हें
position: absoluteकर दें या छिपा दें।
किस काम के लिए कौन-सा तरीका
| काम | सबसे अच्छा तरीका |
|---|---|
| एक पेज, एक बार | DevTools कमांड मेन्यू |
| एक पेज, फ़ोन की चौड़ाई में | DevTools डिवाइस मोड |
| दर्जनों पेज, या हर रिलीज़ | fullPage: true वाली स्क्रिप्ट |
| लगभग 16,000 पिक्सल से ऊँचा पेज | जोड़े हुए हिस्से |
अक्सर पूछे जाने वाले सवाल
एक्सटेंशन के बिना Chrome में पूरे पेज का स्क्रीनशॉट कैसे लें?
DevTools खोलें, Ctrl + Shift + P से कमांड मेन्यू खोलें, “screenshot” टाइप करें और Capture full size screenshot चुनें।
मेरे पूरे पेज के स्क्रीनशॉट में इमेज क्यों ग़ायब हैं?
वे लेज़ी-लोड हैं और कभी दिखने वाले क्षेत्र में आईं ही नहीं। पूरा पेज स्क्रॉल करें, इमेज लोड होने दें और फिर से कैप्चर करें।
क्या फ़ोन साइज़ में पूरे पेज का स्क्रीनशॉट लिया जा सकता है?
हाँ। DevTools डिवाइस मोड इस्तेमाल करें, डिवाइस चुनें और More options मेन्यू से Capture full size screenshot चुनें।
स्रोत: Chrome DevTools, कमांड मेन्यू, डिवाइस मोड और स्क्रीनशॉट टिप्स; Playwright स्क्रीनशॉट; Puppeteer में पूरे पेज के स्क्रीनशॉट, DEV Community, सभी 28 अक्टूबर 2026 को पढ़े गए।