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

Sofia Emelianova
Sofia Emelianova
GitHub

הסגירה ההדרגתית של קובצי cookie של צד שלישי

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

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

אזהרה על ההוצאה משימוש הקרובה של קובצי cookie של צד שלישי בכרטיסייה 'בעיות'.

בעיה ב-Chromium: 1466310.

ניתוח קובצי ה-Cookie של האתר בעזרת כלי הניתוח של 'ארגז החול לפרטיות'

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

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

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

כלי הניתוח של 'ארגז החול לפרטיות'.

מידע נוסף על השימוש בכלי הניתוח של 'ארגז החול לפרטיות' (PSAT) זמין במאמרים הבאים:

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

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

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

דפוס ברירת המחדל של החרגה של node_modules

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

לפני ואחרי הוספת ביטוי רגולרי.

בעיה ב-Chromium: ‏ 1496301.

חריגות עוצרות עכשיו את הביצוע אם הן מתגלות או עוברות קוד שלא מתעלם מהן

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

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

השהיה בחריגה שזוהתה ועברה קוד שלא התעלם ממנה.

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

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

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

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

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

במפרט של מפות המקור אומצו השדה ignoreList במקום x_google_ignoreList, ועכשיו יש ב-DevTools תמיכה בשם החדש עם חלופה לשם הישן. עכשיו אפשר להשתמש בשם השדה החדש ב-frameworks וב-bundlers.

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

מידע נוסף על מפות מקור זמין במאמרים הבאים:

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

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

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

בעיה ב-Chromium: ‏ 1410433.

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

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

בתמונות לפני ואחרי מוצגת documentURL לצד הצומת #document.

בעיה ב-Chromium: 1376976.

מדיניות Content Security Policy שבתוקף בחלונית Application

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

הקטע Content Security Policy (מדיניות אבטחת תוכן) בכרטיסייה Application (אפליקציה).

בעיה ב-Chromium: ‏ 1424714.

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

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

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

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

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

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

אם אתם משתמשים חדשים ב-DevTools ומנסים להדביק קוד, עכשיו תוצג תיבת הדו-שיח הקוד הזה מהימן? בחלונית מקורות, ותופיע אזהרה דומה במסוף. מדביקים רק את הקוד שאתם מבינים ובדקתם בעצמכם. כדי להדביק, מקלידים allow pasting כשמוצגת בקשה לעשות זאת. אחרי שמאשרים פעם אחת את ההדבקה, האזהרה לא תוצג שוב.

תיבת הדו-שיח &#39;הקוד הזה מהימן?&#39; כשמדביקים קוד בקטע &#39;מקורות&#39;.

בעיה ב-Chromium: ‏ 345205.

נקודות עצירה (breakpoint) של פונקציות event listener בעובדי אינטרנט וב-worklets

כשמגדירים נקודת עצירה לאירוע דרך מקורות > Event Listener Breakpoints, בנוסף להשהיה של האירוע הזה באתר, הכלי לניפוי באגים מושהה עכשיו גם כשהאירוע המתאים מתרחש בWeb worker או בworklet מכל סוג, כולל ה-worklet של Shared Storage.

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

בעיה ב-Chromium: ‏ 1445175.

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

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

תג המדיה החדש של תגי אודיו ווידאו הופעל.

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

בעיה ב-Chromium: 1448214.

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

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

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

בעיה ב-Chromium: 1478888.

Lighthouse 11.2.0

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

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

לפני ואחרי השיפורים בביצועים.

מידע בסיסי על השימוש בחלונית 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: עכשיו הטקסט בסרגל הפעולות העליון מופיע בקו נטוי כשמשנים את הגודל שלו (1487276).
  • Elements‏ > Styles:
    • תוקנה הרזולוציה של משתני ה-CSS שעברו בירושה לרכיבים נבחרים (1492162).
    • כשמשביתים מאפיין CSS, התגובות שלו מוסרות עכשיו כדי לתקן שגיאות בתחביר (1101224).
  • Network: בעמודה Priority מוצגת עכשיו תיאור קצר עם מידע על העדיפות הראשונית (הוא מוצג גם כשהאפשרות Big request rows מסומנת) (1495735).
  • הוצאה משימוש:
    • ההגדרה פורמט צבע הושבתה בגרסאות קודמות והיא הוסרה עכשיו.
    • האפשרות 'מחיקת כל השינויים' בקטע מקורות הוסרה עקב שימוש נמוך אחרי הפשטת השינויים (1473681).

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.