עיצוב וסגנון של הודעות ב-Play Console

Jecelyn Yeen

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

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

עיצוב הודעות במסוף

אפשר להשתמש במפרטי הפורמט כדי לעצב את ההודעות במסוף.

מפרטי הפורמט מתחילים בתווית אחוז (%) ומסתיימים ב'תו סוג' שמציין את סוג הנתונים (מספר שלם, מספר ממשי וכו').

לדוגמה,

  1. פתיחת המסוף

  2. מזינים את הפקודה הבאה במסוף.

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. הפקודה שלמעלה מחזירה את ההודעה Chrome DevTools is awesome.. ערך של מחרוזת עיצוב

זוהי רשימת מזהי הפורמט שכלי הפיתוח של Chrome תומכים בהם כרגע.

ספציפיקציה פלט
%s עיצוב הערך כמחרוזת
%i או %d עיצוב הערך כמספר שלם
%f עיצוב הערך כערך נקודה צפה (floating-point)
%o עיצוב הערך כרכיב DOM שניתן להרחבה
%O עיצוב הערך כאובייקט JavaScript שניתן להרחבה
%c החלת כללי סגנון CSS על מחרוזת הפלט כפי שצוין בפרמטר השני

החלה של מספר מפרטים של פורמט

אפשר להשתמש ביותר מפריט אחד של ציון פורמט בהודעה.

  1. מזינים את הפקודה הבאה במסוף.

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. הפקודה שלמעלה מחזירה את ההודעה The total weight of 3 apples and 2 oranges is 432.4 grams.. מספר ספציפיות של פורמטים

הסבר על המרות בין טיפוסים

הודעת הפלט תועבר בהתאם למפרט הפורמט.

  1. מזינים את הפקודה הבאה במסוף.

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. הפקודה שלמעלה מחזירה את ההודעה I have 2 apples and 3 oranges.. עיצוב ערכים של מספרים שלמים

  3. במקום לרשום ביומן את הערך 3.5 oranges, הפלט הוא 3 oranges. הערך %d מציין שהערך צריך או יומיר למספר שלם.

דוגמה למה שקורה אם המרה של סוג לא חוקית.

  1. מזינים את הפקודה הבאה במסוף.

    console.log('Jane has %i kiwis.', 'two');

  2. הפקודה שלמעלה מחזירה את ההודעה Jane has NaN kiwis.. NaN בהודעה במסוף

  3. הערך %i מציין שהערך צריך או יומיר למספר שלם, אבל הארגומנט הוא מחרוזת. לכן הפונקציה מחזירה את הערך NaN (Not-A-Number).

עיצוב הודעות במסוף

יש שתי דרכים לעצב הודעות במסוף ב-DevTools.

סגנון עם ספציפיקטור של פורמט

אפשר להשתמש במפרט הפורמט %c כדי להוסיף סגנון להודעות במסוף באמצעות CSS.

  1. מזינים את הפקודה הבאה במסוף.

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. הפקודה שלמעלה יוצרת את Hooray עם סגנונות CSS חלים. פלט סגנון באמצעות CSS

סגנון עם רצפי בריחה של ANSI

אפשר להשתמש ברצפי בריחה של ANSI כדי לעצב הודעות במסוף.

מפתחי Node.js נוהגים להוסיף צבע להודעות ביומן באמצעות רצפי בריחה של ANSI, לרוב בעזרת ספריות עיצוב כמו chalk, ‏ colors, ‏ ansi-colors, ‏ kleur.

עם זאת, אפשר לעצב את ההודעה באמצעות רצפי בריחה של ANSI בלי להשתמש בספריות. זהו התחביר:

\x1B[𝘗1;…;𝘗nm

איפה,

  • 𝘗1 עד 𝘗n הם רצפי משנה תקפים של פרמטרים של SGR‏ (Select Graphic Rendition).
  • אפשר להשמיט כל אחד מהפרמטרים 𝘗1 עד 𝘗n. במקרה כזה, הערך שלו יהיה אפס.
  • \x1B[m הוא הקיצור של \x1B[0m, שבו מאפיין התצוגה יאפס.

לדוגמה,

  1. מזינים את הפקודה הבאה במסוף.

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. הפקודה שלמעלה יוצרת הודעה מסוג Hello עם רקע אדום, טקסט צהוב ותחתית קו. שלום

זו רשימה של קודי הצבעים הנתמכים ב-DevTools.

חזית רקע עיצוב בהיר עיצוב כהה
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

זוהי רשימה של קודי עיצוב שנתמכים ב-DevTools.

פרמטרים משמעות
0 איפוס כל מאפייני התצוגה
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 הוספת underline לנכס text-decoration
9 הוספת line-through לנכס text-decoration
22 איפוס של נכס font-weight
23 איפוס של נכס font-style
24 הסרת underline מהנכס text-decoration
29 הסרת line-through מהנכס text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 איפוס הcolor property
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 איפוס הbackground property
53 הוספת overline לנכס text-decoration
55 הסרת overline מהנכס text-decoration

הנה דוגמה מורכבת יותר עם כמה סגנונות.

  1. מזינים את הפקודה הבאה במסוף.

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. הפקודה שלמעלה יוצרת הודעה מסוג Hello World עם 3 סגנונות שונים. שלום עולם