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

הוצאה משימוש של קובצי Cookie של צד שלישי

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

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

בעיה ב-Chromium: ‏ 1466310.

ניתוח קובצי ה-Cookie באתר באמצעות Privacy Sandbox Analysis Tool

התוסף Privacy Sandbox Analysis Tool ל-DevTools נמצא בתהליך פיתוח פעיל, והגרסה העדכנית ביותר שלפני ההשקה היא 0.3.2. הכלי מאפשר להבין איך האתר משתמש בקובצי Cookie ומספק הנחיות לגבי ממשקי ה-API החדשים של Chrome לשמירה על הפרטיות.

כדי לנתח את קובצי ה-Cookie:

1. מתקינים את התוסף ב-Chrome.
2. כדי לקבל את הניתוח הטוב ביותר, כדאי לפתוח את האתר בכרטיסייה אחת.
3. פותחים את כלי הפיתוח ועוברים לחלונית ארגז החול לפרטיות. יכול להיות שהחלונית הזו מוסתרת מאחורי לחצן התפריט הנפתח בחלק העליון.
4. פותחים את הקטע Cookies (קובצי Cookie) ולוחצים על Analyze this tab (ניתוח הכרטיסייה הזו). אם הכלי לא מצא קובצי Cookie, נסו לטעון מחדש את הדף.

מידע נוסף על השימוש ב-Privacy Sandbox Analysis Tool‏ (PSAT) זמין במאמרים הבאים:

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

בנוסף, אפשר לעיין בהנחיות בנושא דיווח על בעיות.

רשימת קטעי קוד משופרת להתעלמות

תבנית ברירת מחדל להחרגה של node_modules

בגרסה הזו, הביטוי הרגולרי שמוגדר כברירת מחדל מוגדר ככלל החרגה מותאם אישית ב הגדרות > רשימת ההתעלמות. כדי לעזור לכם להתמקד רק בקוד שלכם, Debugger ידלג עכשיו כברירת מחדל על סקריפטים מ-/node_modules/ ומ-/bower_components/. אפשר להשבית את הכלל הזה בהגדרות בכל שלב.

בעיה ב-Chromium: ‏ 1496301.

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

כשמנפים באגים בקוד עם תיבת הסימון Pause on caught exceptions (השהיה בחריגות שזוהו) מסומנת, Debugger (כלי ניפוי הבאגים) עוצר עכשיו את ההרצה בחריגות הבאות שזוהו, גם סינכרוניות וגם אסינכרוניות:

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

כדי לבדוק את ההתנהגות הזו, פותחים את דף ההדגמה הזה:

1. פותחים את כלי הפיתוח > מקורות, מוסיפים את hidden התיקייה לרשימת הפריטים להתעלמות ומסמנים את התיבה השהיה בחריגים שנתפסו.
2. בדף, ברשימת התרחישים 'נתפסו', לוחצים על הלחצנים השונים ורואים שהביצוע מושהה במקרים שצוינו.

כדי להשהות את ההרצה בחריגים שתועדו או לא תועדו (כשהתיבה מסומנת) בשיחות אסינכרוניות, Debugger מחפש מטפלים בדחייה בהבטחות. החל מהגרסה הזו, Debugger לא צופה יותר ש-Promise.finally() יתפוס חריג, בדומה למצב שבו הבלוק try...finally לא תופס חריג.

בעיות ב-Chromium: 1489312, ‏ 1291064.

x_google_ignoreList שונה ל-ignoreList במפות המקור

במפרט של מפות מקור הוחלף השדה x_google_ignoreList בשדה ignoreList, וכלי הפיתוח תומכים עכשיו בשם החדש עם חזרה לשם הישן. מעכשיו אפשר להשתמש בשם השדה החדש ב-Frameworks וב-Bundlers.

מפות מקור מאפשרות לכם לנפות באגים בקוד שכתבתם במקום בקוד מוקטן שמוצג באתר שלכם.

מידע נוסף על מפות מקור:

• מהן מפות מקור
• ניפוי באגים בקוד המקורי במקום בקוד שפריסתם באמצעות מפות מקור

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

עכשיו אפשר לעבור בין קלט מגע לקלט עכבר כשמבצעים ניפוי באגים בכרטיסיית Chrome מרחוק. לדוגמה, כשמריצים מופע של Chrome עם --remote-debugging-port=<port> ומתחברים ליעד הרשת הזה באמצעות chrome://inspect/#devices.

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

בעיה ב-Chromium: ‏ 1410433.

בחלונית Elements מוצגות עכשיו כתובות URL לצמתי #document

כדי להקל על ניפוי הבאגים של iframe, בחלונית Elements מוצג עכשיו הסמל documentURL לצד צמתי #document.

בעיה ב-Chromium: 1376976.

מדיניות אבטחת תוכן (CSP) בתוקף בחלונית Application

