מה חדש בכלי הפיתוח (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

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

בעיה ב-Chromium: ‏ 1496301.

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

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

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

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

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

כדי להשהות את ההפעלה בחריגים שתועדו או לא תועדו (כשהתיבה מסומנת) בשיחות אסינכרוניות, כלי הניפוי באגים מחפש מטפלים בדחייה בהבטחות. החל מהגרסה הזו, הכלי לניפוי באגים לא צופה יותר ש-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 והאזהרה על self-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).
• Console:
  • תוקנה בחירה חלקית של טקסט בהודעות (1487449).
  • תוקן הריצוד של התפריט הנפתח של ההשלמה האוטומטית (1487453).
  • סוגריים נתמכים בנתיבי מחסנית ובכתובות URL בנתוני מעקב אחר מחסנית (1473926).
• מקורות: נוספה תמיכה בהדגשת התחביר של מילת המפתח using TypeScript (1490515).
• בתפריט Quick Open מוצגות עכשיו שיטות פרטיות (1492957).
• Application > Background services: הטקסט בסרגל הפעולות העליון מוצג עכשיו בשורות כשמשנים את הגודל (1487276).
• Elements > Styles:
  • תוקנה הרזולוציה של משתני CSS שעברו בירושה לרכיבים עם חריצים (1492162).
  • כשמשביתים מאפיין CSS, ההערות שלו מוסרות כדי לתקן שגיאות תחביר (1101224).
• רשת: בעמודה עדיפות מוצג עכשיו תיאור קצר עם מידע על העדיפות הראשונית (אותו מידע מוצג כשמסומנת האפשרות שורות גדולות של בקשות) (1495735).
• הוצאה משימוש:
  • ההגדרה פורמט צבע הושבתה בגרסאות קודמות ועכשיו היא הוסרה.
  • האפשרות 'מחיקת כל השינויים' במקורות הוסרה עכשיו בגלל שימוש נמוך אחרי הפישוט של השינויים (1473681).

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח בכלי הפיתוח.
• שולחים ציוץ אל @ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים מה חדש בכלי הפיתוח של YouTube או טיפים לשימוש בכלי הפיתוח של YouTube.

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

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