ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 24) : چگونه بدون افزونه تصویر تمام صفحه تهیه کنیم؟



visibility  
mode_comment   ۲

همونطور که اطلاع دارید در جلسه قبل در مورد Request Blocking توضیحاتی رو خدمتتون عرض کردیم و در این جلسه قصد داریم در مورد Capture Screenshot با هم بحث کنیم. با استفاده از این امکان میتونین بدون نیاز به هیچ افزونه ای، از صفحات مورد نظر خودتون تصویر تمام صفحه تهیه کرده و از اون استفاده کنید.

نحوه گرفتن تصویر تمام صفحه

خب در اینجا باید ابتدا اون سایتی که قصد دارید از اون تصویر تمام صفحه تهیه کنید رو باز کنید. در اینجا ما سایت سون لرن رو باز میکنیم. خب Inspector رو باز میکنیم و کلیدهای ترکیبی Ctrl + Shift + P رو فشار میدیم تا منوی دستورات یا Command Menu باز شود.

در اینجا کلمه Screenshot رو تایپ میکنیم. همونطور که میبینید با تایپ کردن این کلمه، دو مورد برای ما نمایش داده میشه.

  1. با کلیک بر روی این گزینه، از سایت مورد نظر (کل عرض و ارتفاع سایت مورد نظر تحت پوشش قرار میگیره) تصویر تهیه میشه و بعد از مدتی بصورت اتوماتیک دانلود میشه و میتونین از اون استفاده کنید.
  2. با کلیک بر روی این گزینه، فقط از Viewport (اون قسمتی از سایت که در حال حاضر قادر به دیدنش هستید) تصویر تهیه میشه و بصورت اتوماتیک دانلود میشه.

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

تهیه تصویر از سایت در دستگاه مورد نظر

مورد دیگه ای که این امکان میتونه کمکتون کنه، زمانی هست که دارید بر روی واکنشگرا کردن سایت کار میکنید و میخواید خروجی کار رو به دیگران نمایش بدین. مثلا فرض کنید که میخواید به یک نفر نشون بدین که سایتتون در iPhone 5 به چه صورت نمایش داده میشه.

برای اینکار در ابتدا بر روی آیکون Toggle Device Toolbar کلیک میکنیم یا کلیدهای ترکیبی Ctrl + Shift + M رو میزنیم. با اینکار وارد محیط شبیه سازی موبایل میشیم. از قسمت موبایلهای از پیش تعریف شده موبایل iPhone 5 رو انتخاب کنید:

حالا صفحه رو یکبار رفرش کنید تا سایت به درستی در iPhone 5 نمایش داده بشه و اگر مشکلی داره برطرف بشه. حالا میتونیم بر روی آیکون سه نقطه یا ... در بالا و سمت راست کلیک کنیم:

میبینید که همون 2 گزینه قبلی هم در اینجا وجود داره با این تفاوت که در اینجا تصویر در موبایل گرفته میشه. زمانی که بر روی Capture full size screenshot کلیک کنیم، یک تصویر تمام صفحه از iPhone 5 گرفته میشه و میتونین اون رو به هر کسی که میخواید نشون بدین. به همین راحتی.

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

موفق باشید

یا علی

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

تشکر.ممنون

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

خواهش میکنم موفق باشید

ارسال نظرات

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