آموزش اسکرین شات با Dev Tools کروم

آموزش اسکرین شات با Dev Tools کروم

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

نحوه استفاده از ابزارهای Chrome برای گرفتن عکس از صفحه

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

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

مراحل گرفتن اسکرین شات با DevTools کروم:

1- در ابتدا  Ctrl + Shift + I را در رایانه یا Command + Option + I را در Mac فشار دهید. روش دیگر ، روی نماد منوی سه نقطه کلیک کنید و More tools> Developer tools را انتخاب کنید. با انجام این کار منوی توسعه دهنده Element Inspector باز می شود که کدگذاری HTML صفحه وب را نشان می دهد.

2- سپس ، Ctrl + Shift P (PC) یا Command + Shift P (Mac) را فشار دهید یا روی منوی سه نقطه برای Customize And Control DevTools کلیک کرده و Run Command را انتخاب کنید.

آموزش اسکرین شات با Dev Tools کروم

فقط برای عکس معمولی یا اندازه کامل ، روی نماد منوی سه نقطه در بالای صفحه ای که می خواهید ضبط کنید کلیک کنید و Capture screenshot یا Capture screen size (عکاسی از اندازه اصلی) را انتخاب کنید.

3- برای مشاهده گزینه های تصویر صفحه ، عبارت “screenshot” را تایپ کنید که عبارتند از:

Capture area screenshot
Capture full size screenshot
Capture node screenshot
Capture screenshot

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

آموزش اسکرین شات با Dev Tools کروم

 

گزینه های اسکرین شات کروم دولوپر

برای گرفتن عکس قسمتی از صفحه ، Capture screenshot screen را انتخاب کنید. از ماوس خود برای کشیدن یک کادر در ناحیه ای که می خواهید عکس صفحه را بگیرید ، استفاده کنید.

برای گرفتن تصویر از کل صفحه وب ، Capture screen size (اندازه کامل) را انتخاب کنید. این گزینه به شما امکان می دهد تصویری از یک صفحه وب دریافت کنید که به راحتی در یک صفحه قرار نمی گیرد.

بیشتر بخوانید  7 راهکار برای رفع باز شدن خودکار سایت های ناخواسته در گوگل کروم

اگر می خواهید اسکرین شات استانداردی داشته باشید ، Capture screenshot (تصویری از صفحه) را انتخاب کنید ، که آنچه را که روی صفحه شما قابل مشاهده است بگیرد.

در نهایت ، شما می توانید با انتخاب Capture node screenshot از یک عنصر HTML یک اسکرین شات بگیرید.

پس از گرفتن عکس از صفحه ، یک کادر Save را مشاهده خواهید کرد. پوشه ای را انتخاب کنید و نام فایل را برای اسکرین شات خود انتخاب کنید. همه اسکرین شات های گرفته شده با استفاده از ابزارهای Developer نیز در مدیریت بارگیری Chrome موجود است.

5/5 - (1 امتیاز)

نظرات در مورد : آموزش اسکرین شات با Dev Tools کروم

0 دیدگاه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *