التقط لقطات شاشة للصفحة باستخدام Devtools
كانت هناك أوقات كنت بحاجة فيها إلى عرض لقطة شاشة كاملة للعميل أو زميل الفريق للحالة الحالية لموقع الويب أو حتى جزء منه، لذلك كنت أستخدم Full Page Screen Capture، ولأي نوع آخر من لقطات الشاشة، أداة Snippet الخاصة بنظام Windows أو Snaggit. إذا كنت أرغب في استضافته عبر الإنترنت كما هو موضح في هذا المنشور Gyazo، والذي يحتوي أيضًا على أداة إنشاء صور GIF.
اكتشفت مؤخرًا أن Devtools يحتوي على أداة يمكنها التقاط لقطة شاشة للصفحة بأكملها، دون الحاجة إلى أي إضافات!
هذه ليست فكرة جديدة، فقد تم تضمينها في تحديث Devtools في أبريل 2017، ولكن يبدو أنني أعيش تحت صخرة ولم أعرف ذلك حتى الآن…
أدوات التطوير
كما هو مذكور في صفحة Devtools الرسمية:
Chrome DevTools عبارة عن مجموعة من أدوات مطوري الويب المضمنة مباشرة في متصفح Google Chrome. يمكن أن تساعدك أدوات DevTools على تحرير الصفحات بسرعة وتشخيص المشكلات بسرعة، مما يساعدك في النهاية على إنشاء مواقع ويب أفضل وبشكل أسرع.
تشغيل الأوامر في Devtools
أنت تعرف بالفعل كيفية فتح Devtools ولكن في حالة نسيانك للتو و من أجل هذا المنشور، افتحه باستخدام المفتاح F12 أو الاختصار Ctrl + Shift + I. ثم يتعين عليك فتح Run command في القائمة داخل Devtools أو استخدام Ctrl + Shift + P.
أداة لقطة الشاشة
إذا كتبت screenshot فسيتم تصفية الأوامر، وسيكون هناك 4 أنواع من طرق لقطات الشاشة التي يمكنك استخدامها:
- لقطة شاشة للمنطقة
- لقطة الشاشة بالحجم الكامل
- لقطة شاشة للعقدة
- التقاط لقطة للشاشة
قبل التحقق من جميع طرق لقطات الشاشة، وبعد انتهاء أدوات التطوير من معالجة الصورة، سيتم تنزيلها تلقائيًا باسم صفحة الويب.
لقطة شاشة للمنطقة
سيتيح لك area screenshot تحديد جزء من موقع الويب والتقاط لقطة شاشة.
النتيجة:
لقطة شاشة بالحجم الكامل
سيقوم full size screenshot بالتقاط لقطة شاشة لصفحة الويب بأكملها، من البداية إلى الأسفل.
النتيجة:
لقطة شاشة للعقدة
سيسمح لك node screenshot بعمل لقطة شاشة للعقدة المحددة في عنصر الفحص.
النتيجة:
التقاط لقطة للشاشة
سيقوم capture screenshot بالتقاط لقطة شاشة للصفحة الحالية دون التمرير وحجم المتصفح.
النتيجة:
