نحوه استفاده از Inspect Element

پیوندهای دستگاه

• اندروید
• Chromebook
• مک
• پنجره ها
• دستگاه گم شده است؟

اکثر مردم نمی دانند که گنجینه ای از ابزارهای توسعه دهنده در اختیار آنها وجود دارد و در مرورگر مورد علاقه آنها پنهان است.

هر مرورگر وب ابزارهای توسعه دهنده ای را برای بررسی کدنویسی یک وب سایت ارائه می دهد. با این حال، برای کاربران عادی اینترنت یک نهاد خارجی است. پس از همه، چه کسی می خواهد به کدنویسی یک وب سایت نگاه کند، درست است؟

همانطور که مشخص است، چیزهای زیادی وجود دارد که می توانید با مشاهده کدنویسی یک وب سایت یاد بگیرید. برای اطلاع از اینکه ویژگی inspect element چیست و چگونه از آن استفاده کنید، ادامه مطلب را بخوانید.

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

استفاده از Inspect Element در گوگل کروم

1. وب سایتی را که می خواهید بررسی کنید باز کنید.
   
2. در هر نقطه از صفحه کلیک راست کرده و Inspect را انتخاب کنید .
   
   یا
3. روی سه نقطه عمودی در گوشه سمت راست نوار ابزار خود کلیک کنید.
   
4. به ابزار بیشتر بروید .
   
5. ابزار Developer Tools را انتخاب کنید .
   
   یا
6. کلید میانبر صفحه کلید F12 را در رایانه شخصی (یا CMD + Options + I در Mac) فشار دهید .
   

استفاده از Inspect Element در Microsoft Edge

1. یک وب سایت باز کنید
   
2. روی سه نقطه عمودی در گوشه سمت راست بالای نوار ابزار مرورگر کلیک کنید.
   
3. به پایین اسکرول کنید و روی More Tools کلیک کنید .
   
4. روی Developer Tools کلیک کنید .
   
   یا
5. در هر نقطه از وب سایت کلیک راست کرده و بر روی Inspect کلیک کنید .
   
   یا
6. Ctrl + Shift + I را فشار دهید .
   

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

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

پانل به صورت پیش فرض در پایین صفحه باز می شود، اما همیشه می توانید نحوه نمایش آن را تغییر دهید. این مراحل ساده را برای تغییر موقعیت پانل Developer Tools دنبال کنید:

1. بر روی سه نقطه افقی در گوشه بالای پانل Developer Tools کلیک کنید.
   
2. یک سمت داک (چپ، پایین یا راست) را انتخاب کنید یا به پنجره جداگانه باز کنید.
   

نگه داشتن مکان نما در کنار لبه قاب پانل Developer Tools و کشیدن آن، فضای کاری را باریک یا بزرگ می کند. برای مثال، اگر می‌خواهید پانل را در سمت راست پنجره مرورگر قرار دهید، روی حاشیه سمت چپ ماوس را نگه دارید. وقتی نشانگر فلش را می بینید می توانید پانل را بکشید تا اندازه آن را تغییر دهید.

استفاده از Inspect Element (ویژه سیستم عامل)

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

نحوه استفاده از Inspect Element در Chromebook

مرورگر پیش‌فرض در Chromebook Google است، بنابراین دستورالعمل‌های مرورگر Chrome را برای دسترسی به Inspect Element دنبال کنید . در اینجا یک دوره آموزشی کوچک برای شما وجود دارد:

1. یک وب سایت باز کنید
   
2. روی سه نقطه عمودی در گوشه سمت راست بالای نوار ابزار کلیک کنید.
   
3. ابزارهای بیشتر را انتخاب کنید .
   
4. روی Developer Tools کلیک کنید .
   

همچنین می‌توانید از روش کلیک راست یا کلید تابع F12 استفاده کنید تا سریع‌تر به ابزارهای برنامه‌نویس برسید.

نحوه استفاده از Inspect Element در دستگاه Android

اجرای Inspect Element در دستگاه اندروید کمی متفاوت است. نحوه دسترسی به پنل Inspect Element در اندروید را بررسی کنید:

1. کلید عملکرد F12 را فشار دهید .
   
2. Toggle Device Bar را انتخاب کنید .
   
3. دستگاه اندروید را از منوی کشویی انتخاب کنید.
   

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

این روش برای هر دو مرورگر کروم و فایرفاکس کار می کند زیرا آنها یک ویژگی در Developer Tools خود به نام Device Simulation دارند.

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

نحوه استفاده از Inspect Element در ویندوز

ابزار Inspect Element لزوماً مختص سیستم عامل نیست، اما مختص مرورگر است. این بدان معناست که Developer Tools یکی از ویژگی های مرورگری است که استفاده می کنید و لزوماً ویندوز نیست. با این حال، بدون توجه به اینکه کدام مرورگر را ترجیح می دهید، می توانید به پنل Inspect Element بروید.

