برای کسی که با کدنویسی آشنا نیست، باز کردن تصادفیِ گزینه “Inspect Element” می‌تواند ترسناک باشد. با این حال، اگر پس از مشاهده کدهای پیچیده، آرامش خود را حفظ نمایید، ترفندهای Inspect Element به شما امکان انجام کارهای مفید (و برخی کارهای نه چندان مفید) را می دهد، به شرطی که بدانید چگونه از آن استفاده کنید.
در این مقاله به ۷ کار سرگرم‌کننده ای که می توانید توسط developer tools (ابزارهای توسعه دهنده) مرورگر و ترفندهای Inspect Element انجام دهید، پرداخته شده است.
ابزار Inspect Element چیست؟
ابزار Inspect Element یک ابزار توسعه دهنده است که توسط مرورگرها ارائه می شود تا بتوانید کد منبع هر صفحه وب را مشاهده و به طور موقت تغییر دهید. با استفاده از این ابزار، توسعه دهندگان و طراحان می توانند بخش ظاهری هر وب سایتی را بررسی و تغییر ایجاد کنند.
هنگامی که کد را تغییر می دهید، مرورگر صفحه وب را به صورت لحظه ای بروزرسانی می کند. این تغییرات فقط تا زمانی که در همان سشن حضور دارید باقی می مانند و فقط برای شما روی همان دستگاه قابل مشاهده هستند. به محض ترک صفحه، تمام تغییرات حذف خواهند شد.
۷ مورد از ترفندهای Inspect Element
در ادامه به ۷ مورد از ترفندهای جالب و کاربردی این ابزار اشاره خواهیم کرد که آشنایی با آنها می‌تواند تجربه‌ی شما از کار با مرورگر را هم‌زمان آموزنده و سرگرم‌کننده‌تر کند.
۱. دانلود تصاویر و ویدیوها
تصویر(۱)
معمولاً می‌توانید تصاویر را از وب با راست کلیک روی آنها دانلود کنید اما در برخی وب سایت ها چنین امکانی وجود ندارد. در این حالت، ترفندهای inspect element مرورگر به کار می آید.
برای دانلود هر فایل رسانه ای، روی آن راست کلیک کرده و گزینه Inspect را انتخاب کنید. تگ های <div> را باز نمایید. حالا می توانید منبع فایل را از طریق ویژگی src مشاهده کنید. لینک منبع را کپی کرده و در یک تب جدید باز نمایید. سپس روی فایل رسانه ای راست کلیک نموده و با استفاده از گزینه “Save As” آن را دانلود کنید.
۲. تغییر تیترها و متن ها برای شوخی با دوستان
تصویر(۲)
یکی از ترفندهای Inspect Element، امکان اعمال تغییرات در ظاهر سایت است. به جای ساختن یک تصویر جعلی از ابتدا، می توانید DevTools را برای تغییر متن روی صفحه وب و شوخی با دوستانتان استفاده کنید.
برای ایجاد صفحه جعلی، یک وب سایت معتبر را باز کرده و روی عنوان آن راست‌کلیک کنید. سپس، روی Inspect کلیک نمایید تا پنل باز شود. روی کد کلیک راست کرده و گزینه “Edit as HTML” را انتخاب نمایید. سپس عنوان را با تیتر جعلی خود جایگزین کنید.
به طور مشابه، می توانید سایر بخش های متن مانند خلاصه، تاریخ و نام نویسنده را تغییر دهید. برای تغییر تصویر، منبع آن را حذف کنید. سپس تصویری مرتبط از گوگل پیدا کرده، آدرس تصویر را کپی و در قسمت src جایگذاری نمایید. به این روش، می توانید بدون دردسر با دوستان خود شوخی کنید. با این حال، حتماً اسکرین شات را بدون نمایش پنل DevTools ارسال نمایید، نه لینک صفحه زیرا این تغییرات موقتی هستند.
۳. تغییر رنگ ها و فونت یک صفحه وب
تصویر(۳)
یکی دیگر از ترفندهای inspect element مرورگر، تغییر رنگ‌ها و فونت های هر صفحه وب است. روی عنصری که می خواهید رنگ آن را تغییر دهید، راست کلیک کرده و گزینه Inspect را انتخاب کنید. سپس در تب Styles، مقدار ویژگی color یا background-color را تغییر دهید و کد رنگ دلخواه را وارد نمایید.
به همین ترتیب، می توانید اندازه و سبک فونت را از طریق تب Styles تغییر دهید.
می‌توانید از این ترفند برای تغییر ظاهر هر وب سایت و خواناتر کردن آن استفاده کنید. به عنوان مثال، می توانید نسخه ای با حالت تاریک (Dark Mode) از هر وب سایت ایجاد نمایید، اندازه فونت را برای خوانایی بیشتر افزایش دهید و عناصر مزاحم را از صفحه حذف کنید.
۴. نمایش رمز عبور مخفی شده با ابزار Inspect Element
تصویر(۴)
اگر وب سایتی رمز عبور شما را با علامت ستاره (****) پنهان کرده باشد، می توانید با تغییر کد صفحه، آن را مشاهده کنید.
برای این کار، روی رمز عبور مخفی‌شده راست‌کلیک کرده و گزینه Inspect را انتخاب کنید تا DevTools باز شود. سپس درون تگ input، مقدار type را از password به text تغییر دهید و روی صفحه خالی کلیک کنید. اکنون رمز عبور شما قابل مشاهده خواهد بود. این ترفند زمانی مفید است که رمز عبور خود را فراموش نموده اید اما آن را در یک ابزار مدیریت رمز عبور، ذخیره کرده باشید. بدین ترتیب، می توانید رمز عبور خود را مستقیماً در صفحه مشاهده و به خاطر بسپارید.
۵. مشاهده نسخه موبایل یک وب سایت
تصویر(۵)
با استفاده از inspect element مرورگر می توانید نسخه موبایل یک وب سایت را روی دسکتاپ مشاهده نمایید. برای این کار، DevTools را باز کرده و روی دکمه Toggle Device Toolbar (دومین دکمه از سمت چپ بالا) کلیک کنید.
به همین ترتیب، می‌توانید User Agent را تغییر داده و نسخه های مختلف سایت را مشاهده کنید. درون ابزار توسعه دهنده، روی آیکون سه نقطه در گوشه بالا سمت چپ کلیک کرده و از بخش More tools گزینه Network Conditions را انتخاب کنید. سپس تیک گزینه Use Browser Default را در بخش User Agent بردارید و از منوی کشویی، مرورگر دیگری را انتخاب نمایید.
۶. انتخاب رنگ از یک وب سایت با ابزار Inspect Element
تصویر(۶)
به جای نصب افزونه های انتخاب رنگ، اکنون می توانید با استفاده از inspect element مرورگر رنگ های دلخواه خود را مستقیماً از یک صفحه وب دریافت کنید. برای این کار، به inspect element مرورگر بروید، سپس به تب Styles رفته و ویژگی color یا background را پیدا کنید. سپس روی جعبه کوچک کنار مقدار رنگ کلیک نمایید تا ابزار انتخاب رنگ باز شود.
اکنون می توانید روی هر نقطه از صفحه کلیک کرده و کد رنگ Hex را از تب Styles کپی نمایید. اگر به کد RGB یا HSLA نیاز دارید، می‌توانید با استفاده از دکمه‌های Arrow آنها را مشاهده کنید. بنابراین، هر زمان که رنگ زیبایی را در یک وب سایت مشاهده نمودید و خواستید آن را در آینده به کار ببرید، کافی است از ابزار Inspect Element استفاده کرده و کد رنگ را ذخیره کنید.
۷. تهیه اسکرین شات بدون نیاز به افزونه
تصویر(۷)
یکی از ترفندهای inspect element، تهیه اسکرین شات می باشد. DevTools به شما این امکان را می‌دهد که بدون استفاده از افزونه های اضافی، اسکرین شات های واضح و تمیز تهیه نمایید.
برای تهیه اسکرین شات، ابتدا DevTools را باز کنید، سپس روی آیکون سه نقطه کلیک کرده و گزینه Run Command را انتخاب نمایید. در کادر جستجو، کلمه screenshot را تایپ کنید. در اینجا چهار گزینه مختلف برای گرفتن اسکرین‌شات مشاهده خواهید کرد:
-
Area Screenshot: به شما امکان می دهد ناحیه ای خاص از صفحه را انتخاب کنید و مرورگر آن را به عنوان یک فایل PNG ذخیره می‌کند.
-
Full-Size Screenshot: تصویری از کل صفحه وب، شامل بخش هایی که روی صفحه نمایش داده نمی شوند، ذخیره می کند.
-
Node Screenshot: فقط از یک عنصر خاص در صفحه عکس می گیرد.
-
Capture Screenshot: تصویری از تمام محتوای قابل مشاهده روی صفحه تهیه می کند.
جمع بندی: یادگیری ترفندهای inspect element
موارد ذکر شده، تنها بخشی از ترفندهای inspect element بودند. ابزار DevTools امکانات بسیار بیشتری دارد که می تواند برای کاربران حرفه ای بسیار مفید باشد. پس اگر می خواهید کاربر حرفه ای تری شوید و دوستان خود را تحت تأثیر قرار دهید، یادگیری ویژگی های پیشرفته تر DevTools ایده خوبی خواهد بود.