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

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

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

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

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

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

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

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

אפשר לשלוח משוב לבעיה מספר 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.

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

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

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

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

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

צפייה בבקשות רשת שמגדירות נתיב ספציפי של קובץ Cookie

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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