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

Sofia Emelianova
Sofia Emelianova
GitHub

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

כדי להשהות את הביצוע במקרים של חריגות שנתפסו ו/או שלא נתפסו (כשהאפשרות הזו מסומנת) בקריאות אסינכרניות, כלי ניפוי הבאגים מחפש פונקציות טיפול בדחייה ב-promises. החל מהגרסה הזו, הכלי לניפוי באגים לא צופה יותר ש-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

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

בעיה ב-Chromium: ‏ 345205.

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

כשמגדירים נקודת עצירה באירוע בקטע מקורות > נקודות עצירה של מאזינים לאירועים, בנוסף להשהיה באירוע הזה באתר, כלי ניפוי הבאגים עוצר עכשיו גם כשהאירוע התואם מתרחש בWeb Worker או בworklet מכל סוג, כולל Worklet של אחסון משותף.

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

בעיה ב-Chromium: ‏ 1445175.

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

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

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

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

בעיה ב-Chromium: 1448214.

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

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

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

בעיה ב-Chromium: 1478888.

Lighthouse 11.2.0

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

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

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

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

בעיות ב-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 או ב-Beta כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם יעשו זאת.

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

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

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

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