Chrome के इनबिल्ट टूल से ऐसे ले amazing Screenshots!

add device frame to screenshots using chrome developer tools
Like
Like Love Haha Wow Sad Angry
11

जानें की कैसे आप Google Chrome में बिना किसी थर्ड पार्टी एक्सटेंशन को यूज किये यानि की क्रोम के इनबिल्ट Developer tools को यूज करके कैसे आप काफी जबरदस्त screenshots ले सकते है!

कंप्यूटर में काफी सारे तरीके है जिससे आप आसानी से स्क्रीनशॉट ले सकते है. जैसे की आप विंडोज में शॉर्टकट कीय Win+Print Screen से या विंडोज Snipping Tool से screenshot ले सकते है.

पर क्या आपको पता है की Google Chrome में इनबिल्ट स्क्रीनशॉट का फीचर होता है जो की काफी जबरदस्त और एडवांस फीचर के साथ आता है. जैसे की आप इस टूल को यूज करके ज्यादा हाई क्वालिटी के screenshot ले सकते है, लॉन्ग (फुल पेज) स्क्रीनशॉट ले सकते है और तो और आप स्क्रीनशॉट में डिवाइस फ्रेम को भी ऐड कर सकते है.

तो इसीलिए इस पोस्ट में, मैं आपको गूगल Chrome के इसी हिडन स्क्रीनशॉट फीचर के बारे में पुरे विस्तार से बताने वाला हु की कैसे आप इसको यूज करके बड़े कमाल के Screenshot ले सकते है और कंप्यूटर का एक स्मार्ट यूजर बन सकते है. तो चलिए जानते है.

Chrome (Desktop) के इनबिल्ट टूल से screenshots कैसे ले?

> तो Google Chrome में जिस भी वेब पेज का screenshot लेना है उसको ओपन करें और इसके बाद Chrome Developer tools को ओपन करें. और इसके लिए अपने कीबोर्ड में Ctrl+Shift+l को प्रेस करें. या फिर दूसरा तरीका यह है की क्रोम में ऊपर दाएं साइड में दिख रहे थ्री डॉट आइकॉन पे क्लिक करें. इसके बाद More पे क्लिक करके Developer tools ऑप्शन को चूज करें.

Google Chrome Developer tools

> यहाँ पर अगर आपको फोन में लिए हुए किसी स्क्रीनशॉट में डिवाइस फ्रेम को ऐड करना है तो इसके लिए उस स्क्रीनशॉट को अपने कंप्यूटर में ट्रांसफर करले. इसके बाद उस इमेज पे राइट क्लिक करके Open with ऑप्शन में Google Chrome को चूज करें.

> इसके बाद वो इमेज आपके Chrome ब्राउज़र में ओपन हो जायेगा. इसके बाद आप ऊपर बताए गए तरीके से Chrome Developer tools को ओपन करले. यहाँ पर Chrome Developer tools विंडो को ओपन करने का एक और तरीका यह है की वेब पेज में कहीं पर भी राइट क्लिक करें और Inspect ऑप्शन को चूज करें.

> इसके बाद आपके सामने Chrome Developer tools का विंडो ओपन हो जायेगा.

Google Chrome Developer tools windows.

यहाँ पर आप Chrome Developer tools को यूज करके दो तरीके से screenshot ले सकते है. पहला तरीका है Device mode और दूसरा है Command menu.

1. Device mode

Chrome Developer tools के Device mode को यूज करके आप बड़ी आसानी से स्क्रीनशॉट ले सकते है. इसमें आपको पूरी तरह से कस्टमाइजेशन करने का ऑप्शन मिलता है की आपको screenshot किस प्रकार लेना है, किस साइज में लेना है. Device mode को ही यूज करके आप अपने स्क्रीनशॉट में डिवाइस फ्रेम ऐड कर सकते है या फिर लॉन्ग (फुल पेज) स्क्रीनशॉट ले सकते है.

> तो Device mode में स्क्रीनशॉट लेने के लिए Dev tools विंडो में ऊपर दिख रहे (Toggle device toolbar) आइकॉन पर क्लिक करें या फिर अपने कीबोर्ड में Ctrl+Shift+M को प्रेस करें. इसके बाद आपके सामने device mode का ऑप्शंस दिखाई देने लगेगा, जहाँ पर आप screenshot का प्रिव्यू भी देख सकते है. अब इसके बाद आपको स्क्रीनशॉट का साइज सेलेक्ट करना होगा. इसके लिए ‘Responsive‘ पे क्लिक करें. और इसके बाद आपको बहुत सारे डिवाइस के लिस्ट देखने को मिलेगा. यहाँ पर आपको लिस्ट में से जिस भी डिवाइस को ऐड करना है उसे सेलेक्ट करले. तो उदाहरण के लिए मैंने Moto G4 या iPhone5-SE डिवाइस को सेलेक्ट कर लिया है.

Google chrome Device mode.

> यहाँ पर आप लिस्ट में नीचे दिख रहे ‘Edit‘ ऑप्शन पर क्लिक करके और भी बहुत सारे डिवाइस को ऐड कर सकते है. और आप चाहे तो “Add custom device” ऑप्शन पर क्लिक करके मैन्युअली डिवाइस साइज को सेट कर सकते है.

Google Chrome Device mode settings.

> अब इसके बाद आपको सामने दिख रहे “थ्री डॉट” आइकॉन पे क्लिक करना है. और यहाँ पर आप “Show device frame” ऑप्शन पे क्लिक करके screenshot में डिवाइस फ्रेम को ऐड कर सकते है.

