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

- visibility ۰ mode_comment

inspector

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

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

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

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

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

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

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

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.