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

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

با ویژگی Inspect، می توانید عملکرد داخلی وب سایت را بررسی کنید. البته توجه داشته باشید که فقط بررسی frontend مانند HTML ،CSS و بعضی اوقات JavaScript امکان پذیر است اما به شما این امکان را می دهد تا دقیقاً مشاهده کنید، توسعه دهندگان چگونه یک وب سایت را طراحی کرده اند.

در این پست نحوه استفاده از ابزار Inspect و برخی از فناوری ها، ویژگی ها و عملکردهای مرتبط با آن توضیح داده می شود.

فهرست مطالب

• معرفی ابزار Inspect
• چرا باید از Inspect استفاده کنید
• چگونه ابزار Inspect را در مرورگر خود پیدا کنید
• 3 موقعیت استفاده از ابزار Inspect
• نکات و ترفندهایی برای استفاده از ابزار Inspect

معرفی ابزار Inspect

قبل از اینکه Inspect معرفی شود، فقط یک راه برای مشاهده سورس کد یک وب سایت وجود داشت و آن هم ویژگی View Source بود. توسعه دهندگان وب از HTML برای همه عناصر سایت از جمله محتوا، طراحی و ... استفاده می کردند.

هنگامی که وب شروع به تکامل کرد و فناوری های اساسی قدرت بیشتری یافتند، توسعه ابزارها ضرورت پیدا کرد. Firefox’s Firebug یک راه حل اولیه برای کشف نحوه عملکرد یک وب سایت بود:

تصویر(1)

بعد از مدتی، این قابلیت تقریباً در همه مرورگرها مشاهده گردید. امروزه این ویژگی به عنوان ابزار Inspect شناخته می شود:

تصویر(2)

این مورد یک روش قدرتمند برای مشاهده فناوری و کد اصلی یک وب سایت است. برای دسترسی به Inspect می توانید اغلب از طریق کلیک راست در صفحه سایت و انتخاب گزینه Inspect، استفاده از کلید ترکیبی CTRL+Shift+I و یا فشردن کلید F12 بر روی صفحه کلید اقدام کنید.

تمرکز اصلی ابزار Inspect بر روی HTML و CSS یک صفحه سایت است در حالی که کارهای بیشتری نیز می توانید با آن انجام دهید.

بررسی پنل Inspect

تصویر(3)

ابزار Inspect فراتر از راهی برای نمایش کد است. چندین دسترسی دیگر نیز از طریق Inspect در اختیار شما قرار می گیرد:

Inspector - در برخی از مرورگرها به آن Elements گفته می شود. Elements تب اصلی در ابزار Inspect است و کد صفحه را به همراه CSS مخصوص آن به شما نشان می دهد. همچنین می توانید جزئیات بیشتری درباره "grid system" (گرید سیستم یک استاندارد برای چینش المان های HTML در صفحات سایت است) سایت و سایر جنبه ها پیدا کنید.

Console - کنسول یک گزارش هشدار دهنده برای یک سایت، مکانی برای انجام آزمایش سریع یک ایده و تست قطعه کدها است.

Network - در اینجا درخواست های ارسال و دریافت شده از سرور مانند همه درخواست های POST و GET را مشاهده خواهید کرد.

Performance - یک سایت باید عملکرد صحیحی داشته باشد. به همین ترتیب ابزاری اختصاصی برای کمک به شما در سنجش برخی از معیارهای ضروری سایت وجود دارد. برخی از مرورگرها در این بخش بهتر عمل می کنند.

Memory - این تب به شما امکان می دهد نحوه استفاده یک سایت از حافظه را ببینید. برخی از مرورگرها معیارهای گسترده ای را در این بخش ارائه می دهند.

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

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

چرا باید از Inspect استفاده کنید

ابزار Inspect تقریباً تنها ابزاری است که در طول توسعه باید در کنار خود داشته باشید. در ادامه مقاله به جزئیات فنی در مورد چرایی استفاده از این ابزار پرداخته می شود. اگرچه در ابتدا لازم است در مورد انگیزه خود برای استفاده از Inspect پاسخ دهید.

چند دلیل برای استفاده از این ابزار به شرح زیر است:

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

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

ابزار Inspect به شما امکان می دهد HTML و CSS مورد استفاده در یک سایت را بررسی کنید و فرصتی عالی برای پیاده سازی این ایده ها و تکنیک ها در سایت خود به دست آورید.

چگونه ابزار Inspect را در مرورگر پیدا کنید

یافتن ابزار Inspect در مرورگر ها بسیار ساده است. در بیشتر موارد کافی است بر روی صفحه کلیک راست کرده و گزینه "Inspect" را انتخاب کنید:

تصویر(4)

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

تصویر(5)

