چگونه از کل صفحه وب در هر دستگاهی اسکرین‌شات بگیریم: یک راهنمای کامل

این روش دستی نه تنها دردسرساز است؛ بلکه برای هر نوع کار حرفه‌ای کاملاً غیرعملی است. برای هر کسی که با وب‌سایت‌ها سر و کار دارد—توسعه‌دهندگان، بازاریابان، طراحان و غیره—یک اسکرین شات ساده کافی نیست.

• برای تست‌کنندگان QA: تصور کنید که یک باگ بصری عمیق در فوتر یک صفحه بزرگ پیدا کنید. یک اسکرین شات استاندارد نمی‌تواند تمام زمینه را نشان دهد. از طرف دیگر، یک اسکرین شات کامل، تمام چیدمان را مستند می‌کند و گزارش‌های باگ شما را صد برابر واضح‌تر می‌سازد.
• برای توسعه‌دهندگان وب: وقتی که یک طراحی جدید را به یک مشتری نشان می‌دهید، ارسال یک تصویر یکپارچه از کل صفحه اصلی بسیار بیشتر از یک سری فایل‌های جداگانه به نظر می‌رسد. این به آن‌ها اجازه می‌دهد تا جریان کل صفحه را یکجا مرور کنند.
• برای بازاریابان: آیا سعی دارید یک قیف فروش رقیب یا یک صفحه محصول دقیق را بایگانی کنید؟ شما باید همه چیز را ضبط کنید. یک اسکرین شات کامل، کل سفر کاربر را در یک فایل حفظ می‌کند، آماده برای تحلیل.

غلبه بر چالش‌های مدرن وب

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

ضبط یک صفحه وب کامل فقط به خاطر راحتی نیست—بلکه به خاطر ایجاد یک سند بصری دقیق، حرفه‌ای و کامل است. شما تمامیت صفحه را دقیقاً همان‌طور که باید دیده شود حفظ می‌کنید.

این نیاز فقط یک نیاز خاص نیست. تقاضا برای ابزارهای ضبط قابل اعتماد در حال افزایش است. بازار نرم‌افزار اسکرین شات وب‌سایت در حال پیشرفت به سمت ۱.۲ میلیارد دلار تا سال ۲۰۳۳ است و هر سال به طور ثابت ۱۲% رشد می‌کند. این رونق نشان‌دهنده یک تغییر عمده است زیرا حرفه‌ای‌ها روش‌های دستی را به نفع ابزارهای خودکار کنار می‌گذارند. می‌توانید برای اطلاعات بیشتر به گزارش کامل رشد بازار مراجعه کنید.

قبل از اینکه به «چگونه» بپردازیم، کمک می‌کند که گزینه‌ها را کنار هم ببینید. هر روش نقاط قوت خاص خود را دارد و برای موقعیت‌های مختلف مناسب است.

روش‌های ضبط صفحه وب در یک نگاه

این جدول به شما یک نمای سریع از وضعیت می‌دهد و به شما کمک می‌کند تا مسیر درست را قبل از ورود به دستورالعمل‌های مرحله به مرحله برای هر یک انتخاب کنید.

یافتن ابزار مناسب برای کار

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

در بخش‌های بعدی، بهترین روش‌های موجود را بررسی خواهیم کرد تا بتوانید آن را در جریان کار خود قرار دهید.

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

قبل از اینکه حتی به نصب یک ابزار شخص ثالث فکر کنید، نگاهی به آنچه مرورگر شما می‌تواند انجام دهد بیندازید. این کمی یک راز است، اما مرورگرهایی مانند Chrome، Firefox و Edge ابزارهای قدرتمند و بومی دارند که می‌توانند از یک صفحه وب کامل اسکرین شات بگیرند بدون نیاز به نرم‌افزار اضافی.

من متوجه شدم که توسعه‌دهندگان و حرفه‌ای‌های QA معمولاً با این روش‌های داخلی کار می‌کنند. چرا؟ زیرا آن‌ها قابل اعتماد، از قبل نصب شده و مستقیماً در محیطی که برای تست و توسعه استفاده می‌کنند کار می‌کنند. این رویکرد به‌خوبی نگرانی‌های حریم خصوصی یا تضادهای احتمالی که گاهی با افزونه‌های مرورگر پیش می‌آید را دور می‌زند.

