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

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

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

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

בעיה ב-Chromium: ‏ 1466310.

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

התוסף Privacy Sandbox Analysis Tool לכלי הפיתוח נמצא בתהליך פיתוח פעיל, והגרסה העדכנית ביותר שלפני ההשקה היא 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. בדף, ברשימת התרחישים 'נתפסו', לוחצים על הכפתורים השונים ורואים שההפעלה מושהית במקרים שצוינו.

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

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

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

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

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

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