نحوه استفاده و آموزش Inspect Element مرورگر

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

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

وقتی یک سایت تازه تاسیس شده باشد، فقط با کمک View Source می‌توان کد آن سایت مشاهده کرد. استفاده از این ویژگی قبل از دسترسی به (CSS) و جاوا اسکریپت بسیار رایج بود. توسعه دهندگان وب برای تمام تگ‌های سایت، از جمله محتوا، طراحی و غیره از HTML استفاده می‌کنند.

وقتی وب توسعه پیدا کرد و فناوری‌های زیربنایی قدرتمند شد، به ابزارهای بهتری برای توسعه سایت نیاز است. در گذشته Firebug فایرفاکس یک راه‌حل اولیه برای یافتن نحوه عملکرد و عملکرد زیربنای یک وب سایت بود. پس از مدتی، این قابلیت تقریباً در تمام مرورگرها راه پیدا کرد. امروز، این ویژگی به عنوان ابزار Inspect Element شناخته می‌شود.

استفاده از این ابزار یک راه قدرتمند برای دیدن فناوری و کدهای یک وب سایت است. این ابزار را می‌توان در چند مکان مختلف، از طریق منوی نوار ابزار، کلیک راست روی یک صفحه و انتخاب گزینه (Inspect) یا با میانبر صفحه‌کلید F12 پیدا کرد. در حالی که تمرکز اصلی ابزار Inspect Element بر روی HTML و CSS یک صفحه است، کارهای بیشتری نیز می‌توان با آن انجام داد.

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

• Inspector: در برخی از مرورگرها به آن Elements گفته می‌شود. این صفحه اصلی در ابزار اینسپکت مرورگر بوده که کد صفحه را به همراه CSS به شما نشان می‌دهد. همچنین جزئیات بیشتری در مورد “سیستم شبکه” سایت و جنبه‌های دیگر در آن خواهید یافت.
• Console: این یک گزارش هشدار ظاهری برای یک سایت است و مکانی است که می‌توانید قطعه‌های کد را برای آزمایش سریع ایده خود وارد کنید.
• Network: در اینجا، درخواست‌های ارسال شده به یک سرور، مانند تمام درخواست‌های POST و GET را خواهید دید.
• Performance: یک سایت باید عملکرد خوبی داشته باشد. به این ترتیب، یک ابزار اختصاصی وجود دارد که به شما کمک می‌کند برخی از معیارهای ضروری سایت را بسنجید. برخی از مرورگرها در اینجا بهتر از سایرین کار می‌کنند.
• Memory: این پنل به شما این امکان را می‌دهد که ببینید یک سایت چگونه از حافظه استفاده می‌کند، و دوباره، برخی از مرورگرها معیارهای گسترده ای را ارائه می‌دهند.
• Application: در این قسمت، می‌توانید طیف وسیعی از اطلاعات را در حافظه پنهان سایت، خدمات پس زمینه و موارد دیگر مشاهده کنید.

پنل‌های ساده‌ای مانند رسانه و پنل‌های پیچیده‌تر مانند JavaScript Profiler برای نمایشگر این ابزار وجود دارد. به طور خلاصه، ابزار Inspect Element قدرت فوق العاده‌ای دارد و باید هر توسعه دهنده وب مرکزی باید در جریان کار این ابزار باشد.

• افزایش محدودیت حافظه PHP وردپرس + افزایش حداکثر حجم آپلود
• آموزش کامل litespeed cache – نمونه تنظیمات مناسب
• افزونه WP Rocket – آموزش اعمال بهترین تنظیمات در افزونه راکت
• Breadcrumbs یا مسیر راهنما در طراحی سایت – نمونه ها و بهترین روش‌های استفاده

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

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

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

خبر خوب این است که یافتن ابزار Inspect Element ساده است. در بیشتر موارد، روی یک صفحه کلیک راست کرده و Inspect یا Inspect Element را انتخاب می‌کنید.

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