البته می توانید از نوار ابزار مرورگر یا از طریق میانبر صفحه کلید نیز به Inspect دسترسی پیدا کنید. مکان دقیق آن بسته به نوع مرورگر متفاوت خواهد بود. به عنوان مثال در Firefox، می توانید Web Developer Tools را در قسمت "More Tools" و سپس با کلیک بر روی "Web Developer Tools" مشاهده کنید (تصاویر6و7). در مقابل، Brave (و سایر مرورگرهای مبتنی بر Chromium) گزینه Developer Tools را در منوی View> Developer قرار داده اند.

تصویر(6)

تصویر(7)

3 موقعیتی که استفاده از ابزار Inspect در آنها توصیه می شود

1. جستجوی عناصر خاص در یک صفحه وب

هدف اصلی ابزار Inspect از نام آن مشخص می باشد لذا بررسی عناصر وب سایت جزء اهداف کلیدی آن است. برای انجام این کار به صفحه وب سایت مورد نظر رفته و سپس روش خود را برای باز کردن development tools انتخاب کنید.

پس از باز شدن پنل، بر روی پیکان کلیک کنید که به عنوان انتخاب کننده عنصر مورد نظر شما عمل می کند:

تصویر(8)

از اینجا می توانید بر روی هر عنصر موجود در صفحه حرکت کنید و آن را به صورت برجسته در پنجره Inspector / Elements مشاهده نمایید:

تصویر(9)

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

2. شبیه سازی دستگاه، صفحه نمایش و مرورگر هدف

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

تصویر(10)

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

همانطور که در تصویر زیر مشاهده می کنید، یک نماد کوچک در صفحه Inspect که مربوط به شبیه سازی دستگاه های مختلف است در دسترس خواهید داشت:

تصویر(11)

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

3. اطمینان از عملکرد صفحه وب

ابزار Inspect همچنین می تواند از طریق تب "performance" در مورد سرعت و عملکرد یک وب سایت اطلاعات کاملی در اختیار شما قرار دهد:

تصویر(12)

این ویژگی با ضبط (recording) زمان بارگذاری عناصر و اسکریپت های خاص کار می کند. مرورگرهای مبتنی بر کروم در ارائه این اطلاعات عملکرد درخشانی دارند. با استفاده از این ابزار، صفحه را هنگام بارگیری ضبط کرده تا نتایج را در قالب جدول زمانی مشاهده کنید.

این یک روش عالی برای تشخیص عملکرد صفحه در سطح عمومی است. همچنین می توانید از ابزاری مانند Google PageSpeed Insights یا "Lighthouse" نیز برای بررسی عملکرد سایت خود استفاده کنید. مرورگرهای مبتنی بر کروم دارای یک تولید کننده گزارش Lighthouse داخلی هستند:

تصویر(13)

همچنین می توانید خلاصه ای از تست عملکرد را در چند برگه دیگر مشاهده کنید. به عنوان مثال، می توانید در تب "Call Tree"، خلاصه کلی و گزارشی از رویدادها را مشاهده نمایید:

تصویر(14)

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

قبلاً در مورد چگونگی قدرتمند شدن ابزار Inspect صحبت شد. در ادامه به برخی از ترفندها و نکات برای استفاده بهتر از مجموعه ویژگی های این ابزار اشاره می شود.

• تغییر خصوصیات، مقادیر و حالتهای عنصر

تاکنون فقط مفهوم استفاده از ابزار Inspect برای ایجاد تغییرات موقتی در یک سایت بررسی شد. در ادامه در مورد نحوه انجام این کار با جزئیات بیشتر توضیح داده می شود.

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

تصویر(15)

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

تصویر(16)

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

اگر المان موردنظر را با استفاده از نشانگر انتخاب کنید، می توانید CSS مربوط به آن را در پنل "Styles" سمت راست مشاهده کنید:

تصویر(17)

برای عناصری مانند دکمه ها ممکن است بخواهید با حالت های مختلف آن کار کنید. در این قسمت، حالت hover ارزش امتحان کردن را دارد. برای این کار بر روی پیوند: "hov" در پنل Style کلیک کنید. با انتخاب این گزینه یک لیست از حالت های عنصر ظاهر می شود و می توانید تغییرات مدنظر را در حالت های مختلف مشاهده کنید:

تصویر(18)

از طریق قرار دادن عنصر و تغییر URL منبع تصویر، می توانید تصاویر دیگر را در جای تصویر اصلی آزمایش کنید:

تصویر(19)

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

• جستجو برای عناصر

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

با این اوصاف، دشوار است دنبال چیزی بگردید که نمی دانید در چه بخشی از سایت شما قرار دارد. روش مرسوم در مرورگرهای مبتنی بر Chromium این است که به منوی "traffic light" در سمت راست صفحه بروید و گزینه "Search" را انتخاب کنید:

تصویر(20)

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

تصویر(21)

