iOS रिमोट डिबगिंग

Question

IOS के लिए Chrome की हालिया रिलीज़ के साथ, मैं सोच रहा था कि आप Chrome iOS के लिए दूरस्थ डिबगिंग कैसे सक्षम कर सकते हैं?

अपडेट: iOS 6 की रिलीज के साथ, अब रिमोट डिबगिंग सफारी के साथ किया जा सकता है ।

Comments

अब मैक पर सफारी के साथ रिमोट डिबगिंग की जा सकती है। लेकिन अगर आप लिनक्स या विंडोज पर विकसित कर रहे हैं, तो आपको अभी भी वीनर (जैसा कि gregers जवाब में कहा गया है) का उपयोग करना होगा।

— देहलियन

सफारी के साथ रिमोट डिबगिंग केवल मोबाइल सफारी का समर्थन करता है, न कि iOS क्रोम का।

— मैट जेन्सेन

कृपया एक माध्यम देखिए. com

— मकाडो

Answer 1

अपडेट करें:

यह वह जगह है नहीं सर्वश्रेष्ठ उत्तर अब, का पालन करें gregers 'सलाह।

नया उत्तर:

वेनरे का उपयोग करें ।

पुराना उत्तर:

अब आप रिमोट डिबगिंग के लिए सफारी का उपयोग कर सकते हैं। लेकिन इसके लिए iOS 6 की जरूरत है।

यहाँ http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector का त्वरित अनुवाद है

1. अपने मैक के साथ USB के माध्यम से अपने iDevice कनेक्ट करें
2. अपने मैक पर सफारी खोलें और देव टूल्स को सक्रिय करें
3. अपने iDevice पर: सेटिंग> सफारी> उन्नत पर जाएं और वेब इंस्पेक्टर को सक्रिय करें
4. अपने iDevice के साथ किसी भी वेबसाइट पर जाएं
5. अपने मैक पर: डेवलपर मेनू खोलें और अपने iDevice (इसके शीर्ष सफारी मेनू में) से साइट को चुना।

जैसा कि सिमंस ने कहा है कि दूरस्थ डिबगिंग कार्य करने के लिए निजी ब्राउज़िंग को बंद करने की आवश्यकता है।

सेटिंग्स> सफारी> निजी ब्राउज़िंग> बंद

Comments

हाँ, मैं पहले से ही इस का उपयोग कर रहा हूँ। आखिरकार! यह बेकार है कि सफारी के विंडोज़ संस्करण में हालांकि यह नहीं है।

— १

मुझे उम्मीद है कि क्रोम उसी सुविधा को जल्द ही सक्षम कर देगा, ताकि यह सभी ओएस पर काम करे।

— बजे F Lekschas

हाँ - यह सुनिश्चित होगा कि अगर यह पूछे गए सवाल का जवाब दिया तो अच्छा होगा!

— आइरीन कन्नप

निजी ब्राउज़िंग बंद करना अब आवश्यकता नहीं है।

— मीलों

डाउनवोट कारण: क्रोम नहीं सफारी के लिए प्रश्न पूछता है ।

— NickG

Answer 2

चयनित उत्तर केवल सफारी के लिए है। फिलहाल iOS पर क्रोम में वास्तविक रिमोट डिबगिंग करना संभव नहीं है, लेकिन अधिकांश मोबाइल ब्राउज़रों के साथ आप कुछ सरल डीबगिंग के लिए WeInRe का उपयोग कर सकते हैं । यह स्थापित करने के लिए थोड़ा काम है, लेकिन आपको DOM का निरीक्षण करने, स्टाइल देखने, DOM को बदलने और कंसोल के साथ खेलने देता है।

स्थापित करना:

• नोडज स्थापित करें
• npm install -g weinre
• weinre --boundHost -all-
• Http: // {wifi-ip-address} खोलें: 8080 / और लक्ष्य स्क्रिप्ट कोड को कॉपी करें
• अपने पृष्ठ में स्क्रिप्ट टैग चिपकाएँ (या बुकमार्कलेट का उपयोग करें)
• डिबग क्लाइंट यूजर इंटरफेस के लिंक पर क्लिक करें (http: // {wifi-ip-address}: 8080 / क्लाइंट / # टैग)
• जब आपको क्लाइंट के तहत एक ग्रीन लाइन मिलती है तो ब्राउज़र जुड़ा होता है

बुकमार्कलेट स्थापित करने के लिए थोड़ी अधिक परेशानी है। यह आसान है अगर आपने डेस्कटॉप और मोबाइल क्रोम दोनों के लिए बुकमार्क-सिंक चालू कर दिया है। स्थानीय weinre सर्वर से बुकमार्कमार्क यूआरएल की प्रतिलिपि बनाएँ (ऊपर के रूप में)। दुर्भाग्य से यह काम नहीं करता क्योंकि यह url- एन्कोडेड ठीक से नहीं है। तो जावास्क्रिप्ट कंसोल खोलें और इसमें टाइप करें:

copy(encodeURI('')); // paste bookmarklet inside quotes

अब आपके क्लिपबोर्ड में url- एन्कोडेड बुकमार्कमार्क होना चाहिए। इसे मोबाइल बुकमार्क के तहत एक नए बुकमार्क में पेस्ट करें । इसे वीनरे या कुछ सरल टाइप करें। यह आपके मोबाइल पर बहुत तेजी से सिंक होना चाहिए, इसलिए उस पृष्ठ को लोड करें जिसे आप निरीक्षण करना चाहते हैं। फिर url-bar में बुकमार्क नाम टाइप करें, और आपको बुकमार्क को एक ऑटो-पूर्ण-सुझाव के रूप में देखना चाहिए। बुकमार्क कोड चलाने के लिए इसे क्लिक करें :)

Comments

यह एकमात्र सही उत्तर है, अन्य सभी सफारी से संबंधित हैं (एक पार्क में चलना)

— मार्स रॉबर्टसन

बहुत उपयोगी निर्देश! मैं सिर्फ यह जोड़ता हूं कि, बुकमार्क करने के लिए, कॉपी करने के बजाय, आप अपने बुकमार्क टूलबार में दिए गए "weinre लक्ष्य डिबग" बुकमार्क लिंक को बस खींच सकते हैं ( Ctrl-Shift-Bयदि यह दृश्यमान नहीं है तो टूलबार दृश्यमान करें )।

— काई कार्वर

इसे काम करने के लिए बुकमार्कलेट इंस्टॉल करने के बाद मुझे अपने ब्राउज़र को रिफ्रेश करने की आवश्यकता थी।

— ओलाला

npm install -g weinreमेरे लिए काम नहीं कर रहा था। इसलिए मुझे इसे संस्करण के साथ चलाना पड़ा npm install -g weinre@2.0.0-pre-I0Z7U9OV। नवीनतम संस्करण यहाँ npmjs.com/package/weinre देखें ।

— विनेश

FWIW, weinre वर्तमान में छाया डोम का समर्थन नहीं करता है - यह केवल शीर्ष स्तर के तत्वों और उनके प्रकाश डोम को दर्शाता है। यह शीर्ष स्तर के तत्वों और उनके छायादार डोम (और लाइट डोम) के अलावा छायादार डोम के लिए भी काम नहीं करता है।

— मैक्स वाटरमैन

Answer 3

वर्तमान में आप iOS पर सीधे Chrome डीबग नहीं कर सकते हैं। यह एक uiWebView का उपयोग करता है जो मोबाइल सफारी की तुलना में भिन्न रूप से कार्य कर सकता है।

आपके पास कुछ विकल्प हैं।

विकल्प 1: सफारी के निरीक्षक का उपयोग करके रिमोट-डिबग मोबाइल सफारी। यदि आपका मुद्दा Mobile Safari में पुन: पेश होता है, तो यह निश्चित रूप से जाने का सबसे अच्छा तरीका है। वास्तव में, आईओएस सिम्युलेटर के माध्यम से जाना और भी आसान है।

