اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

درک نحوه استفاده از Inspect Element در اندروید بسیار مهم است. پشت رابط کاربری یک دستگاه اندرویدی، ویژگی ها و تنظیمات پنهان بسیاری وجود دارد. یکی از این ویژگی ها inspect elements یا بررسی عناصر در اندروید می باشد. در ادامه مقاله، نحوه استفاده از inspect element در Android و شروع کار با آن بررسی شده است.

تصویر(1)

Inspect Element چیست؟

Inspect element یکی از ابزارهای توسعه موجود در مرورگرهایی مانند فایرفاکس، گوگل کروم، سافاری و اینترنت اکسپلورر می باشد. به کمک Inspect Element، می توانید تغییرات موقتی در HTML و CSS یک صفحه وب که پایه و اساس محتوای وب سایت است، ایجاد نمایید. تغییراتی که از این طریق در کد ایجاد می‌کنید همزمان در تب مرورگر شما قابل مشاهده خواهند بود.

نگران آسیب دیدن سایت در حین بررسی کد نباشید. تغییرات صرفا روی صفحه نمایش شما قابل مشاهده می باشد. به عبارت دیگر، بدون آسیب رساندن به سایر کاربران، Inspect Element در اندروید می تواند نوعی تجربه آزمون و خطا را برای شما فراهم کند. برای مثال، می توانید از Inspect Element جهت تغییر رنگ متن یا اضافه کردن استایل جدید به صفحه استفاده کنید.

Inspect Element یک ابزار ارزشمند برای توسعه دهندگان وب است زیرا به شما امکان می دهد بدون لود مجدد صفحه، تغییرات کد خود را به سرعت آزمایش کنید. با این حال، برای افراد عادی که می خواهند ظاهر یک صفحه وب را شخصی سازی کنند نیز مفید می باشد. به عنوان مثال، می توانید از Inspect Element در اندروید برای حذف یک تبلیغ از صفحه یا تغییر رنگ پس زمینه وب سایت استفاده کنید. این ابزار توسعه، مزایای مختلفی برای طراحان وب، برنامه نویسان و افرادی که می خواهند برنامه نویسی را یاد بگیرند، به همراه دارد.

مزایای Inspect Element شامل موارد زیر است:

• با استفاده از Inspect Element می توانید نحوه عملکرد کد یک وب سایت را بررسی نمایید. فرض کنید فردی مبتدی در زمینه برنامه نویسی هستید. وقتی از یک وب سایت بازدید می کنید، متوجه نکته ای در مورد آن می شوید که توجه شما را جلب می کند. ممکن است تمایل داشته باشید تا آن را در صفحه‌ای که روی آن کار می کنید، قرار دهید یا ویژگی خلاقانه و جدیدی باشد که هرگز به آن فکر نکرده‌اید. در هر صورت، به کدهای آن نیاز دارید. بنابراین، به کمک Inspect Element در اندروید می توانید آنچه را که در حال رخ دادن است به وضوح مشاهده نمایید.
• Inspect Element به شما امکان می دهد تا پیش نمایش تغییراتی که در حال کدنویسی آن هستید را مشاهده کنید. این ویژگی امکان شناسایی و تصحیح سریع کدهای معیوب را فراهم می کند. با استفاده از inspect element می توانید هر اطلاعاتی را در صفحه تغییر دهید. 
• Inspect Element در صفحات رقیب می تواند به شما اهمیت کلمات کلیدی را که روی آنها متمرکز شده اند، نشان دهد. اگر علاقمند به بهینه سازی صفحه خود برای بهبود رتبه موتورهای جستجو هستید، این قابلیت یک بخش مهم در بازاریابی دیجیتال است.

بررسی یک المان یا عنصر (Inspect Element) مانند مشاهده کد منبع (view source) نیست

اکثر مرورگرها ابزاری برای توسعه دهندگان دارند تا DOM (یک مدل و ساختار درختی از تمام تگ های HTML) را همانطور که توسط مرورگر دیده می شود، مشاهده کنند. کانال‌ها، وب‌سایت‌ها و انجمن‌های مختلف، به کاربران Android اجازه می‌دهند تا کد منبع را مشاهده کنند. با این حال، درک این نکته مهم است که مشاهده کد منبع معادل بررسی عناصر یا همان Inspect Element نیست.

