त्वरित सुझाव: Mobile Safari-मोबाइल सफारी को debug-क्षतिरहित करने के लिए Web Inspector-वेब इंस्पेक्टर का प्रयोग करना 

मोबाइल उपकरणों के लिए वेबसाइट और वेब एप्लीकेशन-इंटरनेट से चलनेवाली ऍप्लिकेशन बनाना और debugging-डिबगिंग-क्षतिरहित करना परेशानी से भरा हो सकता हैं। Desktop-डेस्कटॉप-कंप्यूटर पे हमारे पास शक्तिशाली डिबगिंग tools-टूल्स-संसाधन उपलब्ध हैं; अधिकांश browser-ब्राउज़र के पास किसी न किसी तरह के web inspector-वेब इंस्पेक्टर-वेब निरीक्षक हाजिर हैं। लेकिन हमारे पास वे संसाधन iPhone-आई फ़ोन और iPad-आई पैड जैसे उपकरणों के लिए नहीं हैं... अभी तक!

हाल ही में Safari 6-सफारी सिक्स-सफारी ६ और iOS 6-आई ओ एस सिक्स-आई ओ एस ६ के विमोचन के साथ, आप अब वेब इंस्पेक्टर को डेस्कटॉप पे और मोबाइल सफारी पे बनाने और डिबगिंग करने के लिए उपयोग में ले सकते है। सबका सर्वश्रेष्ठ? सेटअप करना एक आसान प्रक्रिया है। यह ट्यूटोरियल-स्वशिक्षण का अनुसरण करें और आपके पास मोबाइल iDevices-आई डिवाइसिस के लिए तुरंत कुछ शक्तिशाली डिबगिंग टूल्स आ जाएंगे।

वेब अप्लीकेशन और वेबसाइट बनाने में आधुनिक ब्राउज़र developer tools-डेवलपर टूल्स-सॉफ्टवेयर विकसित करने के संसाधन बहुत बड़े सहायक बने हैं। Chrome-क्रोम के पास developer tools-डेवलपर टूल्स है। Firefox-फायरफॉक्स? Firebug-फायरबग. Safari-सफारी? Web inspector-वेब इंस्पेक्टर। सभी वेब डेवलपमेंट में शक्तिशाली टूल्स हैं।

जो भी हो, अभी तक मोबाइल उपकरणों पे वेबसाइट्स और वेब ऍप्लिकेशन्स को debug-डिबग-क्षतिरहित करना परेशानी रही है। चूँकि Safari और Chrome  दोनों webkit engine-वेबकिट इंजन पे काम करते हैं, डेस्कटॉप और मोबाइल ब्राउज़र जैसे वेब layout-लेआउट-अभिन्यास render-रेंडर-प्रस्तुत करते हैं उनमें काफी समानताएं हैं। इसलिए, ज्यादातर डिज़ाइनर/डेवलपर उनकी वेबसाइट डेस्कटॉप पे इनमे से किसी एक ब्राउज़र का प्रयोग करके बनाते हैं और उसमें फेरबदल करते हैं, यह मानते हुए कि webkit engine-वेबकिट इंजन से मिले हुए परिणाम की समानता पृष्ठ को उसी तरीके से कोई मोबाइल उपकरण पर प्रस्तुत करेगी।

हालांकि, मोबाइल और डेस्कटॉप प्लेटफॉर्म-ढांचे काफी अलग हैं। उनके मेमरी क्षमता, निष्पादन क्षमता, इनपुट उपकरण, और नेटवर्क संयोजन भिन्न हैं। इसलिए यह अनिवार्य हो गया है कि एक डिज़ाइनर के मोबाइल उपकरणों के लिए डिबगिंग टूल्स बढ़िया तरीके से काम दें-पर्फॉर्मेंट हों और उनके डेस्कटॉप समकक्षों से मेल खाते हों।

Apple-एप्पल के नए सॉफ्टवेर iOS 6-आईओएस ६ और Safari 6-सफारी ६ का विमोचन मोबाइल उपकरणों पे डेस्कटॉप ब्राउज़र डिबगिंग टूल्स की कई विशेषताओं को लाया है, जो हम सभी जानते और पसंद करते हैं। यह ट्यूटोरियल आपको सफारी के वेब इंस्पेक्टर का उपयोग करके मोबाइल वेबसाइट को डिबग करने के लिए सेटअप की आसान प्रक्रिया को दिखाएगा।

हम चालू करें उससे पहले, compatibility-कम्पेटिबिलिटी-सुसंगतता में बारे में टिप्पणी: जो लोग Windows-विंडोज का प्रयोग करते हैं उनके लिए ख़राब समाचार हैं। आप एक Mac-मैक पे remote-रिमोट-दूरस्थ वेब इंस्पेक्टर का प्रयोग करके सिर्फ डिबग कर सकते हैं। विंडोस के लिए Safari 6-सफारी ६ उपलब्ध नहीं हैं। साथ ही, Safari 6-सफारी ६ सिर्फ Macs-मैक्स जो OSX Lion-ओ एस एक्स लायन या उसके बाद के संस्करण चलाते हैं उन्ही के लिए उपलब्ध हैं।

