डेस्कटॉप पर किसी वेबसाइट का मोबाइल स्क्रीनशॉट लेने का सबसे तेज़ तरीका है पेज को मोबाइल व्यू में खोलना और फिर उसे कैप्चर करना: Chrome DevTools के device mode में device toolbar के मेन्यू से Capture screenshot या Capture full size screenshot चुनें; मोबाइल व्यू एक्सटेंशन में उसका स्क्रीनशॉट बटन दबाएँ। दोनों तरीके पेज की वैसी ही इमेज बनाते हैं जैसा फ़ोन उसे दिखाता है, फ़ोन को छुए बिना।
कौन-सा तरीका चुनें, यह इस पर निर्भर है कि आपको सिर्फ़ दिखने वाली स्क्रीन चाहिए या पूरा पेज, और इमेज में फ़ोन का फ़्रेम होना चाहिए या नहीं।
दिखने वाला हिस्सा या पूरा पेज?
यह पहले तय करें, क्योंकि टूल अलग-अलग हैं।
Viewport स्क्रीनशॉट वह दिखाता है जो कोई व्यक्ति फ़ोन की स्क्रीन पर बिना स्क्रॉल किए देखता है। इसे bug रिपोर्ट (“बटन cookie बार के पीछे छिपा है”), ऐप-स्टोर जैसी मार्केटिंग इमेज और पहली स्क्रीन के डिज़ाइन रिव्यू के लिए इस्तेमाल करें।
Full-page स्क्रीनशॉट पूरे स्क्रॉल होने वाले पेज को जोड़कर एक लंबी इमेज बनाता है। इसे कंटेंट रिव्यू, लैंडिंग पेज की मंज़ूरी, या रीडिज़ाइन से पहले पेज को सहेजने के लिए इस्तेमाल करें। ध्यान रहे कि sticky हेडर, lazy-load होने वाली इमेज और स्क्रॉल पर चलने वाले एनिमेशन full-page कैप्चर में अजीब दिख सकते हैं, क्योंकि ब्राउज़र पूरा पेज एक साथ render करता है।
तरीका 1: Chrome DevTools का device mode
- DevTools खोलें (
F12) और device toolbar चालू करें (Ctrl + Shift + M, या Mac परCmd + Shift + M)। - कोई डिवाइस चुनें और पेज रीलोड करें।
- device toolbar के ऊपर दाईं ओर तीन बिंदु वाला मेन्यू खोलें।
- viewport के लिए Capture screenshot या पूरे पेज के लिए Capture full size screenshot चुनें।
फ़ोन की आउटलाइन शामिल करने के लिए कैप्चर से पहले कोई नाम वाला डिवाइस चुनें और उसी मेन्यू में Show device frame चालू करें। Chrome आपके downloads फ़ोल्डर में PNG सेव करता है।
यही कमांड Command Menu से भी चला सकते हैं: Ctrl + Shift + P (Mac पर Cmd + Shift + P) दबाएँ और “screenshot” टाइप करें। Command Menu में एक अतिरिक्त Capture node screenshot विकल्प है, जो सिर्फ़ एक चुने हुए एलिमेंट को कैप्चर करता है। किसी एक कंपोनेंट का डॉक्यूमेंटेशन बनाने के लिए यह काम का है।
तरीका 2: मोबाइल व्यू एक्सटेंशन
अगर आप नियमित रूप से मोबाइल स्क्रीनशॉट लेते हैं, तो DevTools वाला रास्ता थकाऊ हो जाता है। Mobile View Extension अपने फ़्लोटिंग टूलबार में स्क्रीनशॉट बटन देता है। कोई फ़ोन या टैबलेट प्रीसेट चुनें, और यह फ़्रेम वाले viewport का PNG सेव कर देता है, ठीक वही जो प्रीव्यू में दिख रहा है। क्योंकि दूसरे पेज पर जाने पर भी एक्सटेंशन मोबाइल व्यू चालू रखता है, आप साइट में क्लिक करते हुए कुछ ही सेकंड में हर पेज कैप्चर कर सकते हैं।
इससे viewport स्क्रीनशॉट बनते हैं। पूरी लंबाई वाले कैप्चर के लिए DevTools बेहतर टूल है।
तरीका 3: असली फ़ोन
असली फ़ोन के स्क्रीनशॉट सबसे सच्चे होते हैं, क्योंकि उनमें ब्राउज़र का एड्रेस बार, notch या dynamic island, और असली फ़ॉन्ट rendering होती है। ज़्यादातर फ़ोन पर सामान्य स्क्रीनशॉट लेने के बाद स्क्रॉलिंग या “full page” कैप्चर का विकल्प दिखता है। iPhone पर Safari स्क्रीनशॉट एडिटर में Full Page टैब देता है, जो पेज को PDF के रूप में सेव करता है।
जिस चीज़ को ग्राहक या स्टेकहोल्डर पिक्सेल-दर-पिक्सेल परखेंगे, उसके लिए असली डिवाइस के कैप्चर इस्तेमाल करें।
साफ़ और सही इमेज कैसे पाएँ
कुछ बारीकियाँ मोबाइल स्क्रीनशॉट को ज़्यादा काम का बनाती हैं:
- Device pixel ratio से तीखापन तय होता है। pixel ratio 3 पर 390 px चौड़ा iPhone viewport 1170 px चौड़ी इमेज बनाता है। अगर स्क्रीनशॉट धुँधला दिखे, तो जाँचें कि एमुलेट किए गए डिवाइस का pixel ratio सही है। मौजूदा मॉडल के ratio iPhone viewport चार्ट में हैं।
- फ़ॉन्ट और इमेज का इंतज़ार करें। वेब फ़ॉन्ट और lazy-load होने वाली इमेज लोड होने के बाद कैप्चर करें, वरना स्क्रीनशॉट में fallback फ़ॉन्ट और ग्रे बॉक्स चले जाएँगे।
- Overlays को सोच-समझकर हटाएँ। Cookie बैनर और चैट विजेट छोटी स्क्रीन का बड़ा हिस्सा ढक लेते हैं। तय करें कि स्क्रीनशॉट में उन्हें दिखना चाहिए या नहीं; bug रिपोर्ट में आम तौर पर दिखना चाहिए।
- बताएँ कि क्या एमुलेट किया। फ़ाइल के नाम या टिकट में डिवाइस, ब्राउज़र और तारीख़ लिखें, जैसे
pricing_iphone-16_chrome-emulated_2026-10-21.png। ब्राउज़र के अंदर वाले टूल Chrome के इंजन से render करते हैं, इसलिए “iPhone” लिखा स्क्रीनशॉट असली Safari से थोड़ा अलग हो सकता है।
अपने काम में मोबाइल स्क्रीनशॉट का इस्तेमाल
मोबाइल स्क्रीनशॉट तीन जगह सबसे ज़्यादा काम आते हैं। QA में उन्हें टिकट के साथ लगाएँ, ताकि डेवलपर वह ठीक viewport देख सकें जहाँ कुछ टूटा; इमेज के साथ चौड़ाई भी लिखें, जो device toolbar में दिखती है। डिज़ाइन रिव्यू में मोबाइल और डेस्कटॉप के कैप्चर साथ-साथ रखें, ताकि जाँच सकें कि कंटेंट का क्रम अब भी समझ में आता है। मार्केटिंग में लैंडिंग पेज और ऐप लिस्टिंग पर फ़्रेम वाले स्क्रीनशॉट इस्तेमाल करें, लेकिन उन्हें असली डिवाइस से या साफ़ तौर पर लेबल किए गए एमुलेशन से लें।
जिस बड़ी टेस्टिंग प्रक्रिया में ये स्क्रीनशॉट काम आते हैं, उसके लिए मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट देखें।
अक्सर पूछे जाने वाले सवाल
Chrome में पूरे पेज का मोबाइल स्क्रीनशॉट कैसे लें?
DevTools खोलें, device toolbar चालू करें, कोई डिवाइस चुनें, रीलोड करें, फिर device toolbar के तीन बिंदु वाले मेन्यू से Capture full size screenshot चुनें।
क्या DevTools के बिना मोबाइल स्क्रीनशॉट ले सकते हैं?
हाँ। स्क्रीनशॉट बटन वाला मोबाइल व्यू एक्सटेंशन, जैसे Mobile View Extension, फ़्लोटिंग टूलबार से फ़ोन साइज़ वाला व्यू कैप्चर कर लेता है।
मेरा मोबाइल स्क्रीनशॉट पिक्सेल में इतना चौड़ा क्यों है?
स्क्रीनशॉट device pixel ratio पर सेव होते हैं। 3x पर 390 px चौड़ा viewport 1170 px चौड़ी इमेज बनाता है। यह सामान्य है और हाई-डेंसिटी स्क्रीन पर इमेज को साफ़ रखता है।