برای مشاهده کد منبع در دستگاه تلفن همراه، URL صفحه وب را با پیشوند ":view-source" وارد کنید. هدف اصلی این کار، بررسی رفتار و مشکل در یک عنصر است. به عنوان مثال، می توان نقاط ضعف را برای ارزیابی مقادیر متغیرها قبل از رندر کردن یک وب سایت، مشخص کرد.

Inspect Element در اندروید را با روش‌های مختلف بررسی کنید

تصویر(2)

استفاده از کروم جهت بررسی Inspect Element در اندروید

در دستگاه Android خود، از Google Chrome برای اسکن سریع اجزا استفاده کنید. می توانید از کامپیوتر دسکتاپ یا لپ تاپ خود برای عیب یابی از راه دور هر مولفه در دستگاه Android، کمک بگیرید.

مراحلی که باید پشت سر بگذارید:

• مرحله 1 - گزینه های توسعه دهنده یا developer options دستگاه اندروید را فعال کنید.
• مرحله 2 - USB Debugging را روشن نمایید. به محض اتصال USB، حالت دیباگ آغاز می شود.
• مرحله 3 - Google Chrome را باز نموده و chrome:/inspect#devices را وارد کنید.
• مرحله 4 - مطمئن شوید که "Discover USB devices" فعال است. این مورد لیستی از هر دستگاه USB متصل به سیستم را نمایش می دهد.

تصویر(3)

مرحله 5 - هنگام اتصال دستگاه اندروید به سیستم، متوجه باکسی به همراه چند گزینه در کنار نام دستگاه خواهید شد. پس از وارد کردن آدرس، روی Open کلیک کنید.

مرحله 6 - در مرحله بعد، روی Inspect در سمت راست URL کلیک نمایید.

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

استفاده از اپلیکیشن ها جهت Inspect Element در اندروید

می‌توانید از چند اپلیکیشن اندرویدی که در Google Play موجود هستند، استفاده کنید. این اپلیکیشن ها شامل برنامه ویرایش صفحه وب، ویرایش HTML، قابلیت Inspect و غیره هستند. هدف اصلی این اپلیکیشن ها نمایش عناصر مورد نیاز روی صفحه گوشی هوشمند بوده و در عین حال شما را قادر می‌سازند تا کد عنصر را ویرایش نمایید.

از آنجایی که اپلیکیشن های اندروید روی صفحه نمایش های کوچک اجرا می شوند، مدیریت، تغییر و خواندن اسکریپت های پیچیده صفحات وب چالش برانگیز است. همچنین، این رویکرد مستلزم دانلود و استقرار مداوم اپلیکیشن در هر دستگاه می باشد. بازار اندروید بسیار پراکنده بوده و بررسی فیزیکی هر دستگاه اندرویدی غیر عملی است. این روند تکراری آزاردهنده می باشد.

با استفاده از Developer Mode اندروید

در تلفن همراه می‌توان وب‌سایت ها را بدون هیچ ابزار جانبی و صرفا با استفاده از یک دستگاه Android، جهت شناسایی باگ‌ها بررسی کرد.

مرحله 1 - Developer Mode را در اندروید خود فعال کنید

روی "About Phone" یا "About Device" در "Settings" دستگاه Android خود ضربه بزنید تا اطلاعات دستگاه نمایش داده شود. با چندین بار ضربه زدن روی "Build Number" حالت توسعه دهنده یا  Developer Mode را فعال کنید.

مرحله 2 – Chrome Desktop را راه اندازی کنید

پس از فعال کردن Developer Mode، دستگاه Android را به سیستم موردنظر خود متصل نمایید.

پس از وارد نمودن chrome://inspect/#devices در نوار آدرس، تیک کنار گزینه Discover USB devices را در مرورگر Chrome قرار دهید.

مرحله 3 - کروم را باز کرده و در کروم از inspect elements استفاده کنید

وقتی در "DevTools" روی "Devices" کلیک می‌کنید، دستگاه اندروید را به همراه نسخه کروم آن مشاهده خواهید کرد. در فیلد "Open tab with url"، آدرس وب سایت را وارد نموده و روی "Open" کلیک کنید.

تصویر(4)