वेब इंस्पेक्टर के प्रयोग की पद्धतियाँ

मोबाइल सफारी में वेब इंस्पेक्टर प्रयोग में लेने के लिए दो पद्धतियाँ हैं:

1. Real Device Method-रियल डिवाइस मेथड-असली उपकरण का पद्धति: USB-यु एस बी के द्वारा आपके कंप्यूटर से जुडे हुए असली iDevice-आई डिवाइस (iPhone-आई फ़ोन, iPad-आई पैड, इत्यादि) का प्रयोग करें
2. Virtual Device Method-वर्चुअल डिवाइस मेथड-आभासी उपकरण पद्धति: iOS Simulator-आई ओ एस सिम्युलेटर-आई ओ एस अनुकारी का प्रयोग करें, जो Xcode-एक्सकोड का हिस्सा है।

हम इन दोनों पद्धतियों का समावेश करेंगे और जो आपकी परस्थिति से सबसे ज्यादा मेल खाता है उस को चुनना आप पर छोड़ देंगे।

चरण १: सुनिश्चित करें की आप अद्यतन हों

चूँकि वेब इंस्पेक्टर से मोबाइल उपकरणों को डिबग करना एक नई सुविधा है, आप को सुनिश्चित करना होगा की आपके पास अद्यतन सॉफ्टवेर हों।

असली उपकरण पद्धति: वेब इंस्पेक्टर को असली iDevice-आई डिवाइस के साथ उपयोग करने के लिए, आपको निम्नलिखित की जरुरत पड़ेगी:

• एक iOS 6-आई ओ एस ६ चलाता हुआ iDevice-आई डिवाइस (iPhone-आईफ़ोन, iPad-आईपैड, iTouch-आईटच)
• USB Cable-यु एस बी केबल
• Safari 6-सफारी ६
• Mac OSX Lion (10.7.4)-मैक ओ एस एक्स लायन (१०.७.४) या उसके ऊपर का संस्करण

आभासी उपकरण पद्धति: वेब इंस्पेक्टर का आईओएस सिम्युलेटर के साथ उपयोग करने के लिए, आपको निम्नलिखित की जरुरत पड़ेगी:

• Safari 6-सफारी ६
• Mac OSX Lion (10.7.4)-मैक ओ एस एक्स लायन (१०.७.४) या उसके ऊपर का संस्करण
• Xcode 4.5-एक्सकोड ४.५, iOS 6 SDK-आई ओ एस ६ एस डी के (app store-एप्प स्टोर में उपलब्ध)

सॉफ्टवेर के संस्करण-वर्ज़न को जांचना: आप अपने iDevice-आई डिवाइस पे iOS 6-आई ओ एस ६ चला रहे है या नहीं ये जानने के लिए, आपके उपकरण पे "Settings > General > About"-"सेटिंग्स > जनरल > अबाउट" में जाएं।

आप Safari 6-सफारी ६ चला रहे है या नहीं ये जानने के लिए, Safari-सफारी के मेनुबार में जाएं और "Settings > About Safari"-"सेटिंग्स > अबाउट सफारी" को क्लिक करें।

आप Lion-लायन चला रहे है या नहीं ये सुनिश्चित करने के लिए, मेनुबार में Apple-एप्पल के logo-लोगो-प्रतिक चिन्ह को क्लिक करें और "About this Mac"-"अबाउट धिस मैक" का चयन करें

आप Xcode-एक्सकोड का सही संस्करण उपयोग में ले रहे हैं या नहीं यह सुनिश्चित करने के लिए, Xcode-एक्सकोड को चालू करें और "Xcode > About Xcode"-"एक्सकोड > अबाउट एक्सकोड" का चयन करें

चरण २: डेवलपर टूल्स को चालूँ करें 

आपको सफारी के डेस्कटॉप और मोबाइल संस्करण में डेवलपर टूल्स और वेब इंस्पेक्टर जरूर इनेबल-चालू करना चाहिए।

असली उपकरण पद्धति: अगर आप एक असली उपकरण प्रयोग मे लेने वाले है, तो उसे युएसबी के द्वारा अपने मैक से जोड़ें।

आभासी उपकरण पद्धति: अगर आप आई ओ इस सिम्युलेटर का उपयोग करने वाले है, तो एक्सकॉड को खोलें, उसके बाद dock icon- डॉक आइकॉन पे राईट-क्लिक-माउस का दायाँ बटन क्लिक करें और "Open Developer Tool > iOS Simulator"-"ओपन डेवलपर टूल > आईओएस सिम्युलेटर" पे क्लिक करें।

