How to Capture a Full-Page Screenshot in Chrome DevTools in Hindi
Capture an entire webpage in Chrome DevTools, including content below the viewport. Follow the Hindi guide, learn the key differences, and troubleshoot common issues.
Chrome DevTools can capture a webpage beyond the visible viewport without an extension. Open DevTools, turn on the Device toolbar, open its More options menu, and choose Capture a full size screenshot. The guide below explains each step in Hindi; Chrome’s menu labels are shown in English because those are the labels in the official documentation.
Chrome DevTools में पूरा webpage screenshot कैसे लें
- Chrome में वह webpage खोलें जिसका screenshot चाहिए.
- DevTools खोलें: Windows/Linux पर Ctrl+Shift+I या Mac पर Command+Option+I दबाएँ. आप Chrome menu से More tools → Developer tools भी चुन सकते हैं.
- DevTools में Device toolbar चालू करें. इसके toggle का नाम Toggle device toolbar है. Windows/Linux पर इसका shortcut Ctrl+Shift+M और Mac पर Command+Shift+M है. अगर यह toggle दिखाई न दे, तो DevTools का action bar या overflow menu देखें.
- ऊपर दिखने वाले Device toolbar में More options खोलें.
- Capture a full size screenshot चुनें. Chrome पूरी page का screenshot बनाएगा, जिसमें viewport के नीचे का content भी शामिल है.
- फ़ाइल को downloads में देखें. Chrome आम तौर पर screenshot को PNG फ़ाइल के रूप में डाउनलोड करता है.
Chrome DevTools documentation के अनुसार, यह विकल्प “the whole page including the content that isn’t visible in the viewport” capture करता है. Menu wording Chrome की version या interface language के अनुसार बदल सकती है. [Chrome DevTools Device Mode documentation]
तीन screenshot विकल्पों में अंतर
| विकल्प | क्या capture होता है | कब चुनें |
|---|---|---|
| Capture a full size screenshot | पूरा webpage, viewport से बाहर का हिस्सा भी | लंबे page को एक image में सहेजने के लिए |
| Capture screenshot | वर्तमान visible viewport | सिर्फ अभी स्क्रीन पर दिख रहे हिस्से के लिए |
| Capture area screenshot | आपके drag करके चुने हुए क्षेत्र का हिस्सा | एक खास region चाहिए; पूरी page नहीं |
Full-page screenshot का विकल्प Device toolbar के More options menu में है. Area capture अलग workflow है: Command Menu खोलें, “screenshot” खोजें, फिर Capture area screenshot चुनकर क्षेत्र drag करें. Area capture के लिए DevTools docked होना चाहिए; undocked DevTools में यह काम नहीं करता. Command Menu खोलने का shortcut Windows/Linux पर Ctrl+Shift+P और Mac पर Command+Shift+P है. [Chrome DevTools Command Menu documentation]
Device frame और viewport settings
सिर्फ पूरा page capture करने के लिए device frame चालू करना जरूरी नहीं है. अगर screenshot में simulated device का frame भी चाहिए, Device toolbar में device-specific mode चुनें और capture से पहले Show device frame सक्षम करें. फिर full-size capture करें. Frame केवल visual framing है; यह mobile hardware का सटीक परीक्षण नहीं बनाता. Chrome की Device Mode documentation भी बताती है कि desktop simulation वास्तविक mobile hardware को पूरी तरह reproduce नहीं करती. [Chrome DevTools Device Mode documentation]
Viewport या device बदलने से page का responsive layout बदल सकता है. अगर आपको desktop page चाहिए तो desktop dimensions रखें; mobile layout चाहिए तो device preset या custom dimensions सेट करें. यह screenshot के लिए simulated viewport है, वास्तविक फोन पर render होने का प्रमाण नहीं.
Dynamic और lazy-loaded pages के लिए सावधानियाँ
Full-size विकल्प page की पूरी लंबाई capture करता है, लेकिन हर site का content capture से पहले तैयार हो, इसकी गारंटी नहीं है. कुछ pages images या sections तभी load करते हैं जब आप scroll करते हैं; animations, live data और infinite scrolling भी capture के समय बदल सकते हैं.
- Capture से पहले page को नीचे तक scroll करें और थोड़ी देर रुकें, ताकि scroll-triggered images या sections को load होने का अवसर मिले.
- अगर page लगातार नए items जोड़ता है, तो पहले तय करें कि आपको किस सीमा तक content चाहिए; फिर capture करें.
- Animation या बदलते live content के लिए स्थिर frame पर capture करने की कोशिश करें. DevTools documentation यह वादा नहीं करती कि screenshot हर dynamic element को force करके load करेगा.
- अगर browser का अपना screenshot पर्याप्त न हो, तो उस page के लिए explicit wait, selector wait या lazy-image support वाला capture workflow अपनाएँ.
Or skip the browser setup
ScreenshotNeo एक website screenshot API है: एक GET request में URL दें और PNG, JPEG, WebP या PDF response लें. उदाहरण में Stripe URL है; उसे अपने target URL से बदलें. API key के लिए ScreenshotNeo API docs देखें.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);ScreenshotNeo removes known cookie/consent banners, newsletter popups and chat widgets before capture, and each step can be turned off. Bot checks, blank pages and failed loads are never billed; response headers report page verdict and billing status. Its MCP server lets Claude, Cursor and other MCP clients use screenshot tools. Free includes 1,000 screenshots each month without a card; paid plans start at $5 for 3,000. See ScreenshotNeo for the service details, or sign up for 1,000 free screenshots a month, no card required.
Common problems and fixes
| समस्या | संभावित कारण | क्या करें |
|---|---|---|
| Full-size विकल्प नहीं दिखता | Device toolbar चालू नहीं है या गलत menu खुला है. | Toggle device toolbar चालू करें, फिर Device toolbar का More options खोलें. |
| केवल visible हिस्सा डाउनलोड हुआ | Capture screenshot चुना गया था. | दोबारा capture करें और Capture a full size screenshot चुनें. |
| Area capture नहीं चलता | DevTools undocked है. | DevTools को browser window में dock करें, फिर Command Menu से Capture area screenshot चलाएँ. |
| कुछ images या sections blank हैं | Content lazy-load होता है या capture के समय तैयार नहीं था. | पहले page पर scroll करके content load होने दें; dynamic page पर कुछ content बदल सकता है. |
| Mobile layout अलग दिखता है | Device Mode simulation वास्तविक mobile hardware नहीं है. | सही device preset और dimensions चुनें; परिणाम को hardware-level test न मानें. |
Performance, reliability और लागत
DevTools में एक बार का capture किसी extension या सेवा की जरूरत नहीं रखता. बहुत लंबा page बड़ी image बना सकता है और capture में समय ले सकता है; अगर पूरी page जरूरी नहीं है, viewport capture या area capture चुनें. Dynamic pages के लिए capture से पहले content तैयार होने देना मदद करता है, पर सभी sites के व्यवहार की गारंटी नहीं होती.
ScreenshotNeo उपयोग करने पर लागत plan और usage पर निर्भर है: Free में 1,000 shots/month, Starter $5 में 3,000, Growth $15 में 15,000, Pro $39 में 60,000, Scale $99 में 250,000 और Business $249 में 1,000,000 shots/month हैं. Yearly billing पर 2 महीने मुफ्त हैं; हर feature हर plan पर उपलब्ध है. इसके अलावा cache TTL, async jobs, bulk capture और usage API जैसे विकल्प API docs में दिए गए हैं. केवल clean shots bill होते हैं; cache hits और असफल captures का billing नहीं होता.
FAQ
क्या full-page screenshot लेने के लिए extension चाहिए?
नहीं. Chrome DevTools में Device toolbar के More options से Capture a full size screenshot चुनें.
क्या इससे पूरी page PDF में मिलेगी?
यह workflow screenshot image capture करता है. PDF चाहिए तो Chrome का print-to-PDF workflow या PDF capture समर्थित सेवा इस्तेमाल करें.
क्या full-page capture किसी खास Chrome version से ही उपलब्ध है?
Chrome for Developers की ऐतिहासिक release note बताती है कि full-page screenshots Chrome 59 में आए थे. यह इतिहास है, वर्तमान minimum-version guarantee नहीं. [Chrome 59 release note]
क्या device frame जरूरी है?
नहीं. यह केवल वैकल्पिक visual frame है; सामान्य full-page screenshot के लिए इसकी जरूरत नहीं होती.