विकल्प 2: स्लिमिंग डाउन डीबगिंग अनुभव के लिए वेनरे का उपयोग करें । Weinre में बहुत अधिक विशेषताएं नहीं हैं लेकिन कभी-कभी यह काफी अच्छा होता है।

विकल्प 3: दूरस्थ डिबग एक उचित uiWebView जो समान कार्य करता है।

यहाँ यह करने का सबसे अच्छा तरीका है। आपको XCode इंस्टॉल करना होगा ।

1. Github.com/paulirish/iOS-WebView-App पर जाएं और "ज़िप डाउनलोड करें" या क्लोन करें।
2. XCode खोलें, मौजूदा प्रोजेक्ट खोलें, और आपके द्वारा डाउनलोड की गई परियोजना चुनें।
3. WebViewAppDelegate.m खोलें और urlStringउस URL को बदलें जिसे आप परीक्षण करना चाहते हैं।
4. IOS सिम्युलेटर में ऐप चलाएं।
5. सफारी खोलें, डेवलप मेनू खोलें , iOS सिम्युलेटर चुनें और अपना वेबव्यू चुनें।
6. सफारी इंस्पेक्टर अब आपके uiWebView का निरीक्षण करेंगे।

Comments

क्रोम का उपयोग करके विंडोज पर iOS (iPhone / iPad) का निरीक्षण कैसे करें? क्या उसके लिए कोई विधि है?

— सुरजीत एसएम

@SurjithSM यह जवाब खिड़कियों के साथ मदद नहीं करेगा जबकि आप खिड़कियों पर XCode स्थापित नहीं कर सकते हैं और आईओएस ऐप बना सकते हैं। इसके बजाय इस प्रयास करें stackoverflow.com/a/22047495/1737158

— Lukas Liesis

मेरे पास पहले से ही github.com/google/ios-webkit-debug-proxy के साथ अनुभव है जो कि भयानक उपकरण है, और कल iOS Chrome के साथ Google Chrome को डीबग करने का प्रयास किया गया - यह सबसे भयानक अनुभव है। # 3 के लिए धन्यवाद

— ओलेग आंद्रेयेव

Answer 4

मेरी समझ से, Google Chrome Android समकक्ष की तरह क्रोम के पूर्ण विकसित कार्यान्वयन के बजाय iOS के UIWebView का उपयोग करता है।

Comments

हाँ, मुझे यह प्रश्न करने के बाद पता चला। यह वास्तव में सेब के लिए शर्म की बात है। मैं इस सवाल को बंद मौका पर खुला छोड़ देता हूं कि किसी ने इसे करने का एक तरीका निकाला।

— हाइजेलो

Answer 5

कई रिमोट कंसोल ठीक काम करते हैं। http://farjs.com मेरी परियोजना है, और मैं क्रोम iOS के लिए विशिष्ट मुद्दों को सफलतापूर्वक डीबग करने में सक्षम था और इसका उपयोग करके सफारी में नहीं हो रहा था। (और शायद सभी अन्य मोबाइल ब्राउज़र)

समस्या यह है कि डिबगिंग कोड को इंजेक्ट करना थोड़ा मुश्किल है क्योंकि क्रोम आपको बुकमार्कलेट स्थापित करने की अनुमति नहीं देता है।

इसके बजाय आप उस पृष्ठ पर एक टैब खोल सकते हैं जिस पर आप डीबग करेंगे, और farjs.com पर एक और फिर "बुकलेट" पर क्लिक करें

बुकमार्क जेएस कोड को कॉपी करें, पहले टैब पर वापस जाएं, उस पृष्ठ के साथ जिसे डिबग किया जाना चाहिए, और स्थान पट्टी में बुकमार्क कोड पेस्ट करें।

अंतिम चरण स्थान पट्टी की शुरुआत में स्क्रॉल करना और "जावास्क्रिप्ट:" जोड़ना है, क्योंकि क्रोम इसे हटा देगा।

Answer 6

