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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

תבנית ברירת מחדל להחרגה של 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.

הפונקציה before and after מציגה את documentURL לצד הצומת ‎ #document.

בעיה ב-Chromium: 1376976.

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

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

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

בעיה ב-Chromium: ‏ 1424714.

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

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

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

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

התיבת דו-שיח 'אתה בוטח בקוד הזה?' בחלונית Sources והאזהרה על self-XSS בחלונית Console

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

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

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

בעיה ב-Chromium: 345205.

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

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

הכלי לניפוי באגים מושהה כש-service worker קורא לפונקציית הזמן הקצוב לתפוגה.

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

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

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

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

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

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

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