עכשיו אפשר לראות את הפרטים של Content Security Policy‏ (CSP) של פריים שנבדק. כדי לראות את הפרטים, עוברים אל Application (אפליקציה) > Frames (מסגרות), בוחרים מסגרת וגוללים למטה לקטע Content Security Policy (CSP) (מדיניות אבטחת תוכן).

בעיה ב-Chromium: ‏ 1424714.

שיפור בניפוי באגים של אנימציות

בכרטיסייה אנימציות, אפשר עכשיו:

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

בעיות ב-Chromium: ‏ 1492460, ‏ 1489721.

התיבת הדו-שיח 'הקוד הזה מהימן?' בכרטיסייה Sources והאזהרה על XSS עצמי במסוף

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

אם אתם משתמשים חדשים ב-DevTools ומנסים להדביק קוד, בחלונית Sources מוצגת עכשיו תיבת הדו-שיח Do you trust this code?‎ וב-Console מוצגת עכשיו אזהרה דומה. צריך להדביק רק קוד שמובן לכם ושבדקתם בעצמכם. כדי להדביק, מקלידים allow pasting כשמוצגת בקשה. אחרי שמאשרים את ההדבקה פעם אחת, האזהרה לא תוצג יותר.

בעיה ב-Chromium: ‏ 345205.

נקודות עצירה של event listener ב-web workers וב-worklets

כשמגדירים נקודת עצירה של אירוע במקורות > נקודות עצירה של מאזיני אירועים, בנוסף להשהיה של האירוע הזה באתר, כלי הניפוי באגים מושהה עכשיו גם כשהאירוע התואם מתרחש בweb worker או בworklet מכל סוג, כולל Shared Storage Worklet.

בעיה ב-Chromium: ‏ 1445175.

תג המדיה החדש של <audio> ושל <video>

עכשיו אפשר להפעיל את תג המדיה החדש לרכיבים <audio> ו-<video> בחלונית Elements. כשלוחצים על התג, מועברים אל החלונית Media, כדי שאפשר יהיה לנפות באגים ברכיבים האלה.

התכונה הזו נמצאת בפיתוח ותמשיך להשתפר. צוות DevTools רוצה להביע את תודתו ל-Junseo (Jeremy) Yoo על השיפור הזה.

בעיה ב-Chromium: 1448214.

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

כדי להימנע משימוש יתר במונח הקודם ולשקף טוב יותר את ההתנהגות, שינינו את השם של Application > Preloading ל-Speculative loads. טעינה ספקולטיבית מאפשרת טעינה כמעט מיידית של דפים על סמך כללים ספקולטיביים שאתם יכולים להגדיר באתר שלכם כדי לבצע טרום-עיבוד וטרום-שליפה של רוב הדפים שאליהם המשתמשים מנווטים.

בעיה ב-Chromium: 1478888.

‫Lighthouse 11.2.0

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

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

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

בעיות ב-Chromium: 772558.

שיפורים בנגישות

הגרסה הזו כוללת את שיפורי הנגישות הבאים:

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

בעיות ב-Chromium: 1488645, 1484918.

מידע חשוב נוסף

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

• ביצועים: תוקנה הבעיה שבה לפעמים חסר מדד LCP בהקלטה (1487136).
• טעינות ספקולטיביות: תוקנו כתובות ה-URL המלאות של יעדים בתפריט הנפתח בחלונית Network (1471020).
• כיסוי:
  • כיסוי קבוע של שורה אחר שורה לקוד שעבר עיצוב (1464974).
  • פרטי הכיסוי מתעדכנים עכשיו בטעינה מחדש של הדף (1494457).
• מסוף:
  • תוקנה בחירה חלקית של טקסט בהודעות (1487449).
  • תוקן הריצוד של התפריט הנפתח של ההשלמה האוטומטית (1487453).
  • תמיכה בסוגריים בנתיבי מחסנית ובכתובות URL בנתוני מעקב אחר מחסנית (1473926).
• מקורות: נוספה תמיכה בהדגשת התחביר של מילת המפתח using TypeScript (1490515).
• בתפריט פתיחה מהירה מוצגות עכשיו שיטות פרטיות (1492957).
• Application > Background services: The top action bar now wraps text when resizing (1487276).
• Elements (רכיבים) > Styles (סגנונות):
  • תוקנה הרזולוציה של משתני CSS שעברו בירושה עבור רכיבים עם חריצים (1492162).
  • כשמשביתים מאפיין CSS, התגובות שלו מוסרות כדי לתקן שגיאות תחביר (1101224).
• רשת: בעמודה עדיפות מוצג עכשיו תיאור קצר עם מידע על העדיפות הראשונית (אותו תיאור מוצג כשמסומנת האפשרות שורות של בקשות גדולות) (1495735).
• הוצאה משימוש:
  • ההגדרה פורמט צבע הושבתה בגרסאות קודמות ועכשיו היא הוסרה.
  • האפשרות 'מחיקת כל השינויים' במקורות הוסרה עכשיו בגלל שימוש נמוך אחרי הפישוט של השינויים (1473681).

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

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

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

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

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

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

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