باز کردن اسکرین شات‌های کامل صفحه در Chrome DevTools

Google Chrome دقیقاً دکمه «ذخیره صفحه کامل» را در مرکز قرار نمی‌دهد. در عوض، یک ابزار ضبط بسیار دقیق را در داخل ابزارهای توسعه‌دهنده خود (DevTools) پنهان کرده است. این ابزار من است وقتی که به یک نتیجه پیکسل‌کامل نیاز دارم، به‌ویژه برای کارهای فنی.

دسترسی به آن نسبتاً ساده است. اول، شما باید DevTools را باز کنید. می‌توانید در هر نقطه از صفحه راست کلیک کرده و «Inspect» را انتخاب کنید، یا فقط از یک میانبر صفحه‌کلید استفاده کنید:

• در ویندوز/لینوکس: Ctrl + Shift + I
• در مک: Cmd + Option + I

با باز بودن پنل DevTools، شما باید منوی فرمان را باز کنید. این یک میانبر سریع دیگر است: Ctrl + Shift + P (در ویندوز/لینوکس) یا Cmd + Shift + P (در مک). یک نوار جستجو به سرعت ظاهر می‌شود.

از آنجا، فقط شروع به تایپ «اسکرین شات» کنید. چند گزینه فیلتر می‌شوند، اما آنچه شما به دنبال آن هستید «ضبط اسکرین شات با اندازه کامل» است. روی آن کلیک کنید. Chrome بقیه کار را انجام می‌دهد—اسکرول کرده و کل صفحه را به هم می‌دوزد—قبل از اینکه آن را به عنوان یک فایل PNG مستقیماً در پوشه دانلودهای شما ذخیره کند. آسان.

شبیه‌سازی دستگاه‌های موبایل برای ضبط‌های پاسخگو

در اینجا جایی است که روش DevTools واقعاً درخشان می‌شود: ادغام آن با شبیه‌ساز دستگاه. این ویژگی برای هر کسی که در حال آزمایش طراحی واکنش‌گرا است، یک تغییر دهنده بازی است زیرا به شما اجازه می‌دهد یک صفحه وب را دقیقاً همان‌طور که بر روی یک تلفن یا تبلت خاص به نظر می‌رسد، ضبط کنید.

برای شروع، DevTools را باز کنید و به دنبال آیکون "Toggle device toolbar" بگردید؛ این آیکون شبیه یک تبلت کوچک در کنار یک تلفن است. با کلیک بر روی این آیکون، صفحه وب بلافاصله به یک صفحه نمایش موبایل شبیه‌سازی شده تغییر شکل می‌دهد. سپس می‌توانید از منوی کشویی برای انتخاب از میان ده‌ها دستگاه محبوب، مانند iPhone 14 Pro یا Samsung Galaxy S20 Ultra استفاده کنید.

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

پس از اینکه نمای موبایل را تنظیم کردید، فقط مراحل قبلی را تکرار کنید. منوی فرمان را باز کنید (Ctrl/Cmd + Shift + P)، عبارت "screenshot" را تایپ کنید و گزینه "Capture full size screenshot" را انتخاب کنید. شما یک ضبط موبایل عمودی و کامل خواهید داشت. این دقیقاً همان روند کاری است که من دیده‌ام مهندسان QA برای تأیید طراحی‌های موبایل‌محور در یک صفحه محصول طولانی تجارت الکترونیک استفاده می‌کنند.

ابزارهای اسکرین‌شات بومی در Firefox و Edge

در حالی که Chrome شما را مجبور می‌کند کمی جستجو کنید، Firefox و Edge این فرآیند را برای کاربر عادی بسیار قابل دسترس‌تر کرده‌اند و این ویژگی را مستقیماً در رابط اصلی مرورگر قرار داده‌اند.

• در Firefox: فقط در هر نقطه‌ای از صفحه راست کلیک کنید و گزینه "Take Screenshot." را انتخاب کنید. یک پوشش ظاهر می‌شود که به شما گزینه‌ای برای ذخیره آنچه می‌بینید یا ذخیره کل صفحه می‌دهد. این یک فرآیند ساده و دو کلیکی است.
• در Microsoft Edge: می‌توانید از میانبر Ctrl + Shift + S استفاده کنید یا بر روی منوی تنظیمات اصلی (...) کلیک کنید و "Web capture." را پیدا کنید. این همچنین به شما گزینه‌هایی برای ضبط یک ناحیه خاص یا کل صفحه می‌دهد.

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

