Choď na obsah Choď na menu

Inspect Element

 
عنصر را بازرسی کنید
برای کسی که کد نویسی را نمی داند و هرگز از Inspect Element استفاده نکرده است، دیدن این همه کد پیچیده در یک صفحه کمی عجیب به نظر می رسد. اما اگر شما یکی از افرادی هستید که تا به حال با این ابزار کار کرده‌اید، احتمالاً می‌دانید که می‌توانید بسیاری از کارهای مفید (و گاهی نه چندان مفید) را با Inspect Element انجام دهید. در این مقاله شما را با ۷ کار جالب و سرگرم کننده آشنا می کنیم که می توانید با ابزارهای توسعه مرورگر (DevTools) و  خود انجام دهید.
 
عنصر بازرسی چیست؟
Inspect Element افزونه ای است که قبلاً به طور پیش فرض به اکثر مرورگرها اضافه شده است و می توان از آن برای ایجاد تغییرات در کد صفحه استفاده کرد. یعنی ما می توانیم هر قسمت از صفحه را در نظر بگیریم، می توانیم تغییراتی در آن ایجاد کنیم و تغییرات اعمال شده در همان زمان قابل مشاهده خواهد بود. مرورگرهای مدرن، مانند گوگل کروم یا فایرفاکس، ابزارهایی را توسعه داده اند که به توسعه دهندگان اجازه می دهد مشکلات را به صورت آنلاین عیب یابی کنند. این ابزار تگ های html و CSS و کد جاوا اسکریپت و نحوه اجرای کد را نمایش می دهد.
 
با Inspect Element، می توانید کد HTML، css و جاوا اسکریپت را برای هر صفحه وب ویرایش کنید تا تغییرات را به صورت زنده مشاهده کنید. البته لازم به ذکر است که این تغییرات تنها در کامپیوتر و مرورگر شما قابل مشاهده خواهد بود. برای صاحبان وب سایت، این ابزار می تواند برای مرور پیشنهادات بدون توجه دیگران مفید باشد. این ابزار از جنبه های دیگر نیز جذاب است، زیرا می توانید عناصر صفحه را تغییر دهید تا مطابق سلیقه خود اسکرین شات بگیرید. برای کارکنان پشتیبانی، زمانی که یک عنصر صفحه، مانند گالری یا نوار پیمایش، به درستی کار نمی کند، این ابزار راه خوبی برای تشخیص خطاها خواهد بود. شایان ذکر است که تغییرات ایجاد شده در مرورگر شما توسط ابزار Inspect Element فقط در سیستم شما رخ می دهد و در کد سایت ذخیره نمی شود. بنابراین یک بازیابی ساده این تغییرات را به حالت اولیه باز می گرداند.
 
1. دانلود عکس و فیلم
دانلود عکس و فیلم
 
برای دانلود عکس ها و فیلم های مورد نظر خود، معمولاً کلیک راست کرده و با انتخاب گزینه ذخیره، آنها را در سیستم خود ذخیره کنید. با این حال، این تکنیک در همه وب سایت ها کار نمی کند. در این حالت از تابع ابزار Element Check استفاده می شود. برای دانلود هر فایلی، کلیک راست کرده و Scan را انتخاب کنید. سپس تگ کنید
 
بسط دادن. اکنون می توانید منبع فایل را از طریق ویژگی src مشاهده کنید. لینک منبع را کپی کرده و در صفحه جدیدی باز کنید. سپس روی فایل مربوطه کلیک راست کرده و با استفاده از گزینه Save As آن را دانلود کنید.
 
2. با تغییر عنوان و متن محتوای وب سایت، دوستان خود را درگیر کنید
با تغییر نام و متن محتوای وب سایت، دوستان خود را درگیر کنید
 
Namiesto vytvárania falošných obrázkov môžete použiť nástroje DevTools na zmenu textu na webovej stránke a vtipkovanie s priateľmi. Ak chcete vytvoriť falošnú webovú stránku, najprv kliknite pravým tlačidlom myši na hlavnú webovú stránku a vyberte možnosť Skontrolovať. V okne, ktoré sa otvorí, kliknite na Viac a vyberte Upraviť ako HTML. Potom nahraďte názov pôvodným názvom. Rovnakým spôsobom budete môcť zmeniť aj dátum a meno autora. Ak chcete zmeniť obrázok, odstráňte pôvodný obrázok podľa rovnakých krokov a nájdite požadovaný obrázok v službe Google, skopírujte adresu obrázka a nahraďte predchádzajúcu adresu. Týmto spôsobom môžete bez väčších problémov zamestnať svojich priateľov. Namiesto odoslania odkazu na webovú lokalitu svojim priateľom však použite snímku obrazovky, pretože tieto zmeny budú dočasné a po obnovení stránky sa vrátia do predchádzajúceho stavu.
 
3. فونت ها و رنگ های صفحه وب را تغییر دهید
فونت ها و رنگ های یک صفحه وب را تغییر دهید
 
یکی دیگر از کارهایی که می توانید با Inspect Element انجام دهید تغییر رنگ و فونت وب سایت است. روی محتوایی که می خواهید رنگ آن را تغییر دهید کلیک راست کرده و Check را انتخاب کنید. سپس در تب Styles، رنگ اصلی یا پس زمینه را پیدا کرده و کد هگزادسیمال را وارد کنید. همچنین می توانید اندازه و سبک فونت را در تب Styles تغییر دهید. با استفاده از این ترفند می توانید ظاهر هر وب سایتی را تغییر دهید و خواندن آن را آسان تر کنید. برای مثال می توانید برای هر سایتی حالت تاریک ایجاد کنید، اندازه فونت را افزایش دهید تا در خواندن آن مشکلی نداشته باشید و همچنین عناصر مزاحم صفحه را حذف کنید.
 
4. به رمزهای عبور مخفی نگاه کنید
به رمزهای عبور مخفی نگاه کنید
 
اگر هنگام تایپ در یک وب سایت، رمز عبور ستاره دار را مشاهده کردید، می توانید کد وب سایت را برای مشاهده آن تغییر دهید. برای رفتن به DevTools روی رمز عبور پنهان کلیک راست کنید. سپس در قسمت تگ ورودی، نوع رمز عبور را به متن تغییر دهید و روی صفحه خالی کلیک کنید. رمز عبور شما اکنون قابل مشاهده است. این ترفند زمانی مفید است که رمز عبور خود را فراموش کرده اید اما آن را در مدیریت رمز عبور خود ذخیره کنید. این به شما امکان می دهد رمز عبور خود را مستقیماً از وب سایت مشاهده و به خاطر بسپارید.
 
5. نسخه موبایل وب سایت را مشاهده کنید
نسخه موبایل وب سایت را بررسی کنید
 
همه ما می دانیم که چگونه نسخه موبایل یک وب سایت را به نسخه دسکتاپ تبدیل کنیم. اما قطعا نه