آشنایی با ابزار کاربردی Inspec Elements مرورگرها برای وبمستران

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-14 18:38:03

مرورگرهای امروزی یه قابلیت خیلی خاص و ویژه دارند به نام Inspector Elements یا Inspect Element که این ابزار به شما ابزارهایی ارائه می کنه که بیشتر به کار وبمسترها میاد. این ابزار میتونه هم برای رفع خطاها و مشکلات فایل های استایل و جاوا اسکریپت سایت استفاده بشه و هم برای استایل دهی بخش ها و عناصر مختلف سایت و هم برای ویرایش زنده کدهای HTML سایت!

مهم ترین و پرکاربردترین بخش این قابلیت، ویرایش کدهای HTML و CSS سایت هست. با این ویژگی می تونیم کدهای HTML سایت رو به هر حالتی که خواستیم تغییر بدیم و به صورت زنده روی سایت نتایجش رو ببینیم، بدون اینکه روی حالت نمایش سایر کاربرها تأثیری بگذاره. با اینکار می تونیم تغییراتی که قراره روی سایت اعمال کنیم رو از قبل روی سایت پیاده کنیم تا بتونیم عیب یابی کنیم و بعد فایل های اصلی قالب یا اسکریپت رو تغییر بدیم و تغییرات رو برای سایر کاربران هم اعمال کنیم.

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

اما بیایید ببینیم این بخش چیه و چطوری میشه بهش دسترسی پیدا کرد و بعضی از بخش های مهمش رو توی این تاپیک از پلتفرم تاکینا برای شما توضیح بدم.

 

نحوه اجرا و دسترسی به این قابلیت

تمامی مرورگرها، زمانی که داخل سایت و یا روی یک قسمت خاصی از سایت "راست کلیک" کنید، توی پنجره باز شده گزینه ای به نام Inspector Elements هست که با کلیک روی اون پنل اینسپکتور باز میشه. مثل تصویر زیر که از مرورگر گوگل کروم هست:

برای سایر مرورگرها مثل فایرفاکس و مایکروسافت اج و یا اوپرا و ... این گزینه ممکنه تحت اسم های Inspector و یا Inspect element هم باشه اما عبارت Inspect داخل اون گزینه هست حالا پسوند و پیشوند ممکنه داشته باشه.

راه دیگه دسترسی به این پنل، کلید ترکیبی Ctrl + Shift + i هست. این کلید ترکیبی کیبورد هم توی گوگل کروم کاربرد داره و هم توی مرورگر موزیلا فایرفاکس.

در نهایت چنین پنلی براتون باز میشه که در واقع همین قابلیت Inspect Elements مرورگر هست:

 

