چای ۲: دسترسی به کنسول مرورگر در موبایل

شاید کلا چندبار، ولی پیش‌اومده که بخوام وقتی یک سایت رو روی موبایل واقعی تست می‌کنم، بتونم المان‌ها رو inspect کنم یا کنسول (console) رو چک کنم. خوشبختانه برای اینکار راه‌حل‌هایی وجود داره که در ادامه بررسی می‌کنیم، اما لازم به ذکره، چندان راحت نیستن!

پروژه Eruda

برای استفاده از Eruda، باید اسکریپت اون به سایت اضافه بشه. برای اینکار می‌تونیم اسکریپت زیر رو در آدرس‌بار وارد کنیم:

javascript\:(function () { var script = document.createElement('script'); script.src=&quot//cdn.jsdelivr.net/npm/eruda" document.body(script); script. = function () { eruda.init() } })();

توجه کنید که قسمت :\javascript رو به :javascript تغییر بدین (\ رو حذف کنین).
به دلیل محدودیت ویرگول مجبور به اضافه این کاراکتر شدم تا تمامی اسکریپت به درستی نمایش داده بشه.

برای اینکه هردفعه مجبور به اینکار نباشیم و راحت‌تر استفاده کنیم، پیشنهاد خودشون اضافه کردن اسکریپت بالا به‌‌صورت بوکمارکلت (Bookmarklet) هست تا با اجرای اون Eruda به صفحه اضافه بشه. برای اینکار، کافیه این اسکریپت رو با نامی که دوست دارین Bookmark کنین و دفعه بعدی برای اجرای اون فقط از آدرس‌بار این بوکمارک رو انتخاب کنین.

استفاده از Remote debugging

استفاده از این روش چهار محدودیت داره: تنها برای گوشی‌های اندروید و مرورگر کروم قابلیت استفاده داره، برای اون نیاز هست تنظیمات مربوط به توسعه‌دهندگان (Developers Options) موبایل فعال شود و لازم است موبایل با استفاده از کابل به سیستم وصل شود.

برای فعال کردن Developer Options، وارد تنظیمات موبایل شده و از منوی About phone یا مشابه آن، گزینه مربوط به Build number را پیدا کنید و روی آن چندین بار تپ (tap) کنین تا این تنظیمات فعال شود.
سپس وارد Developer options بشین و گزینه مربوط به USB debugging رو فعال کنین.

در ضمن، توجه کنید که اگر از برنامه‌های سازنده رمز یکبار مصرف (OTP) استفاده می‌کنید، ممکن است پیغام خطا و یا درخواست خاموش کردن این تنظمیات را دریافت کنین.

بعد از اینکه تنظیمات توسعه دهندگان (همینطور USB debugging) رو فعال کردید، موبایل رو با استفاده از کابل به سیستم وصل کنین در صورتی که پیغامی مربوط به دسترسی در موبایل ظاهر شد، اجازه آن را بدهید و وارد آدرس زیر بشین:

chrome://inspect

در این صفحه در قسمت Remote Target دستگاه‌های شناخته شده را به همراه وضعیت اتصال و تب‌های (tab) مرورگر کروم دستگاه مشاهده می‌کنید:

همونطور که احتمالا می‌بینین، قابلیت دسترسی به کنسول service workerها هم امکان پذیره.

حال آدرس دلخواه خود را باز کرده و گزینه inspect مقابل نام آن تب را انتخاب کنین.

با استفاده از input که مقابل اسم دستگاه می‌بینید می‌تو‌نین برای باز کردن یک تب جدید در آدرس دلخواه استفاده کنین.

توجه کنین که مرورگر کروم روی موبایل باز باشد.

+ مشاهده‌ی پروژه‌های local

یکی از ویژگی‌های جالب دیگه کروم امکان به اشتراک گذاری یک پورت داخلی با استفاده از Port forwarding هست. با استفاده از این روش می‌تونیم پروژه‌ای که روی سیستم برای مثلا روی پورت ۳۰۰۰ در حال اجراست رو به یکی از پورت‌های موبایل متناظر (map) کنیم تا بتونیم پروژه رو مستقیم داخل موبایل مشاهده کنیم.

برای اطلاعات و گزینه‌های بیشتر می‌تونید پست «چگونه یک لوکال سرور ران کنیم؟ اند مور» رو مشاهده کنین.

برای اینکار از روی گزینه Port forwarding در بالای کلیک کرده و در سمت چپ پورت مورد نظر روی سیستم و در سمت راست آدرس مورد نظر برای دسترسی به این پورت را وارد کنید:

اگر آدرس مشخصی مد نظر ندارید، localhost:3000 و یا با پورت مشابه را انتخاب کنید.

حالا می‌تونین روی موبایل به این آدرس (localhost:3000) برین و برنامه‌ای که اجرا بود رو مشاهده کنین.

این پست، قسمت دوم از چای، مجموعه‌ای در باب «چیزی که امروز یادگرفتم» است. باقی چای‌ها رو می‌تونید از اینجا مشاهده کنید و در مورد فلسفه اینکار بخونید.