מה חדש בכלי הפיתוח (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 וקיבלו תווית טקסט כדי להסביר אותן בצורה ברורה יותר. אפשרויות להשהיית חריגים.

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1339771

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

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

בעיות ב-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

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

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

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