برای فردی که با کدنویسی آشنا نیست و تا به حال از ابزار Inspect Element استفاده نکرده، دیدن این همه کدهای پیچیده در یک صفحه کمی عجیب به نظر می‌رسد. اما اگر جزء آن دسته از افرادی هستید که سابقه‌ی کار با این ابزار را داشته‌اید، احتمالا می‌دانید که با ابزار Inspect Element میتوانید یک سری کارهای مفید (و گاهی اوقات نه چندان مفید) را انجام دهید، به شرطی که نحوه‌ی انجام این کار‌ها را بلد باشید. در این مقاله ما ۷ کار جالب و سرگرم‌کننده که میتوانید با استفاده از ابزارهای توسعه‌دهنده مرورگر ( DevTools) و Inspect Element انجام دهید، به شما معرفی خواهیم کرد. با سید علی ابراهیمی برای هک دیگران با Inspect Element همراه باشید .
آیا گوگل جاسوس است و ما را هک کرده ؟
ابزار Inspect Element چیست؟
Inspect Element یک افزونه (پلاگین) است که از قبل به صورت پیش‌فرض به اکثر مرورگرها اضافه شده که از آن برای تغییرات در کدهای سایت به صورت زنده می‌توان استفاده کرد. یعنی ما هر بخش از سایت را مد نظر قرار دهیم، می‌توانیم در آن تغییراتی ایجاد کنیم و در همان لحظه تغییرات اعمال شده قابل مشاهده خواهند بود. مرورگرهای مدرن مانند گوگل کروم یا فایرفاکس ابزاری ساختند که به توسعه‌دهندگان اجازه میدهد به‌صورت آنلاین عیب‌یابی داشته باشند. این ابزار تگ‌های html و CSS و کدهای javascript و نحوه‌ی اجرای کدها را نشان میدهد.
هک دیگران با ابزار Inspect Element
با استفاده از Inspect Element شما میتوانید کدهای html و css و javascript را برای هر صفحه‌ی وب‌سایتی ویرایش کنید تا به‌صورت زنده تغییرات را مشاهده کنید. البته باید به این نکته اشاره کرد که تنها روی کامپیوتر و مرورگر شما این تغییرات قابل مشاهده خواهند بود. برای صاحبان وب‌سایت‌ها، این ابزار میتواند کمکی در جهت پیش‌نمایش طراحی‌ها بدون اینکه شخص دیگری به جز شما آن تغییرات را مشاهده کند باشد. این ابزار از جهت دیگری هم جذاب است، زیرا میتوانید عناصر صفحه را برای گرفتن اسکرین‌شات مطابق با سلیقه دلخواه خود تغییر دهید. برای نیروهای پشتیبانی، زمانی که یکی از عناصر صفحه مانند گالری یا اسلایدر به‌درستی کار نمیکند، این ابزار یک راه مناسب برای برای شناسایی خطا خواهد بود. شایان ذکر است که تغییراتی که به‌وسیله‌ی ابزار Inspect Element در مرورگر شما ایجاد میشود، فقط در سیستم شما اتفاق می‌افتد و در کدهای سایت ذخیره نخواهد شد. بنابراین با یک رفرش ساده این تغییرات دوباره به حالت اول بر می‌گردد.
دوستانتان را با تغییر تیتر و متن محتوای وب‌سایت‌ها سرکار بگذارید
به جای ساختن تصاویر فیک و جعلی میتوانید از ابراز DevTools برای تغییر متن روی صفحه‌ی وب و شوخی با دوستانتان استفاده کنید. برای ساخت یک وبسایت جعلی، ابتدا در وبسایت اصلی مد نظر راست کلیک کرده و گزینه‌ی Inspect را انتخاب کنید. در پنجره‌ی باز شده روی More کلیک کرده و Edit as HTML را انتخاب کنید. سپس تیتر مد نظر خود را با عنوان اصلی جایگزین کنید. همچنین شما به همین ترتیب قادر خواهید بود تا تاریخ و نام نویسنده را هم تغییر دهید. برای تغییر تصویر، تصویر اصلی را طبق همان مراحل حذف کرده و تصویر مد نظر خود از گوگل پیدا کنید، آدرس تصویر را کپی کرده و جایگزین آدرس قبلی کنید. به این ترتیب میتوانید بدون دردسر زیادی دوستان خود را سرکار بگذارید. با این حال از اسکرین شات به جای فرستادن لینک وبسایت برای دوستانتان استفاده کنید زیرا این تغییرات موقتی خواهند بود و با رفرش صفحه دوباره به حالت قبل باز می‌گردد.
پسوردهای مخفی شده را مشاهده کنید
اگر در هنگام وارد کردن پسورد خود در یک وبسایت آن را به‌صورت ستاره‌دار به شما نشان میدهد، میتوانید کد صفحه‌ی وب را برای مشاهده پسورد خود تغییر دهید. با کلیک راست بر روی پسورد مخفی شده، به DevTools بروید. سپس در قسمت تگ ورودی، نوع رمز عبور را به متن تغییر دهید و روی صفحه خالی کلیک کنید. اکنون پسورد شما قابل مشاهده است. هنگامی که پسورد خود را فراموش کردید اما آن را در مدیریت گذرواژه خود ذخیره دارید، این ترفند برای شما مفید واقع میشود. بنابراین میتوانید رمز عبور خود را مستقیما از صفحه‌ی وب مشاهده کرده و آن را به خاطر بسپارید.
طراحی وب با inspect element
مرورگرهای مدرن مانند گوگل کروم یا فایرفاکس ابزاری ساختند که به توسعه دهندگان اجازه میدهد بصورت آنلاین عیب یابی داشته باشند. این ابزار تگ های html و CSS و کدهای javascript و نحوه اجرای کدها را نشان میدهد.
با استفاده از inspect element شما میتوانید کدهای html و css و javascript را برای هر صفحه وبی ویرایش کنید تا بصورت زنده تغییرات را مشاهده کنید. ( تنها روی کامپیوتر و مرورگر خود این تغییرات را میبینید)
برای صاحبان وبسایت ها ، این ابزار میتواند کمکی در جهت پیش نمایش طراحی ها بدون اینکه شخص دیگری به جز خود آنها تغییر را مشاهده کند باشد.
این ابزار از جهت دیگری نیز جذاب است زیرا میتوانید عناصر صفحه را برای گرفتن اسکرین شات مطابق با سلیقه دلخواه خود تغییر دهید.
برای نیروهای پشتیبانی، زمانی که یکی از عناصر صفحه مانند گالری یا اسلایدر به درستی کار نمیکند، این ابزار یک راه مناسب برای برای شناسایی خطا است.
در اینجا ما تنها تعداد کمی از مزایای ابزار inspect elemnt را آوردیم پس از استفاده از آن متوجه خواهید شد که این ابزار به چه اندازه سودمند و قدرتمند است.
در این مقاله، ما از ابزار inspect گوگل کروم استفاده کردیم، فایرفاکس نیز این ابزار را دارد که عملکردی مشابه ابزار inspect گوگل کروم دارد.
ویرایش و عیب یابی کدها در Inspect Element
هردو قسمت کدهای HTML و CSS در inspect قابل ویرایش هستند. برای انجام این کار شما میتوانید روی هر قسمتی از html که میخواهید ویرایش کنید دوبار کلیک کنید.
موارد استفاده اینسپکت المنت در بک اند چیست؟
به طور کلی وقتی یک درخواست از سمت وب اپلیکیشن یا وب سایت شما به سمت بک اند (که میتواند یک api باشد یا به طور خاص با فرانت سایت در یک لایه قرار گرفته باشد) ارسال میشود، این درخواست شامل یک سری header و body میباشد.
مثلا فکر کنید در هنگامی که درخواست ورود به سایت را دارید، پس از این که مقادیر نام کاربری و گذرواژه را وارد کردید و روی دکمه ورود کلیک کردید، یک درخواست (Request) به سمت بک اند ارسال میشود که شامل مواردی است که به همراه این درخواست ارسال میشود. مثلا در اینجا شامل نام کاربری، گذرواژه و عبارت امنیتی یا کپچا میباشد. شما به راحتی میتوانید این موارد را به همراه آدرس ارسالی به بک اند در اینسپکت المنت در تب نتورک یا شبکه (Network) مشاهده نمایید. (در مرورگر فایرفاکس میتوانید این درخواست را ویرایش و مجددا ارسال هم نمایید.)