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

Kayce Basques

אמולציה של לקויות ראייה

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

יצירת אמולציה לראייה מטושטשת.

יצירת אמולציה לראייה מטושטשת.

כלי הפיתוח יכולים לדמות ראייה מטושטשת וסוגי לקויות ראייה הבאים:

  • עיוורון לאדום: חוסר היכולת לזהות אור אדום.
  • עיוורון לירוק: חוסר היכולת לזהות אור ירוק.
  • טריטנופיה: חוסר היכולת לזהות אור כחול.
  • עיוורון צבעים מוחלט: חוסר היכולת לזהות אף צבע מלבד גוונים של אפור (נדיר ביותר).

יש גרסאות פחות קיצוניות של הליקויים האלה בראיית הצבעים, והן למעשה נפוצות יותר. לדוגמה, פרוטנומליה היא רגישות מופחתת לאור אדום (בניגוד לפרוטוניה, שהיא חוסר יכולת מוחלטת לזהות אור אדום). עם זאת, הבעיות האלה בראייה מסוג '-omaly' לא מוגדרות בצורה ברורה: כל אדם עם בעיה כזו בראייה שונה, ויכול לראות דברים בצורה שונה (יכולת לזהות יותר או פחות מהצבעים הרלוונטיים).

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

אפשר לשלוח משוב בבעיה מס' 1003700 ב-Chromium או לקרוא מידע נוסף על ההטמעה.

הדמיה של לוקאלים

עכשיו אפשר לדמות אזורים גיאוגרפיים על ידי הגדרת מיקום בקטע חיישנים > מיקום. פותחים את תפריט הפקודות ומקלידים Sensors כדי לגשת לכרטיסייה Sensors. אחרי ביצוע הפעולות האלה, DevTools משנה את הגדרת ברירת המחדל הנוכחית של השפה והאזור, ומשפיע על הגורמים הבאים:

  • ממשקי API של Intl.*, למשל new Intl.NumberFormat().resolvedOptions().locale
  • ממשקי API אחרים של JavaScript שמותאמים לאזור גיאוגרפי, כמו String.prototype.localeCompare ו-*.prototype.toLocaleString, למשל 123_456..toLocaleString()
  • ממשקי API של DOM, כמו navigator.language ו-navigator.languages
  • כותרת בקשת ה-HTTP Accept-Language

כדאי לעיין בדוגמה לקוד שמבוסס על אזור כדי לנסות זאת בעצמכם.

אפשר לשלוח משוב בנושא בעיה מס' 1051822 ב-Chromium.

ניפוי באגים של מדיניות כלי להטמעה ממקורות שונים (COEP)

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

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

בקשות חסומות בעמודת הסטטוס

בקטע Response Headers בכרטיסייה Headers מפורטות הנחיות נוספות לפתרון הבעיות:

הנחיות נוספות מפורטות בקטע 'כותרות התגובה'

אפשר לשלוח משוב בנושא בעיה מס' 1051466 ב-Chromium.

סמלים חדשים לנקודות עצירה, לנקודות עצירה מותנות ולנקודות רישום (logpoints)

בחלונית מקורות יש סמלים חדשים לנקודות עצירה, לנקודות עצירה מותנות ולנקודות ביומן:

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

אפשר לשלוח משוב בנושא בעיה מס' 1041830 ב-Chromium.

אפשר להשתמש במילות המפתח החדשות של המסנן cookie-path בחלונית Network כדי להתמקד בבקשות הרשת שמגדירות נתיב קובץ cookie ספציפי.

במאמר סינון בקשות לפי נכסים מפורט מידע נוסף על מילות מפתח מיוחדות כמו cookie-path.

הצמדה לצד ימין מתפריט הפקודות

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

כלי הפיתוח מוצמדים בצד ימין של אזור התצוגה

אפשר לשלוח משוב בנושא בעיה מס' 1011679 ב-Chromium.

האפשרות Settings בתפריט הראשי הועברה

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

'תפריט ראשי' פתוח עם 'כלים נוספים' שמתמקד ב 'הגדרות'

אפשר לשלוח משוב בנושא בעיה מס' 1050855 ב-Chromium.

החלונית ביקורות נקראת עכשיו Lighthouse

צוותי DevTools ו-Lighthouse קיבלו משוב לעיתים קרובות ממפתחי אתרים, על כך ששמעו שאפשר להריץ את Lighthouse מ-DevTools, אבל כשהם ניסו, הם לא מצאו את החלונית 'Lighthouse'. לכן, החלונית Audits היא עכשיו החלונית Lighthouse.

החלונית של Lighthouse

מחיקת כל השינויים המקומיים בתיקייה

אחרי שמגדירים שינוי מקומי, אפשר ללחוץ לחיצה ימנית על תיקייה ולבחור באפשרות החדשה Delete all overrides כדי למחוק את כל השינויים המקומיים בתיקייה הזו.

מחיקת כל השינויים

שולחים משוב בנושא בעיה מס' 1016501 ב-Chromium.

עדכון ממשק המשתמש של המשימות הארוכות

משימה ארוכה היא קוד JavaScript שמשתלט על השרשור הראשי למשך זמן רב, וכתוצאה מכך דף האינטרנט קופא.

כבר הרבה זמן אפשר להציג גרפית משימות ארוכות בחלונית הביצועים, אבל ב-Chrome 83 ממשק המשתמש של התצוגה הגרפי של המשימות הארוכות בחלונית הביצועים עודכן. החלק של המשימה 'משימה ארוכה' צבוע עכשיו ברקע אדום מפוספס.

ממשק המשתמש החדש של משימות ארוכות

אפשר לשלוח משוב בנושא בעיה מס' 1054447 ב-Chromium.

תמיכה בסמלים שניתנים למיסוך בחלונית המניפסט

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

מסמנים את התיבה החדשה יש להציג רק את האזור הבטוח המינימלי לסמלים שניתנים למיסוך בחלונית Manifest כדי לבדוק שהסמל שניתן למיסוך ייראה טוב במכשירי Android Oreo. מידע נוסף זמין במאמר הסמלים הנוכחיים שלי מוכנים?

תיבת הסימון 'יש להציג רק את האזור הבטוח המינימלי לסמלים שניתנים למיסוך'

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

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

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

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

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

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