HTML و CSS هر صفحه وب را مشاهده کنید
وب سایت با خطوط کد ساخته شده است ، اما نتیجه صفحات خاصی با تصاویر، ویدئو، فونت و موارد دیگر است. برای تغییر یکی از آن عناصر یا دیدن آنچه که از آن تشکیل شده است، شما باید خط خاصی از کد را که آن را کنترل می کند پیدا کنید. شما می توانید با ابزار بازرسی عنصر انجام دهید.
اکثر مرورگرهای وب، ابزار بازرسی را دانلود نمیکنند یا افزودنی را نصب نمیکنند. در عوض، آنها به شما اجازه می دهند که بر روی عنصر صفحه راست کلیک کرده و Check Inspection Element را انتخاب کنید. با این حال، این فرآیند ممکن است در مرورگر شما کمی متفاوت باشد.
بازرسی عناصر در Chrome
جدیدترین نسخه های گوگل کروم به شما اجازه می دهد تا چندین راه را بررسی کرده و همه آنها از DevTools ساخته شده اند.
- راست کلیک بر روی چیزی در صفحه (یا یک منطقه خالی) و Inspect را انتخاب کنید
- کلید میانبر Ctrl + Shift + I را وارد کنید
- از منوی Chrome برای دسترسی به گزینه Tools More Tools> Developer tools استفاده کنید
DevTools Chrome به شما اجازه می دهد تا مواردی مانند کپی کردن یا ویرایش خطوط HTML یا عناصر پنهان یا حذف آنها را تمام کنید (تا زمانی که صفحه دوباره بارگیری شود).
هنگامی که DevTools در کنار صفحه باز می شود، می توانید موقعیت جغرافیایی خود را تغییر دهید، آن را خارج از صفحه تغییر دهید، تمام فایل های صفحه را جستجو کنید، عناصر را از صفحه برای بررسی خاص انتخاب کنید، فایل های کپی و URL ها را انتخاب کنید، و حتی یک دسته را سفارشی کنید از تنظیمات
بازرسی عناصر در فایرفاکس
مانند کروم، فایرفاکس چند راه مختلف برای باز کردن ابزار خود به نام Inspector دارد:
- روی یک منطقه خالی در صفحه کلیک راست کرده یا عنصر را انتخاب کنید و Inspect Element را انتخاب کنید
- Ctrl + Shift + T یا Ctrl + Shift + I را با صفحه کلید وارد کنید
- از منوی فایرفاکس، روی Developer > Inspector کلیک کنید
- از منوی Tools بر روی Web Developer> Inspector کلیک کنید
همانطور که ماوس خود را بر عناصر مختلف در فایرفاکس حرکت می دهید، ابزار بازرس به طور خودکار اطلاعات کد منبع عنصر را پیدا می کند. یک عنصر را کلیک کنید و جستجو "در پرواز" متوقف خواهد شد و شما می توانید عنصر را از پنجره Inspector بررسی کنید.
بر روی یک عنصر راست کلیک کنید تا همه کنترلهای پشتیبانی شده را پیدا کنید. شما می توانید چیزهایی مانند ویرایش صفحه به عنوان HTML، کپی یا کد HTML داخل یا بیرونی، نشان دادن خواص DOM، تصویر و یا حذف گره، به راحتی ویژگی های جدید، مشاهده تمام CSS صفحه و بیشتر انجام دهید.
بازرسی عناصر در اپرا
اپرا می تواند عناصر را نیز بررسی کند، با این ابزار DOM Inspector است که به Chrome مشابه است. در اینجا چگونگی دستیابی به آن:
- از میانبر صفحه کلید Ctrl + Shift + I استفاده کنید
- به منو> ابزارهای بیشتر> نمایش منوی برنامهنویس بروید و سپس منو را از طریق منو> برنامهنویسان> ابزارهای برنامهنویسی باز کنید
- از منوی راست کلیک بر روی هر عنصر در صفحه، عنصر بازرسی را انتخاب کنید
بازرسی عناصر در اینترنت اکسپلورر
یک ابزار عنصر بررسی عنصر، به نام ابزار برنامه نویس، در اینترنت اکسپلورر در دسترس است:
- F12 را روی صفحه کلید فشار دهید
- از ابزار Tools> F12 Developer Menu استفاده کنید (اگر منوی Tools را نمی بینید، با Alt + X ضربه بزنید)
- راست کلیک بر روی صفحه و کلیک بر روی بازرسی عنصر
IE دارای ابزار Element Element در این منوی جدید است که به شما اجازه می دهد بر روی هر عنصر صفحه کلیک کنید تا جزئیات HTML و CSS آن را مشاهده کنید. شما همچنین می توانید به راحتی غیر فعال کردن / روشن برجسته عنصر در حالی که شما در حال مرور از تب DOM اکسپلورر .
اینترنت اکسپلورر مانند سایر ابزارهای بازرسی عناصر در مرورگرهای فوق، به شما اجازه می دهد که عناصر را برش، کپی و قرار داده و همچنین ویرایش HTML، اضافه کردن ویژگی ها، کپی کردن عناصر با سبک های متصل و موارد دیگر.