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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

ב-DevTools אפשר לבצע אמולציה של ראייה מטושטשת ושל סוגים שונים של לקויות בראיית צבעים:

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

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

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

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

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

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

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

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

שליחת משוב אל Chromium issue #1051822.

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

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

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

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

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

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

שליחת משוב אל Chromium issue #1051466.

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

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

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

שליחת משוב אל Chromium issue #1041830.

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

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

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

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

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

שליחת משוב אל Chromium issue #1011679.

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

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

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

שליחת משוב אל Chromium issue #1050855.

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

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

החלונית Lighthouse

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

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

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

שליחת משוב לבעיה מספר 1016501 ב-Chromium.

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

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

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

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

שליחת משוב אל Chromium issue #1054447.

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

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

כדי לוודא שהסמל שניתן למיסוך ייראה טוב במכשירי Android Oreo, מסמנים את תיבת הסימון החדשה Show only the minimum safe area for maskable icons (הצגת האזור הבטוח המינימלי בלבד לסמלים שניתנים למיסוך) בחלונית Manifest (מניפסט). מידע נוסף על הסמלים הנוכחיים

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

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

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

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

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

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

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