اصول اولیه Inspect Element: عیب یابی وشخصی سازی کدهای سایت

اصول اولیه Inspect Element: عیب یابی وشخصی سازی کدهای سایت

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

Inspect Element یا Developer Tools چیست؟

مرورگرهای مدرن وب مانند Google Chrome و Mozilla Firefox دارای ابزاری داخلی هستند. که به توسعه دهندگان وب امکان اشکال زدایی از خطاها را میدهد. این ابزارها کد HTML ، CSS و JavaScript را برای یک صفحه و نحوه اجرای کد توسط مرورگر را نشان میدهند.

با استفاده از ابزار Inspect Element میتوانید کد HTML ، CSS یا JavaSCcript را برای هر صفحه وب ویرایش کرد. و تغییرات خود را به صورت زنده (فقط در رایانه خود) مشاهده کنید.

برای یک مالک وب سایت، این ابزارها میتوانند کمک خوبی باشد. بدون اینکه در واقع تغییراتی را برای دیگر بازدید کنندگان ایجاد کند، میتوان دید که یک طراحی سایت چگونه به نظر میرسد.

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

برای نمایندگان پشتیبانی، این یک روش عالی برای شناسایی خطایی است که باعث عدم بارگیری گالری ها یا عملکرد نادرست اسلایدر شما شود.

درواقع الان ما درحال توضیح سطحی این ابزار (Inspect Element) هستیم. میتوان گفت که Inspect Element واقعاً قدرتمند است.

در این مقاله، ما بر روی Inspect Element در Google Chrome تمرکز خواهیم کرد زیرا این مرورگر مورد نظر ما است. Firefox ابزارهای توسعه دهنده خود را دارد که با انتخاب Inspect Element از فهرست مرورگر نیز میتوان از آنها استفاده کرد.

راه اندازی Inspect Element و تعیین محل کد

با فشار دادن کلیدهای ترکیبی CTRL + Shift + I در صفحه کلید میتوانید ابزار inspect element را راه اندازی کنید. به طور متناوب میتوانید روی هر صفحه ای از صفحه وب کلیک راست کرده و بازرسی عناصر (Inspect Element)را از فهرست مرورگر انتخاب کنید.

inspect element
inspect element

پنجره مرورگر شما به دو قسمت تقسیم میشود و پنجره پایین کد منبع صفحه وب را نشان میدهد.

پنجره ابزار توسعه دهنده بازرسی عناصر به دو پنجره تقسیم میشود. در سمت چپ، کد HTML صفحه را مشاهده خواهید کرد. در پنجره سمت راست، قوانین CSS را مشاهده خواهید کرد.

بخش html و css
بخش html و css

هنگامی که ماوس خود را بر روی منبع HTML حرکت میدهید ، منطقه موردنظر را در صفحه وب برجسته خواهید دید. همچنین متوجه تغییر قوانین CSS میشوید تا CSS را برای عنصری که مشاهده میکنید نشان دهد.

انتخاب عنصر
انتخاب عنصر

همچنین میتوانید نشانگر ماوس را به عنصری در صفحه وب ببرید، کلیک راست کرده و عنصر inspect را انتخاب کنید. عنصری که به آن اشاره کردید در کد منبع برجسته خواهد شد.

ویرایش و اشکال زدایی کد در Inspect Element

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

اشکال زدایی کد در Inspect Element
اشکال زدایی کد در Inspect Element

همچنین میتوانید بر روی ویژگی ها و استایل ها در پنجره CSS دوبار کلیک کرده و ویرایش کنید. برای افزودن یک استایل سفارشی ، بر روی نماد + در بالای پنجره CSS کلیک کنید.

ویرایش css
ویرایش css

با ایجاد تغییرات در CSS یا HTML ، این تغییرات بلافاصله در مرورگر منعکس می شوند.

اعمال بلافاصله تغییرات
اعمال بلافاصله تغییرات

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

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

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

به راحتی خطاهای سایت خود را پیدا کنید

Inspect element دارای منطقه ای به نام Console است که تمام خطاهایی را که در وبسایت شما وجود دارد نشان میدهد. هنگام تلاش برای رفع اشکال یا درخواست پشتیبانی از نویسندگان افزونه، همیشه مفید است که اینجا را جستجو کنید تا ببینید خطاها چیست.

یافتن خطاهای جاوا اسکریپت
یافتن خطاهای جاوا اسکریپت

ابزارهایی مانند Inspect Element Console و SupportAlly به شما کمک میکنند پشتیبانی بهتری از مشتری داشته باشید. زیرا تیم پشتیبانی فنی مشتریانی را دوست دارند که در ارائه بازخورد دقیق از این مسئله ابتکار عمل میکنند.

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

منابع لاتین
_ WpBeginner
تیم تولید محتوا _ آلتیمیت وردپرس
ما در تیم تولید محتوای آلتیمیت وردپرس، سخت در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم. محتوای این صفحه توسط یوسف حسینی کنترل و بررسی خواهد شد.

دیدگاهتان را بنویسید