البته می‌توانید از نوار ابزار مرورگر یا از طریق میانبر صفحه کلید به Inspect Element نیز دسترسی داشته باشید. مکان دقیق بسته به مرورگر متفاوت خواهد بود. به عنوان مثال، در فایرفاکس، ابزار توسعه دهنده وب را در منوی Tools > Browser Tools خواهید دید. در مقابل، Brave (و سایر مرورگرهای مبتنی بر Chromium) گزینه Developer Tools را در منوی View > Developer دارند.

میانبرهای صفحه‌کلید اغلب مشابه مرورگرهای متقابل هستند: Command + Shift + C (Control + Shift + C برای ویندوز). این میانبر به شما کمک می‌کند تا ابزارهایی را که برای کار با آن‌ها نیاز دارید سریعاً بیاورید.

اگر قبلاً ابزار Inspect Element را باز نکرده‌اید، همانطور که قبلاً ذکر کردیم اغلب در سمت راست منوی شما نمایش داده می‌شود. برای تغییر این مورد، روی منوی چراغ راهنمایی در نوار ابزار Inspect Element کلیک کنید. در اینجا، می‌توانید سمت راست که به اسکله و زیر بنای سایت معروف است را تغییر دهید:

توجه داشته باشید که فایرفاکس به طور پیش‌فرض از نمای «پنجره سه‌گانه» نیز استفاده می‌کند که به شما کمک می‌کند تا حد امکان اطلاعات بیشتری را در ابزار Inspect Element دریافت کنید:

ما روش‌هایی را برای استفاده از ابزار Inspect Element بررسی کرده‌ایم، اما می‌توانیم برای ارائه موارد استفاده فراتر از این پیش برویم.در ادامه این موارد را به طور خلاصه مورد بحث قرار می‌دهیم.

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

از اینجا، می‌توانید روی هر تگی در صفحه قرار بگیرید و آن را در پنجره Inspector/Elements برجسته می‌بینید:

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

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

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

با کلیک بر روی این نماد، سایت شما به شکل ظاهری در دستگاهی که انتخاب کرده‌اید نمایش داده می‌شود:

ما بعداً با جزئیات بیشتری به این موضوع خواهیم پرداخت، اما این روشی بسیار مناسب برای سازگار کردن طرح‌های شما در بین دستگاه‌ها است.

ابزار Inspect Element همچنین می‌تواند به شما در قضاوت در مورد سرعت و عملکرد یک وب سایت از طریق پنل عملکرد کمک کند:

این ویژگی با “ثبت” زمان بارگذاری تگ‌ها و اسکریپت‌های خاص کار می‌کند. مرورگرهای مبتنی بر کروم در ارائه این اطلاعات عملکرد درخشانی دارند. شما صفحه را در حین بارگیری ضبط می‌کنید و سپس نتایج را در قالب جدول زمانی مشاهده می‌کنید.

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

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

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

ما قبلاً در مورد اینکه چگونه ابزار Inspect Element قدرتمندتر از آن چیزی است که در نگاه اول به نظر می رسد صحبت کرده‌ایم. بیایید نگاهی به ترفندها و نکاتی بیندازیم تا از مجموعه ویژگی‌های آن بهترین بهره را ببریم، ابتدا از اصول اولیه شروع می‌کنیم:

• تغییر ویژگی‌ها و حالت‌های تگ‌ها
• جستجو تگ‌ها
• پرایمر سریع در مدل جعبه
• شبیه سازی دستگاه ها با استفاده از Inspect Element
• میانبرهای صفحه کلید هنگام استفاده از ابزار Inspect Element

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

مراحل تغییر ويژگی‌های این ابزار ساده هستند. ابتدا از نماد فلش برای انتخاب تگ انتخابی خود استفاده کنید. یک هایلایت خواهید دید که مؤلفه‌های مختلف با نگه داشتن ماوس روی آن‌ها برجسته می‌شود:

هنگامی که به تگ مورد نظر خود رسیدید، می‌توانید تقریباً در هر جایی که یک برچسب را در پنل Elements مشاهده کردید دوبار کلیک کنید و تغییری را تایپ کنید.

همچنین می‌توانید در این ابزار با CSS مانند HTML کار کنید:

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

