আইওএসের জন্য ক্রোমের সাম্প্রতিক প্রকাশের সাথে সাথে আমি ভাবছিলাম যে আপনি কীভাবে Chrome আইওএসের জন্য রিমোট ডিবাগিং সক্ষম করবেন?
আপডেট: আইওএস 6 প্রকাশের সাথে সাথে সাফারি দিয়ে এখন দূরবর্তী ডিবাগিং করা যেতে পারে ।
আইওএসের জন্য ক্রোমের সাম্প্রতিক প্রকাশের সাথে সাথে আমি ভাবছিলাম যে আপনি কীভাবে Chrome আইওএসের জন্য রিমোট ডিবাগিং সক্ষম করবেন?
আপডেট: আইওএস 6 প্রকাশের সাথে সাথে সাফারি দিয়ে এখন দূরবর্তী ডিবাগিং করা যেতে পারে ।
উত্তর:
হালনাগাদ:
এই না সর্বোত্তম উত্তর আর, অনুসরণ করুন gregers 'পরামর্শ।
নতুন উত্তর:
Weinre ব্যবহার করুন ।
পুরানো উত্তর:
আপনি এখন রিমোট ডিবাগিংয়ের জন্য সাফারি ব্যবহার করতে পারেন। তবে এর জন্য আইওএস 6 দরকার।
এখানে http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector এর একটি দ্রুত অনুবাদ দেওয়া আছে
সায়মনস উত্তর দ্বারা নির্দেশিত হিসাবে, দূরবর্তী ডিবাগিংয়ের কাজ করার জন্য আপনার ব্যক্তিগত ব্রাউজিং বন্ধ করতে হবে।
সেটিংস> সাফারি> ব্যক্তিগত ব্রাউজিং> বন্ধ
নির্বাচিত উত্তরটি কেবল সাফারির জন্য। এই মুহুর্তে আইওএসের ক্রোমে রিয়েল রিমোট ডিবাগিং করা সম্ভব নয় তবে বেশিরভাগ মোবাইল ব্রাউজারের মতো আপনি কিছু সাধারণ ডিবাগিংয়ের জন্য ওয়েইনআরই ব্যবহার করতে পারেন । এটি সেট আপ করা কিছুটা কাজ, তবে আপনাকে DOM পরিদর্শন করতে, স্টাইলিং দেখতে, DOM পরিবর্তন করতে এবং কনসোল দিয়ে খেলতে দেয়।
স্থাপন করতে:
npm install -g weinre
weinre --boundHost -all-
বুকমার্কলেট ইনস্টল করতে কিছুটা ঝামেলা। আপনি ডেস্কটপ এবং মোবাইল ক্রোম উভয়ের জন্য বুকমার্ক-সিঙ্ক চালু থাকলে এটি সবচেয়ে সহজ। স্থানীয় ওয়েইন সার্ভার থেকে বুকমার্কলেট ইউআরএল অনুলিপি করুন (উপরের মত) দুর্ভাগ্যক্রমে এটি কাজ করে না কারণ এটি url-encoded সঠিকভাবে হয়নি। সুতরাং জাভাস্ক্রিপ্ট কনসোলটি খুলুন এবং এতে টাইপ করুন:
copy(encodeURI('')); // paste bookmarklet inside quotes
আপনার ক্লিপবোর্ডে এখন url- এনকোডড বুকমার্কলেট থাকা উচিত। মোবাইল বুকমার্কগুলির নীচে এটি একটি নতুন বুকমার্কে আটকান । এটিকে ওয়েইন বা টাইপ করার জন্য সহজ কিছু বলুন। এটি আপনার মোবাইলে খুব দ্রুত সিঙ্ক করা উচিত, সুতরাং আপনি যে পৃষ্ঠাটি পরিদর্শন করতে চান সেটি লোড করুন। তারপরে ইউআরএল-বারে বুকমার্কের নামটি টাইপ করুন এবং আপনার বুকমার্কলেটটি একটি স্বয়ংক্রিয়-সম্পূর্ণ-পরামর্শ হিসাবে দেখা উচিত। বুকমার্কলেট কোড চালানোর জন্য এটি ক্লিক করুন :)
Ctrl-Shift-B
না হলে এটি দৃশ্যমান করুন)।
npm install -g weinre
আমার জন্য কাজ করে না। সুতরাং আমি এটি সংস্করণ দিয়ে চালাতে হয়েছিল npm install -g weinre@2.0.0-pre-I0Z7U9OV
। এখানে সর্বশেষ সংস্করণ পরীক্ষা করুন npmjs.com/package/weinre ।
আপনি বর্তমানে আইওএসে সরাসরি রিমোট ডিবাগ ক্রোম করতে পারবেন না। এটিতে একটি ইউআইবিউবভিউ ব্যবহার করা হয়েছে যা মোবাইল সাফারি থেকে আলাদাভাবে কাজ করতে পারে।
আপনার স্বল্প কিছু সু্যোগ আছে।
বিকল্প 1: সাফারির পরিদর্শক ব্যবহার করে রিমোট-ডিবাগ মোবাইল সাফারি। যদি আপনার ইস্যুটি মোবাইল সাফারিতে পুনরুত্পাদন করে তবে অবশ্যই যাওয়ার সেরা উপায় এটি। আসলে, আইওএস সিমুলেটারের মধ্য দিয়ে যাওয়া আরও সহজ।
বিকল্প 2: একটি স্লিমড ডাউন ডিবাগিং অভিজ্ঞতার জন্য ওয়েইনার ব্যবহার করুন । ওয়েইনারের খুব বেশি বৈশিষ্ট্য নেই তবে কখনও কখনও এটি যথেষ্ট ভাল।
বিকল্প 3: রিমোট ডিবাগ একটি উপযুক্ত uiWebView একই কাজ করে।
এটি করার সর্বোত্তম উপায় এখানে। আপনাকে এক্সকোড ইনস্টল করতে হবে ।
urlString
আপনি যে URL টি পরীক্ষা করতে চান তা পরিবর্তন করুন ।আমার উপলব্ধি থেকে, গুগল ক্রোম অ্যানড্রয়েড অংশের মতো ক্রোমের সম্পূর্ণ বর্ধিত প্রয়োগের পরিবর্তে আইওএসের ইউআইউইউবভিউ ব্যবহার করে।
অনেক দূরবর্তী কনসোলগুলি সূক্ষ্মভাবে কাজ করে। http://farjs.com আমার প্রকল্প, এবং আমি ক্রোম আইওএস সম্পর্কিত নির্দিষ্ট সমস্যাগুলি সফলভাবে ডিবাগ করতে সক্ষম হয়েছি এবং এটি ব্যবহার করে সাফারিতে ঘটছে না। (এবং সম্ভবত অন্যান্য সমস্ত মোবাইল ব্রাউজার)
সমস্যাটি হ'ল ডিবাগিং কোডটি ইনজেকশন করা কিছুটা জটিল কারণ ক্রোম আপনাকে বুকমার্কলেট ইনস্টল করতে দেয় না।
পরিবর্তে আপনি যে পৃষ্ঠায় ডিবাগ করবেন তার একটি ট্যাব এবং অন্যটি farjs.com এ খুলতে পারবেন এবং তারপরে "বুকমার্কলেট" ক্লিক করুন
বুকমার্কলেট জেএস কোডটি অনুলিপি করুন, ডিবাগ করা উচিত এমন পৃষ্ঠাটি সহ প্রথম ট্যাবে ফিরে আসুন এবং অবস্থান বারে বুকমার্কলেট কোডটি পেস্ট করুন।
সর্বশেষ পদক্ষেপটি হ'ল লোকেশন বারের শুরুতে স্ক্রোল করা এবং "জাভাস্ক্রিপ্ট:" যুক্ত করা, যেহেতু ক্রোম এটি মুছে ফেলবে।
আমি ভোরলোনকে সুপারিশ করি , ওয়েইনারের মতো কাজ করে। আমি Vorlon এর UI 'তে মত, এবং এটি সমর্থন করা SSL , আমার আবেদন HTTPS দ্বারা হয়, আমি ngrok, ghostlab এবং vorlon সঙ্গে weinre চেষ্টা করেছি, শুধুমাত্র vorlon কাজ করে জরিমানা।
আমি এটি চেষ্টা করে দেখিনি, তবে আইওএস ওয়েবকিট ডিবাগ প্রক্সি (ios_webkit_debug_proxy / iwdp) সম্ভবত আপনাকে ইউআইবিউবভিউতে দূরবর্তী ডিবাগ করতে দেয়। README.md থেকে
Ios_webkit_debug_proxy (ওরফে iwdp) ডেভেলপারদের MobileSafari এবং পরিদর্শন করতে পারবেন UIWebViews উপর বাস্তব Chrome DevTools UI এবং Chrome দূরবর্তী ডিবাগ প্রোটোকল মাধ্যমে এবং কৃত্রিম iOS ডিভাইস। ডেভটুল অনুরোধগুলি অ্যাপলের রিমোট ওয়েব ইন্সপেক্টর পরিষেবা কলগুলিতে অনুবাদ করা হয়েছে।
ভোরলন.জেএস আইওএস বা অন্য কোনও ক্লায়েন্টের রিমোট ডিবাগিংয়ের জন্য ব্যবহার করা যেতে পারে।
npm i -g vorlon
vorlon
<script src="http://<yourExternalIP>:1337/vorlon.js"></script>
মনে রাখবেন যে এনগ্রোক ব্যবহার করে লোকালহোস্টে চলছে না এমন অ্যাপ্লিকেশনগুলি ডিবাগ করার জন্যও এই পদ্ধতির ব্যবহার করা যেতে পারে । বিশদ জানতে https://stackoverflow.com/a/45443203/2073920 দেখুন ।
দাবি পরিত্যাগী
আমি কেবল একজন ব্যবহারকারী এবং আমি ভোরলন.জেএস এবং এনগ্রোকের সাথে অনুমোদিত নই
আপনার 'ব্যক্তিগত ব্রাউজিং' বন্ধ করাও দরকার।
সেটিংস> সাফারি> ব্যক্তিগত ব্রাউজিং> বন্ধ
এমনকি আমি একই বৈশিষ্ট্যটি অনুসন্ধান করছি এবং আজকের হিসাবে এটি এখনও কার্যকর করা হয়নি। আমি তবে দুটি বিকল্পের কথা ভাবতে পারি,
আমি লক্ষ্য করেছি যে ক্রোম এবং সাফারির আচরণগুলি বেশ অভিন্ন; ক্রোম এমনকি জাইরোস্কোপ এবং অন্যান্য সম্পর্কিত ইভেন্টগুলিকে সমর্থন করে যা সাফারি দ্বারা সমর্থিত। আমি বর্তমানে সাফারি (সেটিংস-> সাফারি মাধ্যমে) ডিবাগ কনসোলটি সক্ষম করে আমার ওয়েব অ্যাপটি ডিবাগ করছি
অ্যাডোব ছায়াও ব্যবহার করে দেখুন, যা দূরবর্তী ডিবাগিং / পরিদর্শন এবং সিঙ্কের অনুমতি দেয়।
আছে HTH।
অ্যাডোব এজ পরিদর্শন ( https://creative.adobe.com/products/inspect ) আপনার সমস্ত মোবাইল ডিভাইস আইওএস এবং অ্যান্ড্রয়েড ডিবাগ করার আরেকটি উপায় (যদিও উইন্ডোজ ফোন নেই)। এটি দূরবর্তী ডিওএম পরিদর্শন / পরিবর্তনের জন্য ওয়েনার ব্যবহার করে। এটি পদ্ধতিগুলির দ্রুততম নয়, তবে এটি উইন্ডোজে কাজ করে।
ক্রোমিয়ামে একটি খোলা বাগ রয়েছে: https://bugs.chromium.org/p/chromium/issues/detail?id=584905
দুর্ভাগ্যক্রমে তারা অ্যাপল উপর নির্ভর করে ডাব্লু কেভিউতে এটির জন্য একটি এপিআই খোলার জন্য, সম্ভবত সাফারি থেকে ডিবাগিং উপলব্ধ হবে।
দ্রষ্টব্য: ঘোস্টল্যাব স্রষ্টা ভানামকোর সাথে আমার কোনও সম্পর্ক নেই।
ক্রোম-নির্দিষ্ট সমস্যাগুলি ডিবাগ করতে সক্ষম হওয়া আমার পক্ষে গুরুত্বপূর্ণ ছিল, তাই আমি এমন কিছু সন্ধান করতে শুরু করলাম যা আমাকে তাতে সহায়তা করতে পারে। আমি খুশিতে আমার টাকাটি ঘোস্টল্যাব 3 এ ফেলে দিয়েছি । আমি Chrome এবং সাফারি মোবাইল ব্রাউজারগুলিকে পরীক্ষা করতে পারি যেন আমি সেগুলি আমার ডেস্কটপে দেখছি view এটি আমাকে ডিবাগ করতে চাইলে যে কোনও ডিভাইস ব্যবহার করার জন্য আমাকে একটি ল্যান ঠিকানা দেয়। ঠিকানাটি ব্যবহার করে প্রতিটি অ্যাপ্লিকেশন ঘোস্টল্যাবে তালিকায় উপস্থিত হবে।
অত্যন্ত বাঞ্ছনীয়.
সাফারি ডেস্কটপ আইওএস খুলুন
বিকাশ -> প্রতিক্রিয়াশীল নকশা মোড
ডিভাইসের অধীনে "অন্যান্য" ক্লিক করুন
এটি আটকে দিন: মজিলা / 5.0 (আইপ্যাড; ম্যাক ওএস এক্সের মতো সিপিইউ ওএস 10_2_1) অ্যাপলওয়েবকিট / 602.1.50 (কেএইচটিএমএল, গেকোর মতো) ক্রিয়োস / 56.0.2924.79 মোবাইল / 14 ডি 27 সাফারি / 602.1
সাফারি পরিদর্শন সরঞ্জামগুলি ব্যবহার করুন।
দাবি অস্বীকার: আমি ব্রাউজারস্ট্যাকে কাজ করি। [নিশ্চিত হয়েছেন] যে এটি পোস্ট করার অনুমতি দেওয়া হয়েছে কিনা ( আমি কি সংস্থার কোনও পণ্য যেখানে কাজ করছে তার প্রস্তাব দিতে পারি? )
আইওএসে সাফারি ডিবাগ করুন (এখনকার মতো ক্রোমের জন্য নয়, আরও বিশদে আরও পড়ুন))
এটি কিভাবে কাজ করে?
রিয়েল ফোনগুলির সাথে ডেভটুলগুলি ব্যবহার করা
ডেস্কটপ ব্রাউজার ডিভলটুলের মতো কাজ করে এলটিএমএল, সিএসএস সম্পাদনা করুন, উপাদানগুলির উপর ঘুরে দেখুন।
ডেভটুলগুলি ব্যবহার করে রিয়েল ফোনে জাভাস্ক্রিপ্ট কার্যকর করা হচ্ছে
Console
ট্যাবে স্যুইচ করুন , জাভাস্ক্রিপ্ট কোডটি কার্যকর করুন, console.log()
আউটপুট চেক করুন এবং আরও ...
নেটওয়ার্ক ট্যাব, অনুরোধ শিরোনাম, প্রতিক্রিয়া এবং তাই চেক ...
ব্রাউজারস্ট্যাকে ডেভটুলগুলির জন্য সমর্থন?
ডেভটুলগুলি এখানে উপলব্ধ:
ক্লায়েন্ট ব্রাউজারের ক্রোম বা ফায়ারফক্স হওয়া দরকার। এর অর্থ ব্রাউজারস্ট্যাক রিয়েল ডিভাইস ডিভুলস ব্যবহার করতে আপনাকে ম্যাকওএসএক্স বা উইন্ডোতে ক্রোম বা ফায়ারফক্স ব্রাউজার ব্যবহার করতে হবে।
দ্রষ্টব্য: আপনাকে সমস্ত বাস্তব ডিভাইস পরীক্ষা করার পরিকল্পনা কিনতে হবে, একজন নিখরচায় ব্যবহারকারী হিসাবে, আপনি রিয়েল অ্যান্ড্রয়েড ডিভাইসগুলির কয়েকটি (ট্যাবলেট সহ) এবং রিয়েল আইওএস ডিভাইসগুলির কয়েকটি (ট্যাবলেটগুলি অন্তর্ভুক্ত) পাবেন। এছাড়াও, রিয়েল ডিভাইস শব্দের উপর জোর দেওয়া কারণ তারা অনুকরণকারীও সরবরাহ করে।
এটি সম্পর্কে আরও বিশদ, দয়া করে মোবাইল বৈশিষ্ট্য পৃষ্ঠায় ডেভটুলস বিভাগটি পড়ুন ।