نحوه ویرایش صفحات وب در سافاری با استفاده از Inspect Element

در اینجا نحوه ویرایش متن و تصاویر در یک وب سایت از طریق ابزار توسعه دهنده Inspect Element Safari آمده است.

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

این یک راهنمای ساده برای مبتدیان است تا توضیح دهد که چگونه می توانید آزمایش Inspect Element در Safari را برای ویرایش متن و تصاویر یک وب سایت با حداقل دانش کدنویسی آغاز کنید.

Inspect Element چیست؟

Inspect Element یک ابزار توسعه دهنده است. این در Safari در دسترس است، البته در سایر مرورگرهای وب مانند Chrome، Firefox و Edge نیز وجود دارد. با Inspect Element، می‌توانید به پشت پرده یک وب‌سایت نگاه کنید تا کدهای جلویی آن مانند HTML و CSS را آشکار کنید. با این حال، مانند پایگاه داده‌های آن به شما امکان مشاهده بک‌اند را نمی‌دهد.

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

چرا باید از Inspect Element استفاده کرد؟

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

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

در حال حاضر، ما بر روی ویرایش اصول اولیه یک صفحه وب با استفاده از Inspect Element تمرکز می کنیم.

نحوه دسترسی به عنصر Inspect در سافاری

می توانید Inspect Element را در Safari با استفاده از منوی توسعه دهنده باز کنید:

1. سافاری را باز کنید.
2. روی Safari در نوار منوی بالا کلیک کنید.
3. از منوی کشویی، تنظیمات را انتخاب کنید.
4. گزینه Advanced را انتخاب کنید.
5. کادری که می گوید Show Develop menu در نوار منو را علامت بزنید.

پس از انتخاب این گزینه، می توانید روی یک صفحه وب کلیک راست کرده و Inspect Element را انتخاب کنید. همچنین می‌توانید در نوار منو Develop و سپس Show Web Inspector را انتخاب کنید.

چگونه عناصر وب را در Inspect Element پیدا کنیم

برای شروع ویرایش یک عنصر، روی چیزی که می‌خواهید ویرایش کنید کلیک راست کرده و Inspect Element را کلیک کنید. با این کار پنجره توسعه دهنده باز می شود که قسمت مربوطه برجسته شده است. ممکن است متوجه شوید که عنصر خاصی که می خواهید عنصر کنید (مثلاً تصویر یا متن) پنهان است. برای پیدا کردن آن، از فلش های سمت چپ برای گسترش بخش های تو در تو استفاده کنید.

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

نحوه ویرایش متن یک وب سایت با استفاده از Inspect Element

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

واقعاً به همین سادگی است! تنها مواقعی که این کار نمی کند زمانی است که متن در واقع بخشی از یک تصویر است، مانند یک لوگو.

نحوه ویرایش تصاویر یک وب سایت با استفاده از Inspect Element

در حالی که تصاویر به صورت بصری برای شما در قسمت جلویی ظاهر می شوند، در کد وب سایت به صورت پیوند ظاهر می شوند. می توانید روی تصویر کلیک راست کرده و Inspect Element را انتخاب کنید تا به جایی که آن تصویر در کد است بروید. تصاویر وب سایت معمولاً دارای پسوندهای JPG، GIF یا PNG هستند، البته نه منحصرا.

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

با استفاده از سافاری وارد وب سایت ها شوید

ابزار Safari’s Inspect Element به شما این امکان را می دهد که کد متناظر با متن و تصاویر را به راحتی پیدا و تغییر دهید، که به آسانی تغییر یک متن یا رشته URL است. هنگامی که ویرایش یک وب سایت را با Inspect Element تمام کردید، به سادگی صفحه را بازخوانی کنید و همه چیز به حالت عادی باز خواهد گشت.

منبع مقاله