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

Jecelyn Yeen

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

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

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

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

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

לדוגמה,

1. פתיחת המסוף
2. מזינים את הפקודה הבאה במסוף. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
3. הפקודה שלמעלה יוצרת הודעת Chrome DevTools is awesome..

בהמשך מופיעה רשימה של מציין פורמטים שנתמכים כרגע בכלי הפיתוח ל-Chrome.

החלה של מצייןי פורמטים מרובים

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

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

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

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

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

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

1. מזינים את הפקודה הבאה במסוף. 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.

סגנון עם רצפי 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. מזינים את הפקודה הבאה במסוף. js console.log('\x1B[41;93;4mHello\x1B[m');
2. הפקודה שלמעלה יוצרת הודעת Hello עם רקע אדום, טקסט צהוב וקווים תחתונים.

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

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

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

1. מזינים את הפקודה הבאה במסוף. ```js const hello = '\x1B[41;93;4mHello'; const רווח = '\x1B[m '; const World = '\x1B[34;102;9mWorld';

   Console.log(hello + Space + עולם); ```

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