اگر از سیستم عامل ویندوز استفاده می کنید، احتمالاً از مرورگر مایکروسافت اج نیز استفاده می کنید. نحوه دسترسی به Inspect Element در MS Edge را بررسی کنید:

1. وب سایتی را که می خواهید بررسی کنید باز کنید.
   
2. روی سه نقطه عمودی در گوشه پنجره مرورگر ضربه بزنید.
   
3. به پایین بروید و More Tools را انتخاب کنید .
   
4. روی Developer Tools کلیک کنید .
   

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

نحوه استفاده از Inspect Element در مک

اگر از مک استفاده می کنید، مرورگر انتخابی شما احتمالا سافاری است. باز کردن Inspect Elements در Safari کمی متفاوت از Chrome و Firefox است. اما با این مراحل به همین سادگی است:

1. مرورگر سافاری را باز کنید.
   
2. روی Safari در تب هدر کلیک کنید و از منوی کشویی گزینه Preferences را انتخاب کنید.
   
3. روی نماد چرخ دنده پیشرفته واقع در بالای صفحه کلیک کنید.
   
4. کادری که می‌گوید Show Develop menu در نوار منو را علامت بزنید .
   

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

پس از اتمام این مرحله، به سادگی بر روی هر صفحه وب باز شده راست کلیک کرده و Inspect را انتخاب کنید. همچنین می توانید از دستور کلیدهای سریع استفاده کنید: CMD + Option + I (بازرسی).

نحوه استفاده از Inspect Element در iOS

آیا می خواهید از ویژگی Inspect Elements برای مشاهده نحوه نمایش نسخه موبایلی یک صفحه وب در آیفون استفاده کنید؟ شما می توانید این کار و موارد دیگر را تنها با چند مرحله ساده انجام دهید. اما قبل از اینکه به یک عنصر نگاه کنید، باید Web Inspector را برای دستگاه iOS خود فعال کنید:

1. به تنظیمات بروید .
   
2. اکنون Safari را انتخاب کنید .
   
3. به پایین بروید و روی منوی پیشرفته ضربه بزنید .
   
4. اکنون، روی کلید جابجایی ضربه بزنید تا Web Inspector روشن شود .
   

همچنین، با دنبال کردن مراحل در بخش بالا، مطمئن شوید که منوی توسعه در مک شما فعال است.

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

با این حال، به خاطر داشته باشید که این دستورالعمل‌ها فقط برای Safari دارای Mac کار می‌کنند، نه Safari در ویندوز.

نحوه استفاده از Inspect Element هنگامی که مسدود است

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

روش 1 - جاوا اسکریپت را خاموش کنید

1. به تنظیمات بروید .
   
2. جاوا اسکریپت را جستجو کنید .
   
3. جاوا اسکریپت را خاموش کنید
   

روش 2 - دسترسی به ابزارهای توسعه دهنده از راه طولانی

به جای کلیک راست بر روی ماوس برای Inspect، این کار را انجام دهید:

1. در مرورگر خود به تنظیمات بروید .
   
2. ابزارهای بیشتر را انتخاب کنید .
   
3. به پایین بروید و روی ابزار Developer کلیک کنید .
   

روش 3 - استفاده از کلید تابع

همچنین می توانید از کلید تابع F12 در صفحات وب استفاده کنید که کلیک راست را برای Inspect مسدود می کنند.

ممکن است مجبور شوید همه این روش ها را امتحان کنید قبل از اینکه به یکی از روش هایی که برای شما مفید است برخورد کنید. به عنوان آخرین راه حل، می‌توانید کد منبع را با تایپ کردن در view-source: [url کامل را وارد کنید] مشاهده کنید .

نحوه استفاده از Inspect Element در Chromebook مدرسه

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

1. روی صفحه وب کلیک راست کرده یا با دو انگشت ضربه بزنید و Inspect را انتخاب کنید .
   
2. Ctrl + Shift + I را فشار دهید .
   
3. سعی کنید و از روش view-source:[url] استفاده کنید، مانند view-source:https://www.wikipedia.com .
   
   

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

نحوه استفاده از Inspect Element برای یافتن پاسخ

می‌توانید از Inspect Element برای یافتن پاسخ برای موارد مختلفی مانند:

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

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

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

سوالات متداول اضافی

اگر پس از خواندن بالا در Inspect Element متخصص نیستید، پاسخ‌های بیشتری در اینجا وجود دارد.

چگونه می توانم از دستور Inspect Element برای یافتن پاسخ ها استفاده کنم؟

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

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

آیا Inspect Element غیرقانونی است؟

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

آیا امکان غیرفعال کردن Inspect Element در مرورگر وجود دارد؟

جواب کوتاه، نه است.

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

با درون یک صفحه وب آشنا شوید

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

از Inspect Element برای چه چیزی استفاده می کنید؟ در مورد آن در بخش نظرات زیر به ما بگویید.