همانند تگ‌های HTML، می‎‌توانید مقادیر را تغییر دهید و CSS خود را نیز به آن اضافه کنید:

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

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

حتی می‌توانید URL‌های تصویر را بگیرید و آن‌ها را با دیگران تعویض کنید:

از طریق مکان یابی تگ و تغییر URL منبع تصویر، می‌توانید تصاویر دیگر را نیز امتحان کنید:

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

قبل از اینکه بتوانید یک تگ را تغییر دهید، باید آن را پیدا کنید. ابزار Inspect Element دارای قابلیت جستجوی ساده‌ای است که می‌تواند به شما کمک کند هر جنبه‌ای از یک صفحه وب را پیدا کنید. راه اصلی در مرورگرهای مبتنی بر Chromium این است که به منوی “چراغ راهنمایی” در سمت راست صفحه بروید و گزینه جستجو را انتخاب کنید:

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

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

در اینجا نکته دیگری نیز وجود دارد، شما می‌توانید با کلیک راست در قسمت Elements و انتخاب Expand به صورت بازگشتی، node‌ها و تگ‌های مختلف را گسترش دهید:

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

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

یکی از بهترین راه‌هایی که ابزار Inspect Element می‌تواند به شما کمک کند تا در مورد نحوه عملکرد ویژگی‌های CSS بر روی تگ‌ها بیشتر بدانید، پنل بصری «Box model» است.

این نمای کلی به شما نشان می‌دهد که چگونه یک کادر خاص (مانند “تگ” یا “div”) روی صفحه ظاهر می‌شود. به عبارت دیگر، این یک نمای کلی از نحوه ترکیب حاشیه‌ها، بالشتک‌ها، حاشیه‌ها و محتوا برای تبدیل شدن به بخشی است که روی صفحه می‌بینید.

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

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

هنگام کار با Box model، ممکن است از دیدن سیستم شبکه در حال بازی در صفحه نیز بهره‌مند شوید. برای انجام این کار، نگاهی به پنل Layout بیندازید. گزینه‌های مورد نیاز در زیر منوی Grid قرار دارند:

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

در اکثر مرورگرها، ابزار Inspect Element یک نماد دستگاه تلفن همراه در امتداد نوار ابزار بالایی دارد:

اما در سافاری این گزینه متفاوت است. در عوض، یک کلید Enter/Exit Responsive Design Mode در منوی Develop وجود دارد:

پس از انتخاب این گزینه، صفحه وب به گونه‌ای نمایش داده می‌شود که انگار دارید آن را در دستگاه کوچک‌تری مشاهده می‌کنید:

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

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

در این زمینه بهترین مرورگر فایرفاکس است:

برای کامل کردن این موارد، می‌توانید بازخورد تاچ (لمسی) و تشخیص حسگر را نیز شبیه‌سازی کنید. این پیش‌فرض در مرورگرهای مبتنی بر Chromium به صورت پیش فرض است ولی در فایرفاکس، باید آن را روشن کنید:

ولی فایرفاکس در اینجا عقب مانده است، زیرا Chrome، Brave و سایر مرورگرها، با نماد “نوک انگشتی” این گزینه را نشان می‌دهند. این عملکرد برای هیچ مرورگری عالی نیست، اگر چه روشی قابل اعتماد برای تعیین نحوه عملکرد سایت شما در دستگاه های دیگر است.

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

اغلب میانبرهای صفحه کلید مرورگر در مرورگرها یکسان هستند. این خبر خوبی است اگر بین ابزارهای مختلف برای آزمایش سایت‌های خود حرکت کنید.

در اینجا یک لیست سریع از برخی از محبوب‌ترین و مورد استفاده‌ترین میانبرها آمده است:

Here’s a quick list of some of the most popular (and valuable) shortcuts:

لازم به ذکر است که توسعه وب فقط HTML نبود و علاوه بر آن، فن آوری‌های زیادی نیز موثر هستند. حتی اگر به صورت حرفه‌ای HTML، CSS و جاوا اسکریپت بلد باشید، باز هم باید ببینید که چگونه یک وب سایت همه این مؤلفه‌ها را با هم جمع می‌کند.

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