داخل تصویر بالا رو شماره گذاری کردم که بخش های اصلی و مهم تر این پنل رو به ترتیب عدد براتون توضیح میدم. اگه تصویر واضح نیست، می تونید تصویر رو داخل یه تب دیگه باز کنید و زوم کنید.

  1. تب Elements هست. به طور پیش فرض این تب براتون باز میشه که پایینش شماره های 11 و 12 هستن. در سمت چپ این قسمت یعنی همون شماره 11 کدهای HTML سایت هستن و شماره 12 که پنل سمت راست میشه، کدهای CSS یا همون استایل سایت ما هست. هر تغییری توی این دو پنل بدید، به طور زنده روی سایت اعمال میشه. البته این تغییرات با یک رفرش ساده باز به حالت قبل برمیگرده و دائمی نیست. با این دو پنل می تونید سورس و استایل سایت رو تغییر بدید و بعد اون کد رو از طریق فایل منیجر روی فایل های قالبتون اعمال کنید.
  2. تب Console هست. این تب به شما قابلیت عیب یابی سایت رو میده. این قسمت به شما نشون میده که کدوم یکی از فایل های سایتتون (تصاویر، ویدیو، فایل استایل یا فایل جاوا اسکریپت) موقع اجرا شدن مشکل دارند. ممکنه اون تصویر یا فایل اصلا وجود خارجی نداشته باشه و آدرسش اشتباه باشه یا اینکه یک خطای کدنویسی در فایل جاوا اسکریپت وجود داره که داخل این قسمت نشون داده میشه. اگه به مستطیل شماره 10 داخل تصویر بالا دقت کنید، نشون میده که سایت ما 12 خطا و 4 پیشنهاد داره. 12 خطا مربوط به مشکل در اجرای فایل های همون صفحه هست که داخلش هستید نه باقی صفحات. این خطاها همون آدرس اشتباه فایل و یا خطای مهم کدنویسی هست که باعث میشه اون فایل به درستی اجرا نشه. اما اون 4 خطا، در واقع مشکلات کدنویسی در فایل های جاوا اسکریپت رو نشون میدن که بیشتر پیشنهاد هست. مثلا ممکنه محتویات دو تا فایل جاوا اسکریپت کاملا مشابه باشن و این قابلیت به شما اطلاع میده که کدوم فایل ها از سایت شما محتویاتش مثل هم هستش و شاید بخواهید یکی از اونها رو از سایت حذف کنید چون چند بار تعریف شدنش نیازی نیست!
  3. تب Source به شما فایل های اجرا شده داخل اون صفحه رو به صورت لیست و تفکیک بر اساس پوشه رو ارائه می کنه. تمامی فایل ها چه از دامنه های دیگه و خارجی و چه از هاست خودتون رو به طور کامل لیست می کنه فایل هایی مثل CSS و JS و تصاویر و فایل های دیگه که مرورگر میتونه به اونها دسترسی داشته باشه رو لیست میکنه.
  4. تب Network به شما لیستی از اطلاعات بارگیری و لودینگ فایل ها و کدهای داخل سایت رو نشون میده. این بخش زیاد به کار وبمستر عادی نمیاد. بیشتر سئوکارها و یا متخصصین امنیتی از این بخش استفاده می کنند تا سایتتون و سرعت لودش رو بهینه تر کنند.
  5. تب Performance از اسمش پیداست مربوط به سرعت هست. این بخش هم برای سئوکارهایی هست که میخوان سرعت سایتتون رو افزایش بدن. اگه خودتون میخواهید یه تست بکنید، وارد بخش بشید، کلید ترکیبی Ctrl + E رو فشار بدید و بعد از اون کلید ترکیبی Ctrl + Shift + E رو فشار بدید. با اینکار اون صفحه ای که هستید رفرش میشه و همزمان داخل این تب اطلاعاتی مربوط به لودینگ صفحه بهتون نمایش داده میشه که به تفکیک هر الکنت و جزء سایت هست. مثلا لود شدن فایل استایل یا جاوا اسکریپت و یا تصاویر و ... چند ثانیه طول میکشه و...
  6. تب Momory به شما این قابلیت رو میده تا بررسی کنید فایل های جاوا اسکریپت شما که بخش برنامه نویسی سایتتون رو بر عهده دارند، برای اجرا شدن و عملکردشون، چقدر رم از سیستم کاربر رو مصرف می کنند. بعضی از خطاهای کدنویسی ممکنه حلقه هایی رو به وجود بیارند که باعث بشه مصرف رم کاربر موقع بازدید از سایتتون به شدت بالا بره. پس اگه احساس می کنید سایتتون سرعتش پایین هست و یا وقتی وارد سایت میشید مرورگرتون سرعت کند میشه و یا کامل هنگ میکنه، بهتره از این بخش استفاده کنید تا ببینید فایل های جاوا اسکریپت سایتتون چقدر رم مصرف می کنند. اگه مصرف رم از 50 مگابایت بالاتر بود باید فایل هاتون رو یه بررسی بکنید چون احتمال وجود خطای کدنویسی وجود داره.
  7. تب Application یک گزارش کامل از فایل های سایتتون بهتون ارائه میکنه. فایل هایی مثل کوکی ها یا فایل های موقتی که موقع بازدید از سایت داخل هاردتون ذخیره میشه و بعد از بستن سایت حذف میشن! تا دیتابیس موقت تحت مرورگرها و لیست دقیق از تمامی فایل های سایت شامل فونت، تصاویر، اسکریپت ها، استایل ها، فایل های اجرایی مختلف سایت، سرویس های ویندوز و یا اندروید که موقع بازدید از سایت به کار گرفته میشن، یا اطلاعاتی که خارج از دید کاربر هست اما بین مرورگر و سرور سایت تبادل میشن و ... که این بخش بسیار حرفه ای بیشتر به کار کدنویس ها میاد. اکثر بخش هاش داخل تب Source هم هست اما این قسمت حرفه ای تر و با جزئیات کامل هست. حتی کوچک ترین تبادل اطلاعات رو هم داخل این بخش میتونید مشاهده کنید.
  8. تب Security همونطور که از اسمش پیداست برای امنیت سایت و سرور هست. این بخش سایت رو از نظر گواهینامه و اضافات متعلق به SSL یا HTTPS بررسی میکنه و هر مشکلی که از این نظر باشه رو با جزئیات دقیق به شما گزارش میکنه. اگه مشکلات دیگه مثل بدافزار یا کدهای مخرب هم داشته باشه سایتتون، این قسمت بهتون میگه در کدوم قسمت هست.
  9. تب Lighthouse به شما یک گزارش کامل و دقیق و با جزئیات از مشکلات کدنویسی سایتتون که روی سئو، امنیت، سرعت و رابط کاربری سایتتون تأثیر میگذاره تهیه و به شما ارائه میکنه. این بخش میتونه سایتتون رو روی نسخه موبایل با دسکتاپ آنالیز بکنه و هر مشکلی که داشته باشه براتون لیست کنه که واقعا از نظر کمک به وبمستر، این قسمت در اولویت هست. من شخصا بعنوان یک کدنویس، وقتی که بخوام یک سایت رو آنالیز کنم، اولین بخشی که ازش استفاده می کنم، همین قسمت هست. اول یک گزارش از سایت تهیه می کنم تا ببینم مشکلی که مرورگر تشخیص میده چی هست و بعد سراغ باقی موارد میرم.
  10. شماره دهم در تصویر بالا همون قسمت خطاها و پیشنهادها هست که اگه چیزی پیدا کنه، با کلیک روی این قسمت در واقع به تب شماره 2 یعنی Console منتقل میشید و داخل اونجا جزئیاتی از فایل ها و عیب یابی سایتتون بهتون ارائه میکنه.
  11. شماره یازدهم، پنل کدهای HTML هست. زمانی که وارد تب Elements بشید این بخش براتون نمایش داده میشه. در ادامه بیشتر این قسمت رو توضیح میدم.
  12. شماره دوازده هم مربوط به کدهای CSS یا استایل سایت هست. در ادامه این قسمت هم رو بیشتر با تصویر توضیح میدم چون کاربردش زیاده.

 

