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

במדריך הזה מוסבר איך לעצב ולעצב הודעות במסוף כלי הפיתוח ל-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).

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

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

סגנון עם מציין הפורמט

אפשר להשתמש במגדיר הפורמט %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

סגנון עם רצפי Escape מסוג ANSI

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

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

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

\x1B[𝘗1;…;𝘗nm

איפה,

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

לדוגמה,

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

    console.log('\x1B[41;93;4mHello\x1B[m');
    
  2. הפקודה שלמעלה תפיק הודעת Hello עם רקע אדום, טקסט צהוב וקו תחתון. שלום

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

חזית רקע עיצוב בהיר עיצוב כהה
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

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

פרמטרים משמעות
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;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 איפוס הcolor property
48;2;R;G;B 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 סגנונות שונים. שלום עולם