मोबाइल सफारी: आपके असली आइडिवाइस पे या आईओएस सिम्युलेटर में "Settings > Safari > Advanced"-"सेटिंग्स > सफारी > एडवांस्ड" पे जाएं और "Web Inspector"-"वेब इंस्पेक्टर" को चालू करें।

डेस्कटॉप सफारी: अगर आपने पहले से ही नहीं कर रखा है, सुनिश्चित करें कि आपने सफारी में डेवलपर टूल्स को चालू किया हों। अगर आप मेनूबार में "Develop"-"डेवलप" देख सकते है तो आप समझेंगे कि आपने उनको चालू कर रखा है।

अगर आप मेनू बार में  "Develop"-"डेवलप" नहीं देख सकते, तो मेनुबार पे जाएं और "Safari > Preferences > Advanced"-"सफारी > प्रैफरेंसेज > एडवांस्ड" पे क्लिक करें और "Show develop menu in menu bar"-"शो डेवलप मेनू इन मेनूबार"-"मेनूबार में 'विकसित करें' मेनू को दिखाएँ" checkbox-चेकबॉक्स को पसंद करें।

चरण ३: आपकी वेबसाइट का निरिक्षण करें

अब जब आपके पास आईओएस सिम्युलेटर खुला हुआ है या आपका आइडिवाइस आपके मैक से यूएसबी के द्वारा जुडा हुआ है (या दोनों!), आप आपकी वेबसाइट पे वेब इंस्पेक्टर का उपयोग करने के लिए तैयार है।

आपके मैक पे, सफारी खोलें और "Develop"-"डेवलप" पे जाएं। अब आपको कोई भी आइडिवाइस (आभासी या असली) दिखने चाहिए, जो आपने आपके मैक से जोड़े हुए है और चला रहे है। नीचे के screenshot-स्क्रीनशॉट में, आप देख पाएंगे कि मेरे पास मेनू में दो उपकरण है: एक आईओएस सिम्युलेटर है, दूसरा असली आईफोन जो मेरे मैक से जुड़ा हुआ है।

को वेबसाइट का वास्तव में निरिक्षण चालू करने के लिए, आपने आपके उपकरण पे मोबाइल सफारी चालू किया हुआ होना चाहिए और वेबसाइट किसी एक tab-टैब में खुली होनी चाहिए। अगर आपके पास मोबाइल सफारी खुला हुआ नहीं है, तो आप एक संदेश देखेंगे जिसमे लिखा होगा "No Inspectable Applications"-"नो इंस्पेक्टेबल ऍप्लिकेशन्स"-"निरिक्षण के योग्य कोई अनुप्रयोग नहीं"।

निरिक्षण चालू करने के लिए, मोबाइल सफारी में जिस पृष्ठ का आप निरिक्षण करना चाहते है उसका बस URL-यु आर एल दर्ज करें और उसके बाद "Develop"-"डेवलप" मेनू में से वह वेबसाइट का चयन करें। आप अपने असली आइडिवाइस पे या आईओएस सिम्युलेटर से निरिक्षण करना चालू कर सकते है। जब आप पृष्ठ पसंद करते है, तब आप पृष्ठ पे एक नीले रंग का overlay-ओवरले-ऊपरी-स्तर देखेंगे, जो दिखाता है कि आपने कौन सा चयन किया है।

एक साइट का चयन करके, सफारी का वेब ब्राउज़र खुल जाएगा और आपको आपकी वेबसाइट का निरीक्षण करना चालू करने देगा। बस, इतना ही!

समापन

अब चूँकि सफारी का वेब इंस्पेक्टर आपकी उँगलियों पर है, तो वेबसाइट और वेब एप्लीकेशन तैयार करने और डिबगिंग करने में आपका अच्छा-खासा नियंत्रण है।

जब मोबाइल साइटों का डिबगिंग कर रहे है, तब कुछ चीजें जो आप अब कर सकते है, उनका नमुना ये रहा:

• वर्तमान में HTML-एच टी एम एल और CSS-सी एस एस में बदलाव करें।
• JavaScript events-जावास्क्रिप्ट इवेंट्स और network request-नेटवर्क रिक्वेस्ट के लिए विवरण देखने का समावेश करते हुए, देखें कि आपकी वेबसाइट/एप्लीकेशन कैसे काम कर रही है।
• Breakpoints-ब्रेकपॉइंटस और दूसरे टूल्स का प्रयोग करके जावास्क्रिप्ट को क्षतिरहित-डिबग करें।
• चेतावनियाँ और क्षतियाँ को देखें।
• Console-कंसोल में प्रवेश पाएं।
• DOM-डी ओ एम को खोजें।
• साइट के storage-स्टोरेज-संग्रह क्षमता की माहिती के लिए दाखिल हों और उसको देखें।

अब आपके पास टूल्स है, आगे बढ़ें और बनाएं!