پنل کدهای HTML

توی تصویر بالا شماره 12 رو اگه ببینید مربوط به کدهای HTML هست. در واقع توی این قسمت، کدهای PHP و HTML که قالبتون و اسکریپت برای شما تعیین کردن به طور نهایی اجرا میشن و یه همچین کد نهایی به دست میاد که این کد همون هسته سایت شما هست. ولی لزوما محتویات این قسمت داخل یک فایل نیست. یعنی اگه وردپرس رو در نظر بگیریم، محتویاتی که توی بخش HTML سایت مشاهده می کنیم ممکنه از ترکیب بیش از 10 فایل (کمتر یا بیشتر) تشکیل شده باشه!

و نکته بعدی اینکه اگه اسکریپت دارید (فرقی نداره وردپرس یا سیستم ها و اسکریپت های دیگه)، کدهایی که توی فایل منیجر از طریق قسمت ویرایش فایل های PHP می بینید با اینی که توی این پنل می بینید از زمین تا آسمون فرق دارن!

اما چطوری ازش استفاده کنیم؟

محتویات این قسمت کدهای HTML مثل div و p و span و ... هست که اگه روی هر کدوم از این تگ ها "راست کلیک" کنید، چنین پنجره ای باز میشه که ابزارهای مدیریتی کدهای این قسمت رو براتون نمایش میده:

مهم ترین گزینه هاش یکی Edit as HTML هست که اگه روش کلیک کنید، همون تگ یا بخش از سایتتون به همراه محتویات داخلش به حالت ویرایش میرن و می تونید کدها رو تغییر بدید و بعد خارج از اون محدوده (روی جای دیگه ای سایت یا پنل) کلیک کنید و تغییرات داخل سایت اعمال میشن. به این صورت می تونید کدها رو تغییر بدید و پیش نمایش زنده رو ببینید.

گزینه بعدی Delete Element هست که اون قسمتی که روی راست کلیک کردید به همراه محتویاتش از سایت حذف میشن و سایتتون پیش نمایش رو بهتون ارائه می کنه که اگه اون بخش از سایتتون نباشه، باقی بخش ها به چه حالتی دیده میشن. البته برای اینکه اگه بعد از حذف، پشیمون شدید و نخواهید باز سایت رو رفرش کنید، از گزینه Hide Element استفاده کنید بهتره.

گزینه بعدی شاخه Force State هست. زمانی که برید روی این گزینه، گزینه هایی مثل :active یا :hover و... نشون داده میشه. این ها برای عناصری که استایل تعریف شده براش کاربرد داره. مثلا برای لینک ها. زمانی که موس بره روش یا روش کلیک بشه، رنگ یا استایل هاش تغییر کنه، این گزینه میتونه اون حالت رو بدون اینکه واقعا روی لینک کلیک کنید و یا اینکه موس بره روی لینک، اون حالت رو براتون شبیه سازی میکنه و با این شبیه سازی، پنل سمت راست یعنی قسمت CSS ها هم تغییر می کنه و کدهای مربوط به حالت Hover یا Active اون لینک براتون نمایش داده میشه که در حالت عادی ممکنه در بخش CSS ها نتونید بهش دسترسی پیدا کنید.

