צילומי מסך בקלות עם פיירפוקס

בעקבות שאלה שעלתה בפייסבוק נזכרתי ברשומה שכבר זמן רב רציתי לכתוב על כלי שורת הפקודה של פיירפוקס שהתווסף באחת מהגרסאות האחרונות של פיירפוקס. כלי שורת הפקודה מיועד בעקרון למפתחים, אך גם משתמשים מתקדמים ימצאו בו שימוש, וניתן כמובן להרחבה באמצעות יצירה של פקודות נוספות. ניתן לגשת לשורת הפקודה בכל עת דרך תפריט כלי הפיתוח ← סרגל כלים מפתחים, או ישירות באמצעות לחיצה על Shift-F2. הפקודה help תאפשר לכם לצפות ברשימת הפקודות, וניתן לבקש את דף העזרה עבור כל פקודה בדרך דומה (למשל help pagemod). תכונה זו נמצאת בפיתוח מתמיד, וצפו לשינויים בדרך הפעולה והשימוש בה בגרסאות הבאות של פיירפוקס.

אחת הפקודות שמוגדרות מראש, ולדעתי גם אחת מהשימושיות בניהן, היא האפשרות לצלם את תוכן הדף. לא צריכים עוד הרחבה מיוחדת לשם כך, ואפילו לא לבצע הדפסה של הדף ל־PDF שלעתים קרובות מאבד קצת מהעיצוב, אפשר פשוט לקרוא לפקודה screenshot ולקבל באופן מיידי את תוכן הדף כקובץ תמונה. אפשרות הצילום כוללת כמובן אפשרות לצלם את התוכן הנראה של הדף, כמו גם את כל הדף במלואו (כולל גלילה) ואפילו אפשרות לצלם חלק מהתוכן שבדף, רק שבמקום לבחור מסגרת כמו ביישומים אחרים לצילום מסך בוחרים את רכיב השורש ב־DOM.

screenshot <filename> [delay] [fullpage] [node]

  • filename – שם הקובץ אליו תישמר תמונה מסוג png. אם לא הוגדר מיקום אבסולוטי התמונה תישמר בתיקיית ההורדות.
  • delay – השהייה לפני צילום התמונה
  • fullpage – האם לצלם את החלק הנראה של תוכן הדף או את הדף במלואו כולל גלילה?
  • node – רכיב השורש לצילום

הרכיב הראשון הנו חובה, ומהווה את שם הקובץ שישמר. שאר הפרמטרים אינם חובה, אבל אם יצוינו נוכל לבצע גם פעולות נוספות כמו הגדרת השהייה לפני צילום וכו'.

לדוגמה, כדי לצלם את תוכן החלק הנראה של הדף נשתמש בפקודה הבאה:
screenshot image.png


כדי לצלם את תוכן הדף במלואו ולא רק את החלק הנראה ניתן ערך true ל־fullscreen, אבל שימו לב שחובה לציין את הערך של delay לפניו, ולכן נוסיף שם 0.

screenshot image.png 0 true

(רציתי להוסיף תצלום מסך של הדף הפותח של ynet בו הגלילה הרבה יותר מורגשת, אבל אורך הגלילה בדף עצומה ולכן יהיה קשה להבחין בפרטים בתמונה הממוזערת)

בגרסאות מתקדמות יותר של פיירפוקס (נכון לזמן כתיבת שורות אלו – בטא ואורורה) מתווספות מספר אפשרויות נוספות כמו גם מעבר מפרמטרים רגילים להעברת פרמטרים בצורה דומה ל־getopts, כלומר לא צריך לציין את כל הפרמטרים הקודמים בצורה מייגעת אלא אפשר פשוט לציין את ערכו של הפרמטר המבוקש עם –.

screenshot [filename] [clipboard] [chrome] [delay] [fullpage] [selector]

  • filename – שם הקובץ אליו תישמר תמונה מסוג png. אם לא הוגדר מיקום אבסולוטי התמונה תישמר בתיקיית ההורדות.
  • clipboard – האם להעתיק את תוכן התמונה לזיכרון במקום לשמור את הקובץ?
  • chrome – האם לצלם את הדפדפן כולו או רק את תוכן הדף?
  • delay – השהייה לפני צילום התמונה
  • fullpage – האם לצלם את החלק הנראה של תוכן הדף או את הדף במלואו כולל גלילה?
  • selector – רכיב השורש לצילום

screenshot image.png --fullpage=true
screenshot --clipboard --chrome

ה־selector (בגרסאות קודמות מזוהה בשם node) מאפשר לצמצם את השטח המצולם לאזור מסוים בדף הנגיש באמצעות document.querySelector. במילים פשוטות מדובר על טכניקה לזיהוי רכיבים בדף בדומה לדרך הפעולה של CSS (ולא document.getElementById או שיטות דומות). במידה שאותו בורר מצביע על יותר מרכיב אחד בדף, רק הרכיב הראשון בדף יסומן.