می توانید با کلیک روی گزینه "Inspect" در زیر نام دستگاه، عناصر وب سایت را بررسی کنید.

استفاده از یک اپلیکیشن دیگر برای Inspect Element در اندروید

اگر قصد دارید یک دستگاه Android را روی دسکتاپ خود شبیه سازی کنید تا عناصر را بررسی نمایید، نیاز به نصب یک اپلیکیشن دیگر خواهید داشت. پلتفرم های آنلاین زیادی وجود دارند که به شما امکان شبیه سازی دستگاه های اندرویدی را می دهند.

استفاده از ابزارهای دیباگ از راه دور

ابزارهای توسعه‌ ارائه شده توسط Google Chrome روی دسکتاپ، به شما این امکان را می‌دهند که از راه دور به DOM اپلیکیشن های تحت وب در حال اجرای Android، دسترسی داشته باشید.

دیباگ از راه دور با استفاده از Developer Tools کروم

ابزار برنامه نویسی Chrome به نسخه 32 یا جدیدتر کروم و دستگاه Android نسخه 4.0 به همراه Chrome و اندروید نسخه 4.4 و بالاتر برای دیباگ اپلیکیشن و پیکربندی آن نیاز دارد.

• مرحله 1 - دیباگ USB را در دستگاه Android با کلیک کردن روی "USB debugging" از مسیر "Settings" سپس "Developer Options" فعال کنید.
• مرحله 2 - از کابل USB برای اتصال Android به رایانه یا یک شبیه ساز به صورت محلی، استفاده نمایید.
• مرحله 3 - پس از پیکربندی دستگاه، Chrome را روی دسکتاپ خود راه اندازی و به آدرس chrome:/inspect/ مراجعه نمایید.
• مرحله 4 - دستگاه های USB را جستجو کنید. در صورت نمایش پنجره های پاپ آپ، صرفا روی OK کلیک نمایید. اگر دستگاه به درستی متصل شده باشد، مانند تصویر زیر نمایش داده می شود.

تصویر(5)

• مرحله 5 - از دستگاه یا شبیه ساز خود برای راه اندازی Chrome استفاده کنید.
• مرحله 6 - اکنون، کروم می‌تواند URL ها را در گوشی هوشمند باز کند.
• مرحله 7 - URL اپلیکیشن را وارد کنید. آدرس اپلیکیشن اکنون به همراه لینک inspect قابل مشاهده است.

تصویر(6)

اکنون ممکن است چندین تب در مرورگر باز شود و Chrome همه آنها را لیست کند. علاوه بر این، می‌توانید روی یک تب ضروری تمرکز کرده، تب ها را مجدد لود کرده یا ببندید. برای اجرای پنجره developer tools و شروع دیباگ کد، روی لینک inspect کلیک کنید.

تصویر(7)

برای بررسی، روی عنصر موردنظر کلیک کنید. همچنین امکان یافتن یک عنصر را در صفحه فراهم می کند. اگر از یک شبیه ساز استفاده می کنید، روی آیکون جستجو و سپس عنصر مربوطه کلیک نمایید.

دیباگ  از راه دور با استفاده از Weinre

Weinre مشابه "Chrome on Android" یک ابزار دیباگ از راه دور برای Inspect Element در اندروید است. Weinre به عنوان یک ابزار client-target (کلاینت-هدف) عمل می کند، به طوری که کلاینت (ابزار) رایانه شخصی و هدف (دستگاه تلفن همراه) پلتفرمی است که اپلیکیشن در آن آزمایش می شود.

اجزای Weinre 

• سرور دیباگ: هدف و کلاینت دیباگ، هر دو از یک سرور HTTP استفاده می کنند.
• کلاینت دیباگ: یک inspector (بررسی کننده) برای اپلیکیشن، قابل مقایسه با developer tools.
• هدف دیباگ: اپلیکیشن تحت وب در حال اجرا روی دستگاه اندروید شما.

راه اندازی سرور

• مرحله 1 - از دستور sudo npm -g install weinre برای نصب weinre به صورت پکیج npm استفاده کنید. سپس سرور شما آماده است. برای اجرا از دستور weinre کمک بگیرید. پورت پیش فرض 8080 می باشد. می توانید آن را با دستور <weinre-httpPort port number تغییر دهید. از weinre-help برای بررسی دستورات بیشتر استفاده کنید.
• مرحله 2 - با استفاده از دستور زیر به صفحه اصلی سرور دسترسی پیدا کنید:

 http://<آدرس آی پی سرور>:<port>/

