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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59