نکته حرفه‌ای: وقتی با وب‌سایت‌های پویا که محتوای بیشتری را به محض اسکرول بارگذاری می‌کنند (به عنوان مثال، فیدهای رسانه‌های اجتماعی) سر و کار دارید، من همیشه به صورت دستی به پایین‌ترین نقطه صفحه قبل از گرفتن اسکرین‌شات اسکرول می‌کنم. این باعث می‌شود که تمام عناصر بارگذاری شوند تا واقعاً در تصویر نهایی نمایش داده شوند.

قابلیت اطمینان این ضبط‌ها بسیار مهم است، به ویژه در محیط‌های حرفه‌ای مانند آزمایش QA. این واقعاً عجیب است، اما برخی از APIهای تجاری اسکرین‌شات دارای نرخ شکست بین 28% تا 75% هستند، در حالی که بهترین‌های کلاس توانسته‌اند آن را در حدود 6% نگه دارند. این تفاوت بزرگ واقعاً نشان می‌دهد که چرا داشتن یک روش قابل اعتماد و داخلی اینقدر ارزشمند است، به ویژه برای توسعه‌دهندگانی که نیاز به ضبط برنامه‌های تک‌صفحه‌ای پیچیده با بارگذاری زیاد JavaScript دارند.

استفاده از افزونه‌های مرورگر: نگاهی عمیق به ShiftShift

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

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

جریان کار اسکرین‌شات ShiftShift

در میان دریایی از گزینه‌ها، اکوسیستم افزونه‌های ShiftShift رویکردی واقعاً منحصر به فرد دارد. این فقط یک ابزار اسکرین‌شات دیگر نیست؛ این یک ویژگی است که در یک مجموعه بزرگتر از بهره‌وری گنجانده شده است که می‌توانید از طریق یک رابط فرمان قدرتمند به آن دسترسی پیدا کنید. این کاملاً نحوه تفکر شما در مورد ابزارهای مرورگر را تغییر می‌دهد.

همه چیز از طریق Command Palette اجرا می‌شود. فقط کلید Shift را دو بار فشار دهید و بلافاصله ظاهر می‌شود. اگر به میانبرهای کیبورد ترجیح می‌دهید، Cmd+Shift+P در مک یا Ctrl+Shift+P در ویندوز/لینوکس نیز کار می‌کند. پس از باز شدن، می‌توانید همه چیز را بدون اینکه هرگز به ماوس خود دست بزنید، انجام دهید.

ضبط اولین اسکرین‌شات کامل صفحه شما

کل فرآیند برای سرعت ساخته شده است. پس از فعال شدن Command Palette، فقط شروع به تایپ "screenshot" کنید. جستجوی هوشمند بلافاصله ابزار Full Page Screenshot را نمایش می‌دهد. نیازی به جستجو در منوها نیست.

از آنجا، شما سه گزینه ساده خواهید دید، هر کدام برای یک سناریوی مختلف:

• ناحیه قابل مشاهده: این دقیقاً آنچه را که در حال حاضر بر روی صفحه شماست، ضبط می‌کند، شبیه به یک اسکرین‌شات استاندارد اما بدون تمام کروم مرورگر.
• انتخاب سفارشی: برای تمرکز بر روی یک نمودار، تصویر یا نقل قول خاص عالی است. فقط کلیک کنید و بکشید تا یک کادر دور آنچه نیاز دارید بکشید.
• کل صفحه: این همان چیزی است که ما به دنبالش هستیم. آن را انتخاب کنید و ابزار به طور خودکار به پایین صفحه اسکرول می‌کند، همه چیز را ضبط کرده و به یک تصویر کامل و یکپارچه تبدیل می‌کند.

پس از انتخاب یک گزینه، ضبط در چند ثانیه آماده است. سپس می‌توانید آن را به عنوان یک فایل PNG یا JPEG ذخیره کنید. کل جریان—از احضار پالت تا ذخیره فایل شما—می‌تواند کمتر از پنج ثانیه طول بکشد.

