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

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

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

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

אפשר להשתמש ב-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.

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

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

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

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

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

צפייה בבקשות רשת שמגדירות נתיב ספציפי של קובץ 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 שלכם נראה טוב במכשירים שתומכים בתקן של סמלים עם מסכה.

מסמנים את תיבת הסימון החדשה Show only the minimum safe area for maskable icons (הצגת האזור הבטוח המינימלי בלבד לסמלים שניתנים למיסוך) בחלונית 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.

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

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