7 کار جالب که با Inspect Element می توانید انجام دهید - مجله فازنما

ابزار Inspect Element چیست؟

Inspect Element یک افزونه (پلاگین) است که از قبل به صورت پیش فرض به بیشتر مرورگرها اضافه شده که از آن برای تغییرات در کدهای سایت به صورت زنده می توان استفاده کرد. یعنی ما هر بخش از سایت را مد نظر قرار دهیم، می توانیم در آن تغییراتی ایجاد کنیم و در همان لحظه تغییرات اعمال شده قابل مشاهده خواهند بود. مرورگرهای مدرن مانند گوگل کروم یا فایرفاکس ابزاری ساختند که به توسعه دهندگان اجازه می دهد به صورت آنلاین عیب یابی داشته باشند. این ابزار تگ های html و CSS و کدهای javascript و نحوه اجرای کدها را نشان می دهد.

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

1. دانلود عکس و فیلم

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

را توسعه دهید. اکنون می توانید منبع فایل را به وسیله صفت src مشاهده کنید. لینک منبع را کپی نموده و در یک صفحه نو باز کنید. سپس روی فایل مربوطه راست کلیک نموده و با استفاده از گزینه Save As آن را دانلود کنید.

2. دوستانتان را با تغییر تیتر و متن محتوای وب سایت ها سرکار بگذارید

به جای ساختن تصاویر فیک و جعلی می توانید از ابراز DevTools برای تغییر متن روی صفحه وب و شوخی با دوستانتان بهره ببرید. برای ساخت یک وب سایت جعلی، ابتدا در وب سایت اصلی مد نظر راست کلیک نموده و گزینه Inspect را انتخاب کنید. در پنجره باز شده روی More کلیک نموده و Edit as HTML را انتخاب کنید. سپس تیتر مد نظر خود را با عنوان اصلی جایگزین کنید. بعلاوه شما به همین ترتیب قادر خواهید بود تا تاریخ و نام نویسنده را هم تغییر دهید. برای تغییر تصویر، تصویر اصلی را طبق همان مراحل حذف نموده و تصویر مد نظر خود از گوگل پیدا کنید، آدرس تصویر را کپی نموده و جایگزین آدرس قبلی کنید. به این ترتیب می توانید بدون دردسر زیادی دوستان خود را سرکار بگذارید. با این حال از اسکرین شات به جای فرستادن لینک وب سایت برای دوستانتان بهره ببرید زیرا این تغییرات موقتی خواهند بود و با رفرش صفحه دوباره به حالت قبل باز می شود.

3. فونت و رنگ های صفحه ی وب را تغییر دهید

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

4. پسوردهای مخفی شده را مشاهده کنید

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

5. نسخه موبایل یک وب سایت را مشاهده کنید

همه ما نحوه تغییر نسخه موبایلی یک وب سایت به نسخه دسکتاپ را می دانیم. اما مطمئنا نمی دانستید که با استفاده از ابزار Inspect Element می توانید نسخه موبایلی یک وب سایت را بر روی دسکتاپ مشاهده کنید. برای انجام این کار، DevTools را باز نموده و روی دکمه Toggle Device Toolbar کلیک کنید (دکمه دوم از بالا سمت راست). به همین شکل شما قادر خواهید بود تا با تغییر یورز ایجنت نسخه های مختلف وب سایت را مشاهده کنید. روی نماد More در گوشه بالا سمت چپ کلیک کنید و شرایط شبکه را انتخاب کنید. تیک Use Default Browser را در قسمت User Agent بردارید و یورز ایجنت دیگری را از منوی آن انتخاب کنید.

6. رنگ ها را از وب سایت دیگری بردارید

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

7. بدون استفاده از افزونه ها از صفحه وب اسکرین شات بگیرید

DevTools بعلاوه به شما امکان می دهد تا اسکرین شات های با کیفیتی بگیرید. برای انجام این کار، DevTools را باز کنید، روی نماد More کلیک نموده و Run a Command را انتخاب کنید. در کادر جست وجو، Screenshots را تایپ کنید. با این کار چهار نحوه مختلف گرفتن اسکرین شات را مشاهده خواهید کرد. با انتخاب ناحیه گرفتن اسکرین شات، می توانید از هر قسمت خاصی از وب سایت که مد نظرتان است اسکرین شات گرفته و آن را به عنوان یک فایل PNG ذخیره کنید. گرفتن اسکرین شات با میزان کامل، یک تصویر از کل صفحه وب را ذخیره خواهد نمود که شاید جزئیات به شکل واضحی در آن نشان داده نشود.

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

منبع: Makeuseof