جادوی واقعی رویکرد ShiftShift فقط در ضبط خود نیست، بلکه در این است که چگونه به آرامی در سایر وظایف جا می‌گیرد. این ابزارهای تخصصی را از سیلوهای خود خارج کرده و آنها را در یک جریان کاری درخواستی واحد قرار می‌دهد.

این نوع ادغام یک صرفه‌جویی بزرگ در زمان است. تصور کنید که شما یک طراح هستید که در حال ساخت یک تخته حال و هوا هستید. می‌توانید یک اسکرین‌شات کامل از یک سایت ضبط کنید و سپس، بدون ترک Command Palette، بلافاصله ابزار Image Converter را برای تبدیل آن به یک فایل WebP برای عملکرد بهتر راه‌اندازی کنید. ابزارهای مستقل نمی‌توانند چنین تجربه‌ای را ارائه دهند.

چرا ادغام و حریم خصوصی مهم است

آنچه واقعاً رویکرد ShiftShift را متمایز می‌کند، اصول اساسی آن است: حریم خصوصی و عملکرد. در دنیایی که همه ما نسبت به داده‌های خود آگاه‌تر هستیم، این یک موضوع بزرگ است.

• پردازش 100% محلی: هر عمل، از خود اسکرین‌شات تا تبدیل یک فایل، درست در داخل مرورگر شما انجام می‌شود. هیچ چیزی هرگز به یک سرور از راه دور ارسال نمی‌شود.
• کاملاً آفلاین کار می‌کند: از آنجا که همه چیز به صورت محلی انجام می‌شود، می‌توانید از ابزار اسکرین‌شات و سایر ابزارها حتی اگر اینترنت شما قطع شود، استفاده کنید.
• طراحی با تمرکز بر حریم خصوصی: این افزونه فعالیت شما را ردیابی نمی‌کند و هیچ یک از اطلاعات شخصی شما را جمع‌آوری نمی‌کند. آنچه شما انجام می‌دهید در دستگاه شما باقی می‌ماند.

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

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

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

وقتی که اسکرین‌شات‌های تمام صفحه به مشکل می‌خورند

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

این یک تجربه رایج است، اما نگران نباشید—بیشتر این اشکالات راه‌حل‌های surprisingly ساده‌ای دارند. با توجه به اینکه پیش‌بینی می‌شود جمعیت آنلاین جهانی به 68% برسد، نیاز به سوابق بصری تمیز و دقیق برای تحلیل و مستندسازی تنها در حال افزایش است. می‌توانید به عمق آخرین روندهای تعامل وب‌سایت بپردازید تا ببینید چقدر تعامل دیجیتال در حال وقوع است.

بیایید به برخی از رایج‌ترین مشکلاتی که دیده‌ام بپردازیم و مهم‌تر از آن، چگونه آن‌ها را حل کنیم.

مقابله با هدرها و فوترهای چسبنده

این احتمالاً بزرگ‌ترین مشکلی است که مردم با آن مواجه می‌شوند. شما آن نوارهای ناوبری یا ویجت‌های چت را می‌شناسید که در حین اسکرول به بالای یا پایین صفحه چسبیده‌اند؟ آن‌ها به عنوان عناصر "چسبنده" یا "ثابت" شناخته می‌شوند.

زمانی که یک ابزار اسکرین‌شات صفحه را تکه‌تکه ضبط می‌کند و آن‌ها را به هم می‌چسباند، ممکن است به طور تصادفی آن هدر چسبنده را در هر بخش ضبط کند. تصویر نهایی با یک هدر تکراری ناامیدکننده که محتوای شما را پوشش می‌دهد، به پایان می‌رسد.

نکته حرفه‌ای: برخی از افزونه‌های هوشمند مرورگر برای مدیریت این موضوع ساخته شده‌اند. به عنوان مثال، ابزاری مانند آن از ShiftShift معمولاً به اندازه کافی هوشمند است که این عناصر ثابت را شناسایی کرده و تصویر نهایی را به درستی به هم بچسباند و از تکرار جلوگیری کند.

اگر ابزار شما آنقدر پیشرفته نیست، یک راه‌حل سریع دستی وجود دارد. از ابزارهای توسعه‌دهنده مرورگر خود برای پنهان کردن موقت عنصر استفاده کنید. فقط روی هدر چسبنده کلیک راست کنید، "Inspect" را انتخاب کنید، کد آن را پیدا کنید و یک قانون سبک سریع مانند display: none; اضافه کنید. مشکل حل شد.

