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

ג'סלין יין
ג'סלין יין
Twitter GitHub דף הבית

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

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

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

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

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

לדוגמה,

  1. פתיחת המסוף
  2. מזינים את הפקודה הבאה ב-Play Console. js 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. מזינים את הפקודה הבאה ב-Play Console. js 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. מזינים את הפקודה הבאה ב-Play Console. js 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. מזינים את הפקודה הבאה ב-Play Console. js console.log('Jane has %i kiwis.', 'two');
  2. הפקודה שלמעלה יוצרת הודעת Jane has NaN kiwis.. NaN בהודעת מסוף
  3. הפונקציה %i מציינת שצריך להמיר את הערך למספר שלם, אבל הארגומנט הוא מחרוזת. כלומר, הפונקציה מחזירה את הערך NaN (Not-A-Number).

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

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

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

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

  1. מזינים את הפקודה הבאה ב-Play Console. js 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 עורכים צבעי הודעות ביומן באמצעות רצפי Escape של ANSI, לרוב בעזרת ספריות עיצוב מסוימות כמו chalk, colors, ansi-colors ו-kleur.

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

\x1B[𝘗1;…;𝘗nm

איפה,

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

לדוגמה,

  1. מזינים את הפקודה הבאה ב-Play Console. js 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. מזינים את הפקודה הבאה ב-Play Console. ```js 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 סגנונות שונים. Hello World