توجه داشته باشید که در مرورگرهای دیگر ممکن است این قابلیت را در جای دیگری پیدا کنید. به عنوان مثال، Firefox شامل یک جعبه جستجو در بالای صفحه Inspector است:

تصویر(22)

در اینجا یک نکته دیگر وجود دارد که با کلیک راست در قسمت Elements و انتخاب "Expand recursively" می توانید خط کدها و elements مختلف را مشاهده کنید:

تصویر(23)

اگر نگاهی به پنل Styles بیندازید، یک جعبه متن "Filter" نیز پیدا خواهید کرد. این قسمت به شما امکان می دهد بر اساس ویژگی های CSS فیلترهای خود را اعمال کنید و آن را به عنوان یک ابزار عالی برای قابلیت جستجوی سراسری در نظر بگیرید:

تصویر(24)

در کل پیدا کردن آنچه نیاز دارید، با استفاده از دو فیلتر اختصاصی و ابزار جستجو دشوار نیست.

• یک آغازگر سریع بر روی Box Model (مدل جعبه)

​​​​​​​تصویر(25)

این گزینه نمای کلی و نمایشی از چگونگی ظاهر شدن یک جعبه خاص (مانند "عنصر" یا "div") بر روی صفحه را به شما نشان می دهد. به عبارت دیگر این ابزار یک نمای کلی از چگونگی قرار گرفتن margins, padding, border و محتوا در صفحه را به شما نمایش می دهد.

توضیح مدل کامل جعبه CSS و نحوه تعامل آن با HTML یک صفحه وب از حوصله این مقاله خارج است، در صورت تمایل به کسب اطلاعات بیشتر می توانید به لینک زیر مراجعه کنید:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

شما اغلب پنل Box Model را در بخش Layout یا Computing در سمت راست ابزار Inspect پیدا خواهید کرد:

​​​​​​​تصویر(26)

همانند سایر عناصر و خصوصیات، می توانید مقادیر و تنظیمات یک جعبه خاص را نیز تغییر دهید. همچنین لیستی از ویژگی های دیگر برای کمک به شما در موقعیت یابی جعبه، تنظیم z-index، اعمال float، تنظیمات نمایشگر و موارد دیگر وجود دارد.

• شبیه سازی دستگاه ها با استفاده از Inspect

"responsive" و "mobile-friendly" از عوامل اصلی توسعه وب هستند. به همین ترتیب ابزار Inspect از طریق چند ویژگی به این جنبه می پردازد.

​​​​​​​تصویر(27)

اما در Safari گزینه متفاوتی برای بررسی نمایش سایت در دستگاه های تلفن همراه وجود دارد. برای این مورد حالت Enter/Exit Responsive Design Mode در منوی Develop در Safari در دسترس است:

​​​​​​​تصویر(28)

در حالی که Safari فقط به شما امکان انتخاب دستگاه های مختلف Apple را می دهد، سایر مرورگرها انتخاب های بیشتری در اختیار شما قرار می دهند:

​​​​​​​تصویر(29)

دو ویژگی جالب دیگر نیز در اینجا وجود دارد. شما می توانید سرعت شبکه شبیه سازی شده را انتخاب کنید. Safari هیچ گزینه ای برای این مورد ندارد و مرورگرهای مبتنی بر Chromium گزینه های کلی و کوچک از شبکه را ارائه می دهند:

​​​​​​​تصویر(30)

Firefox بهترین گزینه ها را در اینجا در اختیار شما قرار می دهد:

​​​​​​​تصویر(31)

برای جمع بندی موارد مختلف، می توانید haptic feedback و sensor recognition را نیز شبیه سازی کنید. این گزینه به طور پیش فرض در مرورگرهای مبتنی بر Chromium وجود دارد و در Firefox باید آن را روشن کنید:

​​​​​​​تصویر(32)

Firefox در این بخش از سایر مرورگرها عقب است، زیرا Chrome ،Brave و سایر مرورگرها نشانگر شما را به عنوان یک شیء کوچک "مانند انگشت" نشان می دهند. این قابلیت صرفا راهی مطمئن برای تعیین نحوه عملکرد سایت شما در سایر دستگاه ها است.

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

• میانبرهای صفحه کلید هنگام استفاده از ابزار Inspect

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

در اینجا لیستی از محبوب ترین (و با ارزش ترین) میانبرها آورده شده است:

​​​​​​​​​​​​​​​​​​​​​​​​​​​​

تصویر(33)

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

خلاصه

توسعه وب تنها محدود به HTML نیست. فناوری های زیادی در این امر دخیل هستند. 

ابزار Inspect مرورگر یکی از بهترین روش ها برای جستجو در frontend وب سایت و یافتن جزئیات کاملی از نحوه کار آن است. این ابزار می تواند به شما کمک کند تغییرات سایت خود را آزمایش و نحوه عملکرد آن را در دستگاه های مختلف و شبکه های تلفن همراه مشاهده کنید.