چرا تصاویر من گم شده‌اند؟

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

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

• اول، یک اسکرول آهسته انجام دهید. قبل از اینکه حتی به فکر فشار دادن دکمه ضبط باشید، به صورت دستی تا انتهای صفحه اسکرول کنید. عجله نکنید.
• سپس، فقط یک ثانیه صبر کنید. به تمام تصاویر و محتوای دیگر یک لحظه زمان بدهید تا به طور کامل بارگذاری شوند.
• حالا، اسکرین‌شات را فعال کنید.

این حرکت کوچک همه چیز را در کش مرورگر بارگذاری می‌کند، بنابراین همه چیز آنجا و آماده است وقتی که ابزار کار خود را انجام می‌دهد. تقریباً هر بار به خوبی کار می‌کند.

ضبط صفحات پشت یک ورود

آیا سعی دارید از یک داشبورد خصوصی یا یک صفحه مخصوص اعضا اسکرین‌شات بگیرید؟ اینجاست که بسیاری از خدمات اسکرین‌شات مبتنی بر وب شکست می‌خورند. آن‌ها نمی‌توانند صفحه را ببینند زیرا، خوب، به عنوان شما وارد نشده‌اند.

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

هیچ اعتبارنامه‌ای برای به اشتراک گذاشتن وجود ندارد و هیچ تنظیمات پیچیده‌ای لازم نیست. شما فقط به صفحه می‌روید و روی ضبط کلیک می‌کنید. این یک رویکرد امن و محلی است که به سادگی کار می‌کند.

راهنمای سریع عیب‌یابی

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

حل مشکلات رایج اسکرین‌شات

به این جدول به عنوان خط اول دفاع خود فکر کنید. نه بار از ده، یکی از این تنظیمات ساده شما را به اسکرین‌شات تمیز و دقیقی که به دنبالش بودید، می‌رساند.

گرفتن اسکرین‌شات‌های اسکرول در تلفن شما

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

خوشبختانه، دیگر نیازی به جستجوی برنامه‌های شخص ثالث ندارید. هم iOS و هم Android ویژگی‌های داخلی زیبا و کارآمدی دارند که این کار را به خوبی انجام می‌دهند. چه در حال ذخیره یک مقاله طولانی برای پرواز باشید، چه آرشیو کردن یک تأییدیه سفارش آنلاین، یا فقط نگه‌داشتن سوابق از سایت موبایل یک رقیب، به طرز شگفت‌انگیزی ساده است که یک تصویر تمیز و پیوسته از یک وب‌سایت کامل بگیرید.

ضبط صفحات کامل در آیفون

اگر در آیفون هستید، اپل یک ابزار ضبط صفحه کامل فوق‌العاده را به طور مستقیم در سافاری تعبیه کرده است. این یکی از آن ویژگی‌های زیبا و "فقط کار می‌کند" است. تنها نکته؟ خروجی نهایی را به عنوان یک PDF ذخیره می‌کند، نه یک فایل تصویر استاندارد مانند PNG. برای آرشیو یا به اشتراک‌گذاری اسناد، این اغلب حتی بهتر است.

این فرآیند مانند هر اسکرین‌شات دیگری که می‌خواهید بگیرید، آغاز می‌شود.

1. اول، وب‌سایتی را که نیاز دارید در سافاری ذخیره کنید، باز کنید.
2. ترکیب اسکرین‌شات معمولی را برای مدل آیفون خود فشار دهید (این معمولاً دکمه جانبی و دکمه افزایش صدا به طور همزمان است).
3. یک پیش‌نمایش کوچک در گوشه پایین سمت چپ ظاهر خواهد شد. شما باید بلافاصله روی آن ضربه بزنید قبل از اینکه ناپدید شود.

پس از اینکه روی پیش‌نمایش ضربه زدید، به صفحه ویرایش منتقل خواهید شد. به بالای صفحه نگاه کنید و دو گزینه را خواهید دید: "صفحه نمایش" و "صفحه کامل."

