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

Jecelyn Yeen

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

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

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

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

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

לדוגמה,

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

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

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

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

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

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

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

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..

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 חלים.

סגנון עם רצפי Escape מסוג 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.

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

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

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 סגנונות שונים.