मेरा सुझाव है Vorlon , weinre तरह काम करता है। मुझे Vorlon का UI पसंद है, और यह SSL का समर्थन करता है , मेरा आवेदन HTTPS में है, मैंने ngrok, ghostlab और vorlon के साथ weinre की कोशिश की, केवल vorlon ठीक काम करता है।

Answer 7

मैंने इसे आज़माया नहीं है, लेकिन iOS WebKit डीबग प्रॉक्सी (ios_webkit_debug_proxy / iwdp) माना जाता है कि आपको UIWebView को दूरस्थ रूप से डिबेट करने देता है। README.md से

Ios_webkit_debug_proxy (उर्फ iwdp) डेवलपर्स को Chrome DevTools UI और Chrome रिमोट डिबगिंग प्रोटोकॉल के माध्यम से वास्तविक और सिम्युलेटेड iOS उपकरणों पर MobileSafari और UIWebViews का निरीक्षण करने की अनुमति देता है । DevTools अनुरोधों का अनुवाद Apple के रिमोट वेब इंस्पेक्टर सेवा कॉल में किया जाता है।

Comments

Chrome वेबव्यू के लिए समर्थन सैद्धांतिक रूप से इसके माध्यम से कार्यान्वित किया जाता है: github.com/RemoteDebug/remotedebug-ios-webkit-adcape जो iOS वेबकिट डीबग प्रॉक्सी के शीर्ष पर बनाया गया है। मुझे अब तक उस प्रोजेक्ट के साथ खुद सीमित सफलता मिली है, लेकिन मुझे उम्मीद है कि यह बेहतर होगा।

— मैट जेन्सेन

Answer 8

Vorlon.JS का उपयोग iOS या किसी अन्य क्लाइंट के दूरस्थ डीबगिंग के लिए किया जा सकता है।

1. बस इसे विश्व स्तर पर उपयोग करके स्थापित करें npm i -g vorlon
2. सर्वर का उपयोग शुरू करें vorlon
3. सर्वर चालू होने के साथ, आपके ब्राउज़र में Vorlon.JS डैशबोर्ड देखने के लिए http: // localhost: 1337 खोलें
4. अंतिम चरण इस स्क्रिप्ट टैग को अपने ऐप में जोड़कर Vorlon.JS को सक्षम करना है:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. सभी कनेक्टेड क्लाइंट जैसे iPhone, Android Vorlon.JS डैशबोर्ड पर क्लाइंट लिस्ट में उपलब्ध हो जाएंगे

ध्यान दें कि इस दृष्टिकोण का उपयोग लोकलहोस्ट पर चलाने वाले ऐप्स को डीबग करने के लिए भी किया जा सकता है जो एनरोक का उपयोग कर रहे हैं । देखें https://stackoverflow.com/a/45443203/2073920 जानकारी के लिए।

अस्वीकरण

मैं सिर्फ एक उपयोगकर्ता हूं और मैं Vorlon.JS और ngrok से संबद्ध नहीं हूं

Comments

मैंने सभी चरणों का पालन किया, लेकिन मेरे iPhone के मैक में चलने वाले VorlonJS में पता नहीं चल रहा है

— अमरजीत सिंह

Answer 9

आपको 'निजी ब्राउज़िंग' भी बंद करनी होगी।

सेटिंग्स> सफारी> निजी ब्राउज़िंग> बंद

Comments

यकीन नहीं हो रहा है कि इस जवाब को क्यों दरकिनार कर दो। दूरस्थ डिबगिंग की अनुमति देने के लिए निजी ब्राउज़िंग की वास्तव में आवश्यकता होती है।

— बेसबॉक्स

@basecode क्योंकि यह एक पूरक उत्तर है जो इसे टिप्पणी में होना चाहिए।

— GusDeCooL

@GusDeCooL मैं देख रहा हूँ, धन्यवाद! एक downvoter द्वारा एक टिप्पणी जो यह बताती है कि यह मददगार रहा होगा।

— बेसकॉक

Answer 10

