מה חדש בכלי הפיתוח (Chrome 111)

Jecelyn Yeen

ניפוי באגים בצבעי HD באמצעות חלונית הסגנונות

בקרוב יושקו באינטרנט סוגים ומרחבים חדשים של צבעי CSS. בנוסף, אנחנו שמחים להודיע על השקת כלים חדשים בכלי הפיתוח שיעזרו למפתחים ליצור, להמיר ולנפות באגים בצבעים באיכות HD.

בחלונית סגנונות יש עכשיו תמיכה ב-12 מרחבי צבעים חדשים וב-7 טווחי צבעים חדשים, כמו שמתואר במפרט CSS Color Level 4. כדי להבין את אפשרויות הצבעים שזמינות באינטרנט, אפשר לעיין במדריך הצבעים של CSS באיכות HD.

הנה דוגמאות להגדרות צבע CSS עם color(), ‏ lch(), ‏ oklab() ו-color-mix(). דוגמאות להגדרות צבע ב-CSS.

כשמשתמשים בפונקציה color-mix(), אפשר לראות את פלט הצבע הסופי בחלונית Computed. התוצאה של color-mix בחלונית Computed.

כלי בחירת הצבעים תומך בכל מרחבי הצבעים החדשים עם תכונות נוספות. לדוגמה, לוחצים על דוגמית הצבע color(display-p3 1 0 1). נוסף גם קו גבול של סולם הצבעים, שמבחין בין סולם הצבעים sRGB לבין סולם הצבעים display-p3, כדי להבין בצורה ברורה יותר את סולם הצבעים של הצבע שבחרתם. קו גבול של סולם צבעים.

ב-DevTools יש תמיכה בהמרת צבעים בין פורמטים שונים של צבעים. משתמשים בסמל שינוי פורמט הצבע כדי לגשת לחלון הקופץ של ההמרה, או פשוט משתמשים בצירוף המקשים Shift + לחיצה על דוגמית צבע בחלונית סגנונות. המרת צבעים בין פורמטים שונים של צבעים.

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

בנוסף, אפשר לבחור צבעים מהמסך באמצעות קיצור הדרך החדש. לוחצים על c כדי להפעיל את טפטפת הצבעים, ועל Escape כדי להשבית אותה. כלי הטפטפת דוגם צבעים רק במרחב הצבעים sRGB. לדוגמה, אם תנסו לדגום את הצבע color(display-p3 1 0 1), שנמצא מחוץ למרחב הצבעים sRGB, הכלי 'טפטפת' יגזור את הצבע לצבע הקרוב ביותר במרחב sRGB, שהוא מג'נטה color(display-p3 0.92 0.2 0.97).

מפעילים את הטפטפת.

לבסוף, הגדרת פורמט הצבע הוצאה משימוש כדי לפנות מקום לפורמט הצבע החדש של HD. הוצאה משימוש של הגדרת פורמט הצבע.

בעיות ב-Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

חוויית משתמש משופרת של נקודות עצירה

בחלונית Breakpoints (נקודות עצירה) שעוצבה מחדש, אפשר לגשת במהירות לתכונות נפוצות, במיוחד להשבתה, לעריכה ולהסרה של נקודות עצירה.

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

  • נקודות העצירה מקובצות לפי קובץ, מסודרות לפי מספרי שורות או עמודות, ואפשר לכווץ אותן. קיבוץ נקודות העצירה לפי קובץ.

  • יש אפשרויות חדשות להשבתה, להסרה ולעריכה של נקודות עצירה כשמעבירים את העכבר מעל נקודת עצירה או קובץ. אפשרויות חדשות להשבתת נקודות עצירה.

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

כאן מוסבר איך לנפות באגים באמצעות כלי הפיתוח.

בעיות ב-Chromium: 1407586, ‏ 1402891, ‏ 1402893

קיצורי דרך בהתאמה אישית ב-Recorder

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

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

לא זוכרים את קיצורי הדרך? אין בעיה, אפשר ללחוץ על הלחצן ? כדי לראות את כל קיצורי הדרך בכל שלב. מקשי הקיצור של מכשיר ההקלטה.

אפשר גם להתאים אישית את קיצורי הדרך האלה דרך תפריט ההגדרות. התאמה אישית של מקשי הקיצור ב'הקלטה'.

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

בעיה ב-Chromium: ‏ 1339771

הדגשת תחביר משופרת ל-Angular

ב-DevTools שיפרו את הדגשת התחביר בתבניות Angular HTML, כדי שיהיה לכם קל יותר לקרוא את הקוד ולזהות את המבנה שלו. הדגשת תחביר לתבניות HTML של Angular.

בעיות ב-Chromium: 1385374, 1385678

ארגון מחדש של קובצי מטמון בחלונית Application (אפליקציה)

החלונית Cache Storage נמצאת עכשיו בקטע Storage בחלונית Application, והחלונית Back/forward cache הועברה לקטע Background Services. קובצי מטמון בחלונית Application (אפליקציה).

בעיה ב-Chromium: ‏ 1407166

מידע חשוב נוסף

אלה כמה מהתיקונים הבולטים בגרסה הזו:

  • כלי הפיתוח עודכנו כך שיכבדו את ההגדרה השבתת המטמון כשמטעינים מפות מקור. (1407084)
  • בחלונית Elements (רכיבים), המיקוד האוטומטי עובר עכשיו באופן מיידי לרכיב הראשון שתואם לתוצאות החיפוש. (1381853)
  • תיקונים שונים לשיפור האמינות של מפת המקור ונקודות עצירה. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
  • כדי להקל על ניפוי הבאגים, כלי הפיתוח תומכים עכשיו בהערכת ביטויים עם חברים פרטיים בכיתה. ‪(1381806) הערכת ביטויים עם חברים פרטיים בכיתה.

הורדת ערוצי התצוגה המקדימה

מומלץ להשתמש ב-Chrome Canary,‏ Dev או Beta כדפדפן ברירת המחדל לפיתוח. ערוצי התצוגה המקדימה האלה מאפשרים לכם לגשת לתכונות העדכניות ביותר של DevTools, לבדוק ממשקי API מתקדמים של פלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם ייתקלו בהן.

יצירת קשר עם הצוות של כלי הפיתוח ל-Chrome

אפשר להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות, בעדכונים או בכל דבר אחר שקשור לכלי הפיתוח.

מה חדש בכלי הפיתוח

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