Add device frame to screenshot in Chrome Developer tools.

> इसके बाद आप प्रिव्यू विंडो में देख सकते है की स्क्रीनशॉट में डिवाइस फ्रेम ऐड हो गया है. यहाँ पर आप Rotate आइकॉन पे क्लिक करके Landscape या Portrait मोड में screenshot को कैप्चर कर सकते है.

Rotate screenshot in Chrome Developer tool's device mode.

> अब screenshot डाउनलोड करने के लिए बस “Capture screenshot” ऑप्शन पे क्लिक करें. यहाँ पर अगर आपको लॉन्ग स्क्रीनशॉट कैप्चर करना है तो इसके लिए “Capture full size screeshot” ऑप्शन पे क्लिक करें.

इसके बाद आपका स्क्रीनशॉट Downloads फोल्डर में या आपने जहाँ पर भी उसे सेव किया था वहां वह डाउनलोड हो जायेगा.

Capture screenshot using Google Chrome Developer tools.

> यहाँ पर आप डिवाइस को चेंज करके और डिवाइस फ्रेम ऐड करके और भी बहुत सारे स्क्रीनशॉट ले सकते है. लेकिन आप कुछ ही डिवाइस में डिवाइस फ्रेम को ऐड कर सकते है. जैसे की केवल Moto G4, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, Nexus 5, Nexus 5X, Nexus 6P और iPad डिवाइस में ही आप डिवाइस फ्रेम ऐड कर सकते है.

Capture screenshots using Google Chrome Developer tools device mode.

2. Command menu

Chrome में Developer tools को यूज करके स्क्रीनशॉट लेने का दूसरा तरीका है Command menu. ये तरीका भी काफी ज्यादा आसान है. और इसमें भी आप सिंपल स्क्रीनशॉट ले सकते है, लॉन्ग स्क्रीनशॉट ले सकते है और तो और आप माउस पॉइंटर से ड्रैग करके किसी स्पेसिफिक एरिया का भी स्क्रीनशॉट ले सकते है.

> तो Command menu को यूज करके स्क्रीनशॉट लेने के लिए सबसे पहले Chrome Developer tools में इनेबल हुए Device mode को ऑफ करें, और इसके लिए Toggle device toolbar आइकॉन पर क्लिक करें (आप चाहे तो इसे ऑन ही रहने दे सकते है). इसके बाद अपने कीबोर्ड में Ctrl+Shift+P को प्रेस करें. इससे Developer tools विंडो में command menu ओपन हो जायेगा.

ये भी पढ़े: 13 जबरदस्त विंडोज कंप्यूटर कीबोर्ड Shortcut Keys जो आपको जरूर पता होना चाहिए!

Google Chrome Developer tools command menu.

> यहाँ ओपन हुए कमांड मेनू में आपको screenshot टाइप करना है. इसके बाद आपके सामने 4 स्क्रीनशॉट ऑप्शंस दिखाई देंगे, जिसमे से केवल 3 ऑप्शंस ही काम का है.

Capture screenshot using command menu in Google Chrome Developer tools.
Capture area screenshot using command menu in Google Chrome Developer tools.
Capture area screenshot.

इसमें जो पहला ऑप्शन है Capture area screenshot, इस ऑप्शन को यूज करके आप किसी स्पेसिफिक एरिया का स्क्रीनशॉट को कैप्चर कर सकते है. इसके बाद दूसरा ऑप्शन है Capture full size screenshot, जिससे आप लॉन्ग स्क्रीनशॉट ले सकते है और तीसरा ऑप्शन है Capture screenshot.

आप निचे दिए गए 👇 वीडियो को देख कर और भी अच्छे तरह से इसे समझ सकते है.

ये भी पढ़े:-


उपसंहार (Conclusion)

तो अब आप जान गए होंगे की Google Chrome के इनबिल्ट Developer tools को यूज करके कैसे काफी जबरदस्त स्क्रीनशॉट ले सकते है और कंप्यूटर का एक स्मार्ट यूजर बन सकते है. दोस्त, आपको यह जानकारी कैसी लगी? अगर अच्छी लगी तो इसे अपने फ्रेंड्स के साथ शेयर जरूर करें.

अगर आपका कोई भी सवाल या सुझाव है तो हमें कमेंट करके जरूर बताये. इसी तरह के कंप्यूटर टिप्स एंड ट्रिक्सTechnology से सम्बंधित जानकारी जानने और Latest Technology News पढ़ने के लिए हमारे ब्लॉग के नए Post पढ़ते रहिये और हमारे TwitterInstagram और Facebook Page से भी जुड़े रहिये.

Be a Smart User of Smartphone, Computer & Internet

ज्वाइन करें हमारे ईमेल न्यूज़लेटर को और पाएं लेटेस्ट टेक्नोलॉजी, स्मार्टफोन और कंप्यूटर टिप्स एंड ट्रिक्स की जानकारी सीधे अपने इनबॉक्स में!

    हम आपको स्पैम नहीं भेजेंगे. आप किसी भी समय Unsubscribe कर सकते हैं.

    Like
    Like Love Haha Wow Sad Angry
    11

    Priyanshu Kumar

    Tech Content Writer

    2 thoughts on “Chrome के इनबिल्ट टूल से ऐसे ले amazing Screenshots!

    जानकारी कैसे लगी? यहाँ 👇 कमेंट करके बताएं!