مابقی بخش هاش هم کاربردی هستن اما ممکنه بهشون اصلا نیازی نداشته باشید و خیلی کم پیش بیاد از سایر بخش های بخواهید استفاده کنید.

 

پنل مربوط به کدهای CSS سایت

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

  1. بخش مربوط به کلس یا آی دی هست. اگه سمت چپ یعنی قسمت کدهای HTML رو نگاه کنید، اکثر بخش ها دارای دستوراتی مثل class="body" و یا id="stylesheet" هست. این class و id ها برای تفکیک دستورات استایل استفاده میشن تا بتونیم توسط فایل های .css سایتمون، به بخش های مختلف سایتمون استایلدهی کنیم و هم اینکه استایل های هر قسمت رو از بخش های دیگه جدا کنیم تا تداخلی هم پیش نیاد. در پنل مربوط به استایل ها، زمانی که توی قسمت شماره یک، عناوین اولشون یک "نقطه" باشه، مثل .talkina که مربوط به Class هست. اگه به صورت #talkina باشه یعنی هشتگ قبلش بیاد، مربوط به Id هست و اگه بدون نقطه یا هشتگ باشه، مثلا body (که توی تصویر بالا هم هست)، این دستور مربوط به تگ های اصلی سایت هست. یعنی اگه توی کدهای سایتتون ببینید، ممکنه کدهایی مثل <body>...</body> یا <h1>...</h1> باشه (که کلس و آی دی و محتویات خودش را هم داره طبیعتا)، اینگونه دستورات استایل به طور کلی روی تمامی تگ های مشابه سایت اعمال میشن که کاربردشون حیاتی هست اما یکبار بیشتر تعریف نمیشن معمولا.
  2. بخش شماره دو این قسمت، دستورات استایل هست. دستوراتی مثل اندازه فونت، نوع فونت، حاشیه ها، فاصله ها، رنگ پس زمینه یا رنگ متن و ...
  3. بخش شماره سوم، برای اعمال تغییرات روی فایل اصلی داخل فایل منیجر هاستتون بهتون کمک میکنه. این بخش شامل، نام فایلی که اون دستور استایل داخلش قرار گرفته و شماره خطی که اون کد داخل اون فایل هست رو به طور پیش فرض بهتون نشون میده. اما اگه موس رو روی این قسمت نگهدارید، آدرس واقعی اون فایل داخل فایل منیجرتون رو هم بهتون نشون میده که دقیقا بتونید پیداش کنید!

 

کلام آخر!

این بخش از مرورگر بسیار کاربردی هست و اگه می خواهید توی کدنویسی ها و زیباسازی سایتتون پیشرفت کنید، برای این قسمت بیشتر وقت بگذارید، مخصوصا بخش استایل ها که رابط کاربری سایتتون رو این قسمت در واقع شکل میده. برای استایل ها می تونید داخل گوگل هر چیزی که می خواهید رو پیدا کنید. مثلا اگه دستور مربوط به تغییر رنگ رو میخواهید، کافیه جستجو کنید تا دستوراتش رو پیدا کنید. برای هر چیزی که می خواهین ممکنه چندین دستور مختلف وجود داشته باشه که میتونه بهتون کمک کنه تا سایتتون رو زیباتر کنید.

حدود 90 درصد بازدیدکننده های سایت، سایت رو از نظر رابط کاربری و زیبایی بررسی می کنند و بر اساس این هم تصمیم می گیرند که دفعه بعدی باز به سایتتون بیان یا نه. پس روی ظاهر سایتتون حساس تر باشید.

و برای سایر تب ها و بخش ها هم وقت بگذارید، همیشه عیب یابی کردن سایت می تونه مشکلات سایت رو رفع کنه و کاربرا تجربه بهتری از بازدید سایتتون داشته باشند.

امیدوارم این تاپیک از تاکینا که به طور اختصاصی تهیه شده براتون مفید باشه. هر مشکل یا سوالی در این خصوص داشتید و هر قسمت که براتون نامفهوم بود و یا نیاز به راهنمایی بیشتر دارید در همین تاپیک پاسخ ارسال کنید حتما جواب میدم بهتون.