فقط روی "صفحه کامل." ضربه بزنید. پیش‌نمایشی از کل صفحه قابل اسکرول در سمت راست ظاهر خواهد شد. شما حتی می‌توانید نوار لغزنده کوچک را بکشید تا همه چیز را مرور کنید و مطمئن شوید که همه چیزهایی که نیاز داشتید را ضبط کرده‌اید.

وقتی از آن راضی بودید، در گوشه بالا روی "انجام شد" ضربه بزنید و "ذخیره PDF به فایل‌ها" را انتخاب کنید. و همین. شما یک PDF کاملاً حفظ شده از سایت دارید که آماده استفاده است. من این روش را برای محتوای متنی مانند پست‌های وبلاگ یا مقالات خبری بسیار مؤثر می‌دانم.

گرفتن اسکرین‌شات اسکرولینگ در اندروید

در دنیای اندروید، اوضاع کمی پراکنده‌تر است، اما خبر خوب این است که بیشتر گوشی‌های مدرن از گوگل، سامسونگ، وان‌پلاس و دیگران دارای ویژگی بومی برای این کار هستند. ممکن است به آن "اسکرین‌شات اسکرولینگ"، "ضبط اسکرول" یا چیزی مشابه گفته شود، اما ایده همان است.

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

• دکمه‌های قدرت و کاهش صدا را به طور همزمان فشار دهید.
• یک پیش‌نمایش ظاهر خواهد شد، اما شما همچنین یک نوار ابزار کوچک در پایین خواهید دید. به دنبال یک آیکون با فلش‌های رو به پایین باشید که معمولاً با "ضبط بیشتر" یا "اسکرول" برچسب‌گذاری شده است.

ضربه زدن به آن دکمه باعث می‌شود که صفحه به طور خودکار به پایین اسکرول کند و بخش جدیدی به اسکرین‌شات شما اضافه شود. شما فقط باید به ضربه زدن به دکمه ادامه دهید تا همه چیزهایی که می‌خواهید را ضبط کنید. گوشی به طور هوشمند همه چیز را به یک تصویر طولانی متصل می‌کند.

پس از اینکه به انتهای صفحه رسیدید یا بخشی که نیاز دارید را ضبط کردید، فقط در هر نقطه‌ای از صفحه ضربه بزنید تا فرآیند متوقف شود. اسکرین‌شات نهایی و کشیده به طور مستقیم به گالری عکس شما به عنوان یک تصویر واحد (معمولاً PNG یا JPG) ذخیره می‌شود که برای زمانی که به یک رکورد بصری نیاز دارید، عالی است.

این روش در بیشتر سایت‌ها به خوبی کار می‌کند. با این حال، من دیده‌ام که در صفحات با طرح‌های بسیار پیچیده یا عناصری که به محض اسکرول بارگذاری می‌شوند (بارگذاری تنبل) دچار مشکل می‌شود. اگر اسکرین‌شاتی با تصاویر گم‌شده یا تراز نامناسب دریافت کردید، این یک نکته حرفه‌ای است: قبل از اینکه فرآیند اسکرین‌شات را شروع کنید، خودتان به پایین صفحه اسکرول کنید قبل از اینکه شروع کنید. این باعث می‌شود که تمام محتوا بارگذاری شود و ابزار ضبط یک صفحه کامل برای کار داشته باشد.

انتخاب روش مناسب اسکرین‌شات برای کار شما

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

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

تناسب ابزار با کاربر

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

• برای مهندس QA: کار شما به دقت وابسته است. Chrome DevTools ابزار اصلی شما برای شناسایی مشکلات طراحی واکنش‌گرا و مستندسازی اشکالات بصری با دقت کامل است. اما برای ضبط سریع جریان‌های کاربری یا علامت‌گذاری اشکالات جزئی UI، یک افزونه مانند ShiftShift بسیار سریع‌تر است و شما را در حالت کار نگه می‌دارد.
• برای بازاریاب: شما به طور مداوم تبلیغات رقبای خود را بایگانی می‌کنید، صفحات فرود زیبا را برای الهام ذخیره می‌کنید و کمپین‌های خود را مستند می‌کنید. سرعت و سازماندهی همه چیز است. یک افزونه مرورگر قابل اعتماد بهترین دوست شماست که به شما اجازه می‌دهد بدون هیچ زحمتی تصاویر را ضبط، ذخیره و مرتب کنید.
• برای کاربر روزمره: آن را ساده نگه دارید. ابزارهای اسکرین‌شات داخلی در Firefox، Edge یا روی گوشی شما بیشتر از حد کافی هستند. آن‌ها تمیز، آسان برای استفاده و قادر به مدیریت بیشتر نیازهای روزمره بدون هیچ بارگیری اضافی یا منحنی یادگیری تند هستند.