यहां तक ​​कि मैं उसी सुविधा की तलाश में हूं, और आज के रूप में, अभी तक इसे लागू किया जाना है। मैं हालांकि दो विकल्पों के बारे में सोच सकता हूं,

1. मैंने देखा कि क्रोम और सफारी का व्यवहार काफी समान है; क्रोम यहां तक ​​कि जाइरोस्कोप और अन्य संबंधित घटनाओं का समर्थन करता है जो सफारी द्वारा समर्थित हैं। मैं वर्तमान में सफारी पर डिबग कंसोल (सेटिंग्स के माध्यम से- सफारी) को सक्षम करके अपने वेब ऐप को डिबग कर रहा हूं

2. एडोब शैडो भी आज़माएं, जो रिमोट डीबगिंग / निरीक्षण और सिंक की अनुमति देता है।

HTH।

Answer 11

एडोब एज इंस्पेक्ट ( https://creative.adobe.com/products/inspect ) आपके सभी मोबाइल उपकरणों IOS और Android (कोई विंडोज फोन हालांकि) को डिबग करने का एक और तरीका है। यह दूरस्थ DOM निरीक्षण / परिवर्तन के लिए weinre का उपयोग करता है। यह विधियों का सबसे तेज़ नहीं है, लेकिन यह विंडोज पर काम करता है।

Comments

एडोब एज इंस्पेक्ट अब एडोब क्रिएटिव क्लाउड में सूचीबद्ध नहीं है। Adobe.com/products/edge-inspect.html देखें ।

— रॉन इनबार

सच है, हालांकि आप अभी भी इसे एक वर्तमान सदस्यता के साथ डाउनलोड कर सकते हैं, इस तथ्य के बावजूद कि यह अब विकास के अधीन नहीं है। इसे यहाँ कैसे करें देखें: helpx.adobe.com/creative-cloud/kb/…

— HumbleBeginnings

हालाँकि, iOS ऐप अब उपलब्ध नहीं है। अभी भी Android पर काम कर रहा है, लेकिन अब iOS नहीं: itunes.apple.com/app/id498621426

— bg17aw

Answer 12

क्रोमियम पर एक खुला बग है: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

दुर्भाग्यवश वे ऐसा करने के लिए WKView में एक एपीआई खोलने के लिए Apple पर निर्भर हैं, जिसके बाद शायद डीबगिंग सफारी से उपलब्ध होगी।

Answer 13

मैं रीमोटेब्यूग-आईओएस-वेबकिट-एडेप्टर का उपयोग कर रहा हूं, मेरे लिए विंडोज 10 में क्रोम में खुले आईओएस और डीबगर के साथ काम करता है।

खुशी होगी अगर यह किसी एक लिंक की मदद करे

Answer 14

नोट: मेरा घोस्टलाब के रचनाकारों वनामको के साथ कोई संबंध नहीं है।

क्रोम-विशिष्ट समस्याओं को डीबग करने में सक्षम होना मेरे लिए महत्वपूर्ण था, इसलिए मैंने कुछ ऐसा खोजने की कोशिश की जिससे मुझे मदद मिल सके। मैंने घोस्टलैब 3 पर अपना पैसा खुशी से फेंक दिया । मैं Chrome और Safari मोबाइल ब्राउज़र का परीक्षण कर सकता हूं जैसे कि मैं उन्हें अपने डेस्कटॉप पर देख रहा था। यह सिर्फ मुझे एक लैन एड्रेस देता है जिसका उपयोग मैं किसी भी डिवाइस के लिए कर सकता हूं जिसे मैं डिबग करना चाहता हूं। उस पते का उपयोग करने वाला प्रत्येक एप्लिकेशन घोस्टलैब की सूची में दिखाई देगा।

अत्यधिक सिफारिशित।

Answer 15

सफारी डेस्कटॉप आईओएस खोलें

विकसित -> उत्तरदायी डिजाइन मोड

डिवाइस के तहत "अन्य" पर क्लिक करें

इसे चिपकाएँ: मोज़िला / 5.0 (iPad, मैक OS X की तरह CPU OS 10_2_1) AppleWebKit / 602.1.50 (KHTML, Gecko की तरह) CriOS / 56.0.2924.79 मोबाइल / 14D27 सफारी / 602.1

सफारी निरीक्षण उपकरण का उपयोग करें।

Answer 16

अस्वीकरण: मैं BrowserStack पर काम करता हूं। ^{[पुष्टि की गई] कि क्या मुझे इसे पोस्ट करने की अनुमति है ( क्या मैं सुझाव दे सकता हूं कि कंपनी का कोई उत्पाद किस पर काम कर रहा है? )}

IOS पर डीबग सफारी (अभी तक क्रोम के लिए नहीं, अधिक जानकारी के लिए आगे पढ़ें।)

यह कैसे काम करता है?

• आपको किसी भी वास्तविक डिवाइस पर एक सत्र शुरू करने की आवश्यकता है (एमुलेटर हैं लेकिन आपको ब्राउज़रस्टैक पर एक वास्तविक डिवाइस पर एक सत्र शुरू करने की आवश्यकता है), iPhone 6S कहते हैं - सफारी / क्रोम (क्रोम के लिए कोई devtools अभी तक नहीं है, लेकिन यह हमारे रोडमैप पर है)
• URL में टाइप करें
• ब्राउज़रस्टैक्स रिमोट डिवाइस पर खोले गए वेबपृष्ठ का निरीक्षण करने के लिए आप DevTools को ट्रिगर कर सकते हैं। मैंने नीचे उसी के लिए स्क्रीन साझा की है।

---

रियल फोन के साथ DevTools का उपयोग करना

तत्वों पर होवर करें, HTML, सीएसएस को उसी तरह संपादित करें जैसे डेस्कटॉप ब्राउजर डिवुल्स काम करते हैं।

---

DevTools का उपयोग करके वास्तविक फोन में जावास्क्रिप्ट निष्पादित करना

Consoleटैब पर स्विच करें , जावास्क्रिप्ट कोड निष्पादित करें, console.log()आउटपुट वगैरह चेक करें ...

---

नेटवर्क टैब, रिक्वेस्ट हेडर, प्रतिक्रिया वगैरह ...

---

BrowserTack पर DevTools के लिए समर्थन?

• DevTools पर उपलब्ध हैं:

  • असली डिवाइस - iOS - सफारी (iOS क्रोम के लिए DevTools हमारे रोडमैप पर है)
  • असली उपकरण - Android - Chrome (अभी के लिए Android उपकरणों पर केवल Chrome उपलब्ध है)

• क्लाइंट ब्राउज़र को क्रोम या फ़ायरफ़ॉक्स होना चाहिए। इसका मतलब है कि आपको ब्राउज़रस्टॉक रियल डिवाइस देवटूल का उपयोग करने के लिए मैकओएसएक्स या विंडोज पर क्रोम या फ़ायरफ़ॉक्स ब्राउज़र का उपयोग करने की आवश्यकता है।

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

इस बारे में अधिक जानकारी, कृपया मोबाइल फीचर पेज पर DevTools अनुभाग देखें ।

Comments

उन्होंने iOS पर क्रोम डीबग करने के लिए कहा। मैं एक browserstack ग्राहक हूँ और खुद एक मैक तो iOS पर सफारी डिबगिंग संभव है, लेकिन क्रोम संभावना अंतराल दूर debugable होने के लिए करता है

— fabs

@fabs हमारे पास अपने रोडमैप पर है। इसके अलावा, मैंने उल्लेख किया है कि यह केवल सफारी पर काम करता है - आईओएस डिवाइस, और एंड्रॉइड डिवाइस के लिए क्रोम :)

— श्री एलियन

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

— टिम वर्मालेन

उत्तर वैसे भी प्रश्न का उत्तर नहीं देता है। जबकि Browserstack एक महान सेवा प्रदान करता है, यह उत्तर पूरी तरह से विषय से दूर है।

— मैट जेन्सेन