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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מקשי קיצור מותאמים אישית למכשיר ההקלטה

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

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

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

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

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

בעיה ב-Chromium: 1339771

הדגשת תחביר טובה יותר ל-Agular

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

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

ארגון מחדש של מטמון בחלונית Application

החלונית Cache Storage נמצאת עכשיו בקטע Storage בחלונית Application, והחלונית מטמון לדף הקודם/הבא הועברה לקטע Background Services. קובצי מטמון בחלונית האפליקציה.

בעיה ב-Chromium: 1407166

פרטים שונים

הנה כמה תיקונים חשובים בגרסה הזו:

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

הורדת הערוצים של התצוגה המקדימה

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

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

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

  • אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
  • כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   עוד > עזרה > דיווח על בעיות בכלי הפיתוח ב'כלי פיתוח'.
  • שליחת ציוץ אל @ChromeDevTools.
  • נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.

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

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