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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

מקשי קיצור מותאמים אישית ל-Recorder

שימוש במקשי קיצור כדי להקליט ולנגן מחדש תהליכי שימוש מהר יותר.

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

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

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

אם אתם עובדים בחלונית אחרת ואתם רוצים להתחיל להקליט תהליך שימוש, תוכלו להשתמש בפקודה Create a new recording (יצירת הקלטה חדשה) מתפריט הפקודות ב-DevTools כדי להתחיל. יוצרים פקודה חדשה להקלטה.

בעיה ב-Chromium: 1339771

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

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

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

סידור מחדש של המטמון בחלונית האפליקציות

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

בעיה ב-Chromium: 1407166

רגעי שיא שונים

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.