screenshot --selector "#brandLogo" --clipboard

5 תגובות בנושא “צילומי מסך בקלות עם פיירפוקס”

  1. גיליתי את האפשרות הזו לפני כמה שבועות ומאוד התלהבתי אבל יש לזה שני חסרונות ביחס לתכנות אחרות. זה דורש לזכור פקודות ולהקליד אותן ואין לזה העלאה אוטומטית לאתרי שיתוף תמונות.

    1. בצילום מסך לדעתי כדאי להשתמש במקלדת, או בתוכנה(אני מאוהב בjing). חוץ מהDelay אין פה משהו שאין בתוכנות אחרות, ובג'ינג לדוגמה אפשר לבחור חלון מסויים מאוד מהעמוד ולסמן אותו ואז להקליט בוידאו או לצלם את המסך בחלק זה. לגבי השורה בכללי, אני מתכנת כבר הרבה זמן ותמיד השתמשתי בתוסף הנהדר FireBug(מומלץ לכולם) שעושה את כל מה שיש שם והרבה הרבה יותר.

      1. צילום מסך "מהמקלדת", כהגדרתך, מתבצע מן הסתם בתוכנה כלשהי, אלא שמדובר בתוכנה שמגיעה יחד עם מערכת ההפעלה שלך ולכן נוצרת התחושה כאילו זה מתבצע ללא תוכנה. השימוש המקורי של הכפתור במקלדת, אגב, הוא בכלל להדפיס את תוכן המסך [הטקסטואלי] במדפסת שמחוברת למחשב.

        אפשרות ההשהיה היא משהו שקיים בתוכנות צילום מסך רבות, ונועד למקרים בהם ברצונך לבצע סט מסוים של פעולות לפני שתילקח התמונה, מה שלעתים בלתי אפשרי כאשר כפתור הצילום מוציא את המשתמש מהתפריטים וכדומה.

        הייחוד בכלי צילום המסך המדובר ברשומה זו הוא שמדובר בכלי מובנה בדפדפן שמסוגל לצלם את תוכן הדף ולאו דווקא את תוכן החשוף שלו למשתמש, ויכול גם לצלם רכיב מסוים בדף מבלי שהמשתמש יידרש לסמן אותו במסגרת או למחוק ידנית מהתמונה הסופית את הפרטים שאינם נחוצים בצילום. הוא לא מיועד להחליף תוכנות צילום מסך אחרות וכדאי להכיר את הכלים של פיירפוקס לפני שמבצעים השוואה שלהם לכלים אחרים.

        לגבי פיירבאג, עם כל הכבוד לפיירבאג הכלים שהוא מביא אינם מושלמים ולעתים גם משפיעים על ביצועי הדפדפן. כמו־כן, עצם העובדה שיש להתקינם ידנית פוגעת ביכולותיו של משתמש מתקדם להתיישב מול הדפדפן במחשב זר ולבצע באופן מידי מניפולציות על תוכן הדף. פיירבאג לא נועד להחליף את כלי הפיתוח המובנים בדפדפן והם לא נועדו להחליף את פיירבאג; למעשה חלקים נרחבים מפיירבאג מפותחים בתוך מוזילה וכאשר נדרשים לחשוף ממשק פיתוח עבור פיירבאג למעשה גם הכלים המובנים נחשפים אליו, ופיירבאג עצמו עושה שימוש בכלי הפיתוח המובנים בדפדפן כדי להעשיר אותם ולאפשר להיעזר בפיירבאג כהשלמה לכלים המובנים בדפדפן. למשל בכלי שורת הפקודה שכתבתי עליו ברשומה זו תוכל להשתמש בפקודה firebug כאשר ההרחבה הנ"ל מותקנת על הדפדפן שלך כדי להעביר הוראות לפיירבאג.

  2. נחמד מאוד… שמעתה על Firefox OS?
    זו יכולה להיות יכולת מועילה מאוד עבור מערכת ההפעלה..

    1. לא רק ששמעתי על זה, אלא שיש ברשותי גם מכשיר שמריץ Firefox OS. ☺

      אני אודה לך מאד אם תגיב לרשומות אצלי תחת שם בעל משמעות כלשהי ולא עם שם וקישור שמטרתם היא לסחוט על גבי קישורים לאתרים שאתה מנסה לקדם. כל פעם שאני רואה תגובה חדשה ממך אני מתלבט אם יש בכלל טעם לאשר אותה או שפשוט אמחק אותה מבלי לתת לה להתפרסם באתר.

השאר תגובה