بررسی عناصر وب یکی از مهارتهای کاربردی برای طراحان، برنامهنویسان و حتی کاربران کنجکاوی است که میخواهند بدانند یک وبسایت دقیقاً چگونه ساخته شده است. این قابلیت به شما کمک میکند کدهای HTML، استایلهای CSS و حتی اسکریپتهای جاوااسکریپت صفحات را مشاهده و تحلیل کنید. در مک، مرورگرهای محبوبی مثل Safari و Google Chrome ابزارهای قدرتمندی برای این کار در اختیار شما قرار میدهند. با فعالسازی این ابزارها میتوانید ساختار صفحات را بهتر درک کرده و تغییرات دلخواه را بهصورت آزمایشی اعمال کنید. در این مقاله از سلام دنیا به آموزش بررسی عناصر وب در مک و روش استفاده از Inspect Element در Safari و Chrome پرداختهایم.
چگونه از قابلیت Inspect Element در مک استفاده کنیم؟
قبل از اینکه بتوانید عناصر وب را در Safari بررسی کنید، لازم است منوی توسعهدهنده (Developer Menu) را در مرورگر فعال کنید. در ادامه، نحوه فعالسازی و استفاده از Inspect Element را بررسی میکنیم.
- نکته: اگر در نوار بالای مرورگر بین Bookmarks و Window گزینه Develop را میبینید، منوی توسعهدهنده فعال است و میتوانید مستقیماً به مرحله 4 بروید.
1. استفاده از Inspect Element در Safari
برای استفاده از Inspect Element در Safari، مرورگر پیشفرض مک، مراحل زیر را دنبال کنید:
حتما بخوانید: چرا مک بوک برای کاربران حرفهای مناسب است؟
- در Safari مسیر Safari > Settings را باز کنید.
- به بخش Advanced بروید.
- گزینه Show features for web developers را علامت بزنید و سپس پنجره را ببندید.
- هنگام مرور یک وبسایت، روی آیتمی که میخواهید بررسی کنید راستکلیک کنید.
- گزینه Inspect Element را انتخاب کنید.
- اکنون میتوانید کد پشت وبسایتی که بررسی کردهاید را مشاهده کنید.
2. استفاده از قابلیت Inspect Element در Chrome روی مک
اگر به جای Safari از Chrome استفاده میکنید، کار حتی سادهتر است زیرا نیازی به فعالسازی ویژگی نیست. مراحل کار به این صورت است:
حتما بخوانید: برگرداندن تنظیمات کارخانه مک بوک
- در Chrome، به یک وبسایت بروید.
- روی عنصری که میخواهید بررسی کنید راستکلیک کنید.
- گزینه Inspect را انتخاب کنید.
- به این ترتیب میتوانید کد و ساختار عناصر وبسایت را به راحتی مشاهده و تحلیل کنید.
چرا نمیتوانم روی مک Inspect کنم؟
ممکن است نتوانید یک عنصر را روی مک خود بررسی کنید اگر منوی Developer در Safari فعال نباشد. برای فعالسازی، در منوی Safari به مسیر Settings > Advanced بروید و تیک گزینه Show features for web developers را بزنید.
چگونه با Inspect Element تغییرات وبسایت ایجاد کنیم؟
علاوه بر مشاهده کد یک وبسایت، میتوانید بهصورت موقت هر عنصر وبسایت را از طریق Inspect Element تغییر دهید. مراحل انجام این کار در Safari به شرح زیر است:
- روی Inspect Element کلیک کنید.
- روی متن موجود در کد دو بار کلیک کنید تا قابل ویرایش شود.
- متن را پاک کرده یا متن جدیدی وارد کنید و سپس Enter را بزنید.
- اکنون کد بهصورت موقت فقط برای شما تغییر کرده است.
نکته: این روش تقریباً در سایر مرورگرها نیز مشابه است و به شما امکان میدهد ساختار و محتوای وبسایت را بهصورت آزمایشی تغییر دهید.
چرا باید از قابلیت Inspect Element استفاده کنیم؟
امکان بررسی عناصر (Inspect Element) به دلایل زیادی مفید و کاربردی است:
- تغییر آنی کد: طراحان وب میتوانند بهصورت موقت بخشهایی از یک وبسایت را تغییر دهند تا ببینند این تغییرات چه تأثیری روی ظاهر یا عملکرد سایت میگذارد.
- بررسی کد: هم طراحان و هم افراد حوزه بازاریابی میتوانند کد سایت را بررسی کنند تا مطمئن شوند مواردی مثل اطلاعات Google Analytics بهدرستی در سایت قرار گرفتهاند.
- مشاهده جداگانه تصاویر: اگر سایتی اجازه ندهد یک تصویر را در تب یا پنجره جدید باز کنید، با Inspect Element میتوانید به تصویر دسترسی داشته باشید و آن را جداگانه ببینید.
- کنجکاوی و یادگیری (دستکاری دوستانه!): دیدن کد یک صفحه وب کمک میکند بهتر بفهمید آنچه میبینید چگونه ساخته شده و چرا سایت به این شکل عمل میکند. این کار شبیه باز کردن یک وسیله برای دیدن نحوه کار آن است، با این تفاوت که اینجا خبری از پیچ های گم شده نیست!
سوالات متداول
1. آیا Inspect کردن یک وبسایت قانونی است؟
بله. اما اگر قصد دارید از کدها یا فایلهای یک وبسایت استفاده کنید، حتماً با صاحب سایت هماهنگ کنید و به حق کپیرایت اشاره نمایید.
2. چگونه با Inspect Element کد HTML یک وبسایت را کپی کنم؟
در Chrome، روی صفحه راستکلیک کرده و گزینه Inspect را انتخاب کنید. سپس در بخش بالایی، روی تگ(مثلاً <!doctype html>) راستکلیک کنید و مسیر Copy > Copy outerHTML را انتخاب کنید. بعد میتوانید کد را در یک فایل متنی یا HTML پیست کنید.
3. آیا میتوان CSS یک وبسایت را با Inspect Element کپی کرد؟
بله. روی عنصری که میخواهید کپی کنید راستکلیک کرده و Inspect را بزنید. سپس روی کد هایلایتشده راستکلیک کرده و Copy > Copy styles را انتخاب کنید.
4. چگونه با Inspect Element رمزهای عبور ذخیرهشده را ببینم؟
برای نمایش رمزهای عبور مخفی، روی کادر وارد کردن رمز عبور راستکلیک کرده و Inspect را انتخاب کنید. در بخش هایلایتشده به دنبال type="password" بگردید و کلمه password را به text تغییر دهید. البته روشهای سادهتری هم برای مشاهده همه رمزهای ذخیرهشده در Chrome وجود دارد.
سخن آخر
قابلیت Inspect Element یک ابزار قدرتمند و در عین حال ساده است که به شما کمک میکند دنیای پشت پرده وبسایتها را بهتر بشناسید. با استفاده از آن میتوانید کدها را بررسی کنید، تغییرات موقتی ایجاد کنید و درک عمیقتری از ساختار صفحات وب به دست آورید. چه برای یادگیری، چه برای طراحی و چه برای کنجکاوی، این ابزار میتواند تجربه شما از وب را حرفهایتر کند. کافی است کمی با آن تمرین کنید تا به یکی از کاربردیترین امکانات مرورگر خود تبدیل شود.
مطالب مرتبط:
آموزش ساخت فلش بوتیبل مک macOS در ویندوز 10 و 11
بازگرداندن و بازیابی اطلاعات مک (Mac) پس از ریست فکتوری و حالت کارخانه
دیدگاه ها