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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1339771

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

ב-DevTools שיפרו את הדגשת התחביר בתבניות HTML של Angular, כדי שיהיה לכם קל יותר לקרוא את הקוד ולזהות את המבנה שלו. הדגשת תחביר לתבניות 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)
  • כדי להקל על ניפוי הבאגים, DevTools תומך עכשיו בהערכת ביטויים עם חברים פרטיים בכיתה. ‪(1381806) הערכת ביטויים עם חברים פרטיים בכיתה.

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

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

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

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

  • אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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