وقتی از میز خود دور هستید، انتخاب حتی ساده‌تر است، همانطور که این درخت تصمیم برای اسکرین‌شات‌های موبایل نشان می‌دهد.

همانطور که می‌بینید، هم iOS و هم Android به شما یک روش بومی برای ضبط یک صفحه کامل اسکرولینگ می‌دهند، اگرچه مراحل دقیق و نتیجه نهایی ممکن است کمی متفاوت باشد.

هدف این است که فراتر از فقط دانستن چگونه بروید و شروع به درک کی و چرا کنید. این رویکرد استراتژیک زمان را صرفه‌جویی می‌کند و اطمینان می‌دهد که همیشه نتیجه کاملی به دست می‌آورید.

در نهایت، داشتن یک ابزار چندمنظوره در جیب شما بی‌نظیر است. گاهی اوقات یک تصویر ثابت کافی نیست و ممکن است به چیزی پویا‌تر نیاز داشته باشید، مانند ایجاد راهنماهای تعاملی مرحله به مرحله برای مستندات آموزشی یا پشتیبانی. اگر به دنبال یک ابزار قدرتمند هستید که اسکرین‌شات‌ها را با ویژگی‌های ویرایش ترکیب کند بدون اینکه هزینه بالایی داشته باشد، یک جایگزین رایگان Snagit می‌تواند برای جریان کار شما مناسب باشد.

سؤالی دارید؟ ما پاسخ داریم

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

بهترین فرمت برای ذخیره اسکرین‌شات چیست؟

این واقعاً به این بستگی دارد که شما از اسکرین‌شات برای چه چیزی استفاده می‌کنید. برای بیشتر چیزها، به ویژه هر چیزی با متن یا عناصر رابط کاربری تیز، PNG بهترین گزینه شماست. این یک فرمت "بدون افت" است، که یک راه شیک برای گفتن این است که هیچ داده‌ای را برای کوچک‌تر کردن فایل دور نمی‌اندازد، بنابراین شما هر بار یک تصویر کامل و واضح دریافت می‌کنید.

اما اگر نیاز دارید که آن اسکرین‌شات را ایمیل کنید یا به یک ابزار مدیریت پروژه با محدودیت‌های اندازه فایل بارگذاری کنید چه؟ در اینجا JPEG مفید است. این فرمت فایل را به طور قابل توجهی کوچک می‌کند، اما این کار را با قربانی کردن کمی کیفیت انجام می‌دهد. برای اشتراک‌گذاری عمومی، معمولاً کاملاً خوب است، اما برای بازخورد طراحی دقیق یا گزارش اشکال، با PNG بمانید.

قاعده من: از PNG برای کیفیت و دقت استفاده کنید. از JPEG زمانی استفاده کنید که یک فایل کوچک و آسان برای اشتراک‌گذاری مهم‌تر از جزئیات پیکسل‌به‌پیکسل باشد.

آیا واقعاً می‌توانم صفحه‌ای با اسکرول بی‌پایان ضبط کنم؟

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

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

آیا افزونه‌های مرورگر واقعاً ایمن هستند؟

این یک سؤال هوشمندانه است. شما حق دارید محتاط باشید، زیرا افزونه‌ها معمولاً به مجوز نیاز دارند تا آنچه را که روی صفحه شماست بخوانند. ترفند این است که با افزونه‌های معتبر که در مورد نحوه مدیریت داده‌های شما شفاف هستند، بمانید.

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

اگر به دنبال ابزاری سریع، خصوصی و قدرتمند هستید، اکوسیستم ShiftShift Extensions ارزش نگاهی دارد. این ابزار به شما فرمان اسکرین‌شات تمام صفحه و تعداد زیادی از دیگر ابزارها را در یک مکان می‌دهد. می‌توانید اطلاعات بیشتری درباره نحوه کارکرد آن در https://shiftshift.app بیابید.