• مرحله 3 - کلاینت دیباگ را با استفاده از دستور زیر در دستگاه خود باز کنید:

http://<آدرس آی پی سرور> : <port>/client/#example

• مرحله 4 - برای اینکه سرور به دستگاه یا شبیه ساز شما دسترسی داشته باشد، آن را از طریق WiFi به شبکه متصل کنید. از مرورگر دستگاه برای دسترسی به URL صفحه اصلی سرور استفاده نمایید. اتصال به سرور با باز شدن URL برقرار می شود.
• مرحله 5 - کد جاوا اسکریپت زیر را به صفحه اضافه کنید تا سرور دیباگ و هدف بتوانند با یکدیگر ارتباط برقرار کنند.

<script src="http:// <آدرس آی پی سرور>:
<port>/target/target-script-min.js”></script>

• مرحله 6 - با باز کردن وب سایت در مرورگر دستگاه شروع کنید. کلاینت دیباگ شما، آن را در تب Remote نمایش می دهد.

با استفاده از تب Elements کلاینت، می توانید صفحه وب خود را دیباگ کنید.

تصویر(8)

بهترین راه برای بررسی یک عنصر یا Inspect Element در اندروید چیست؟

همانطور که توسعه دهندگان اندروید می دانند، بررسی عناصر در اندروید می تواند کمی چالش برانگیز باشد. تعداد بسیار زیاد دستگاه‌ها و نسخه‌های سیستم‌عامل مختلف، اطلاع از اینکه کدام روش بهتر عمل می‌کند، می‌تواند دشوار باشد. یکی از راه‌های بررسی عنصر در اندروید، استفاده از ابزار "inspector" است. این ابزار به شما اجازه می دهد تا HTML و CSS یک عنصر را مشاهده نمایید و بررسی استایل های اعمال شده را آسان می کند.

روش دیگر برای بررسی یک عنصر یا Inspect Element در اندروید استفاده از ابزار "uiautomatorviewer" است. این ابزار یک رابط گرافیکی برای مشاهده ساختار اپلیکیشن اندرویدی ارائه می دهد. این مورد می تواند برای شناسایی موقعیت عناصر صفحه و همچنین شناسه آنها مفید باشد. در نهایت، ابزار "Android Debug Bridge" نیز می‌تواند برای بررسی عناصر در اندروید مورد استفاده قرار گیرد. این ابزار به شما اجازه می دهد تا لاگ های یک دستگاه اندرویدی را مشاهده کرده و به راحتی آنچه را که در پشت صحنه اتفاق می افتد، بررسی کنید. با استفاده از یک یا چند مورد از این روش ها، به آسانی می توانید به Inspect Element در اندروید دسترسی داشته باشید.

در این مقاله روش های مختلفی برای بررسی آیتم ها در دستگاه های اندرویدی بررسی شد. در اندروید، تکنیک‌های گوناگونی برای بررسی وجود دارد. با این حال، می‌توانید وب‌سایت‌ها، اپلیکیشن های تحت وب و اپلیکیشن های موبایل را با استفاده از Testsigma Lab در جدیدترین شبیه‌سازهای iOS موبایل، شبیه‌سازهای مرورگر Android و سخت‌افزار واقعی، به‌طور یکپارچه آزمایش کنید.

جمع بندی

اگر توسعه دهنده فرانت اند هستید، عملکرد "Inspect element" مرورگر به شما امکان می دهد عناصر یک وب سایت را بدون نگرانی از خراب شدن آنها آزمایش نمایید. از آنجایی که صفحات وب در دسکتاپ و موبایل متفاوت هستند، باید بررسی کنید که چگونه یک صفحه وب در موبایل ظاهر می شود. این یکی از زمینه‌هایی است که ابزاری مانند Inspect Element در اندروید می‌تواند مفید باشد. اگر در حال ایجاد یک اپلیکیشن هستید و تمایل دارید آن را از یک سایت به سایتی دیگر، بدون دانلود و آپلود مجدد تعمیم دهید، می‌توانید از این ابزار کمک بگیرید.