ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت ۲۰)

inspector

ترفند ۳۳ : بررسی و فهمیدن فونت اعمال شده

بعضی مواقع نمیدونیم که چه فونتی به قسمتی از متنمون اعمال شده و یا اینکه پیدا کردن اون سخته. اگر بر روی اونجایی که میخواید اسم فونتشو متوجه بشید کلیک راست کنید و Inspector رو باز کنید، با رفتن به تب Computed و در آخر اون نام فونت اعمال شده برای این قسمت رو نمایش میده. بصورت زیر:inspector rendered font

همونطور که میبینید در آخر قسمت مربوط به Computed شما بخشی بنام Rendered Fonts رو میبینید که درون اون نام فونت اعمال شده رو قرار داده و نوشته که منبع اون از کجا هست. این مورد حتی زمانی که نام فونت مورد نظر درون font-family هم وجود نداشته باشه، بدرستی نمایش داده خواهد شد.

ترفند ۳۴ : ویرایش کلیه متون موجود در صفحه

فرض کنید که شما میخواید متنهای موجود در صفحه رو مطابق با نظر خودتون بصورت امتحانی تغییر بدین و در همون لحظه ببینید که استایلتون اوکی هست یا خیر. یا مثلا یک منو دارید و میخواید ببینید متنتون چقدر زیاد بشه به خط بعدی میره و میشکنه. برای اینکار میتونین به راحتی و با استفاده از Console مربوط به Inspector این مورد رو انجام بدین. تنها کاری که باید بکنید اینه که دستور زیر رو درون console تایپ کرده و اینتر بزنید تا سایت مورد نظر به حالت design mode وارد بشه:

document.designMode = 'on';

تصویری نیز بصورت زیر خواهد بود:inspector design mode

همونطور که دیدید بعد از on کردن ویژگی designMode تونستیم متن مورد نظر در ۷Learn رو به راحتی تغییر بدیم و تغییرات رو همون لحظه ببینیم. دیدید که به همین راحتی میتونیم کارای مورد نظرمون رو با Inspector انجام بدیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

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

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0