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

Jecelyn Yeen

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

נקודת עצירה (breakpoint) עקב הפרות מסוג 'סוג מהימן'

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

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

בחלונית מקורות, פותחים את החלונית של סרגל הצד כלי לניפוי באגים. מרחיבים את הקטע CSP violation Breakpoints ומסמנים את התיבה Trusted Type יפוגו כדי להשהות את החריגות. אפשר לנסות זאת בעצמך באמצעות דף ההדגמה הזה.

נקודת עצירה (breakpoint) עקב הפרות מסוג 'סוג מהימן'

בעיה ב-Chromium: 1142804

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

קישור של בעיה בחלונית 'מקורות' לכרטיסייה 'בעיות'

בעיה ב-Chromium: 1150883

צילום המסך של הצומת מחוץ לאזור התצוגה

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

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

צילום המסך של הצומת מחוץ לאזור התצוגה

בעיה ב-Chromium: 1003629

כרטיסייה חדשה לאסימוני Trust Tokens לבקשות רשת

בודקים את הבקשות לרשת של Trust Token בכרטיסייה החדשה Trust Tokens.

Trust Token הוא ממשק API חדש שעוזר להילחם בהונאות ולהבחין בין בוטים לבני אדם אמיתיים, ללא מעקב פסיבי. כך מתחילים לעבוד עם אסימונים לאימות אמון.

תמיכה נוספת בניפוי באגים תגיע בגרסאות הבאות.

כרטיסייה חדשה של אסימון אמון לבקשות רשת

בעיה ב-Chromium: 1126824

Lighthouse 7 בחלונית Lighthouse

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

Lighthouse 7 בחלונית Lighthouse

ביקורות חדשות ב-Lighthouse 7:

  • טעינה מראש של התמונה מסוג Largest Contentful Paint (LCP). מתבצעת בדיקה אם התמונה שבה נעשה שימוש באלמנט ה-LCP נטענת מראש כדי לשפר את זמן ה-LCP.
  • הבעיות תועדו בחלונית Issues. הצגת רשימה של בעיות שלא נפתרו בחלונית Issues.
  • Progressive Web Apps (PWA). קטגוריית ה-PWA השתנתה במידה די משמעותית.

  • הקבוצה Installable מבוססת עכשיו לחלוטין על בדיקות היכולות שמאפשרות את הקריטריונים של Chrome להתקנה. אלה אותם אותות שמופיעים בחלונית המניפסט.

    • הביקורת 'רישום Service worker' עוברת לקבוצה PWA Optimize, והביקורת 'Uses HTTPS' כלולה עכשיו בביקורת המפתח של 'דרישות התקנה'.
    • הקבוצה מהירה ואמינה תוסר. מכיוון שבדיקת 'דרישות ההתקנה' המשופרת כוללת בדיקת יכולות אופליין, הוסרה הביקורת של 'הדף הנוכחי ו-start_url עם 200 תגובות במצב אופליין'. גם הביקורת "טעינת הדף מהירה מספיק ברשת הסלולרית" הוסרה.

בעיה ב-Chromium: 772558

עדכונים של חלונית הרכיבים

תמיכה באכיפת המצב :target של שירות ה-CSS

עכשיו אפשר להשתמש בכלי הפיתוח כדי לאלץ ולבדוק את מצב :target של שירות ה-CSS.

בחלונית רכיבים, בוחרים רכיב ומחליפים את מצב הרכיבים. הפעילו את תיבת הסימון :target כדי לאלץ ולבדוק את הסגנונות.

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

אילוץ המצב ':target' של שירות ה-CSS

בעיה ב-Chromium: 1156628

קיצור דרך חדש לשכפול הרכיב

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

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

לחלופין, אפשר לשכפל רכיב עם מקשי קיצור:

  • Mac: Shift + Option + ⬇️
  • חלון/ Linux: Shift + Alt + ⬇️

רכיב כפול

בעיות ב-Chromium: 1150797, 1150797

בוררי צבעים לנכסי CSS מותאמים אישית

בחלונית סגנונות מוצגים עכשיו בוררי צבעים עבור מאפייני CSS מותאמים אישית.

בנוסף, אפשר ללחוץ לחיצה ארוכה על המפתח Shift וללחוץ על בורר הצבעים כדי לעבור בין ייצוגים של ערך הצבע ב-RGBA, HSLA ו-Hex.

בוררי צבעים לנכסי CSS מותאמים אישית

בעיה ב-Chromium: 1147016

מקשי קיצור חדשים להעתקת מאפייני CSS

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

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

מקשי קיצור חדשים להעתקת מאפייני CSS

אפשרויות העתקה של מחלקת CSS:

  • העתקת הסלקטור. מעתיקים את השם הנוכחי של הבורר.
  • העתקת הכלל. מעתיקים את הכלל של הבורר הנוכחי.
  • העתקת כל ההצהרות: העתקת כל ההצהרות במסגרת הכלל הנוכחי, כולל נכסים לא חוקיים ועם קידומת.

אפשרויות העתקה לנכס CSS:

  • להעתקת ההצהרה. מעתיקים את ההצהרה של השורה הנוכחית.
  • העתקת הנכס. מעתיקים את המאפיין של השורה הנוכחית.
  • העתקת ערך: העתקת הערך של השורה הנוכחית.

בעיה ב-Chromium: 1152391

עדכונים לגבי קובצי cookie

אפשרות חדשה להצגת קובצי cookie בקידוד של כתובת URL

עכשיו אפשר להציג בחלונית קובצי cookie את הערך של קובצי ה-cookie בפענוח כתובת URL.

עוברים לחלונית Application (אפליקציה) ובוחרים בחלונית קובצי cookie. בוחרים קובץ Cookie כלשהו מהרשימה. מפעילים את תיבת הסימון החדשה Show URL ממנה מפוענח כדי להציג את קובץ ה-cookie המפוענח.

אפשרות להציג קובצי cookie בפענוח כתובת URL

בעיה ב-Chromium: 997625

ניקוי קובצי Cookie גלויים בלבד

הלחצן נקה את כל קובצי ה-cookie בחלונית 'קובצי cookie' מוחלף עכשיו בלחצן נקה קובצי cookie מסוננים.

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

ניקוי קובצי Cookie גלויים בלבד

בעיה ב-Chromium: 978059

אפשרות חדשה לנקות קובצי cookie של צד שלישי בחלונית האחסון

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

אפשרות לנקות קובצי cookie של צד שלישי

בעיה ב-Chromium: 1012337

עריכה של רמזים על הלקוח (Client Hints) לגבי הסוכן המשתמש במכשירים מותאמים אישית

עכשיו אפשר לערוך User-Agent Client Hints עבור מכשירים מותאמים אישית.

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

עריכה של רמזים על הלקוח (Client Hints) לגבי הסוכן המשתמש

התכונה User-Agent Client Hints היא חלופה למחרוזת של סוכן משתמש, שמאפשרת למפתחים לגשת למידע על הדפדפן של המשתמש באופן ארגונומי ושומר על הפרטיות. מידע נוסף על User-Agent Client Hints זמין בכתובת web.dev/user-agent-client-hints/.

בעיה ב-Chromium: 1073909

עדכונים של חלונית הרשת

שמירת ההגדרה של 'רישום יומן רשת'

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

הקלטת יומן הרשת

בעיה ב-Chromium: 1122580

הצגת חיבורי WebTransport בחלונית 'רשת'

בחלונית 'רשת' מוצגים עכשיו חיבורי WebTransport.

חיבורים ל-WebTransport

WebTransport הוא ממשק API חדש שמציע הודעות שרת-לקוח עם זמן אחזור קצר ודו-כיווני. למידע נוסף על תרחישים לדוגמה ואיך לתת משוב על העתיד של ההטמעה, ראו web.dev/webtransport/.

בעיה ב-Chromium: 1152290

השם 'אונליין' השתנה ל'ללא ויסות נתונים'

השם של אפשרות האמולציית רשת 'אונליין' השתנה ל'ללא ויסות נתונים'.

הקלטת יומן הרשת

בעיה ב-Chromium: 1028078

אפשרויות העתקה חדשות בחלונית 'מסוף', בחלונית 'מקורות' ובחלונית 'סגנונות'

קיצורי דרך חדשים להעתקת אובייקט בחלונית 'מסוף' ו'מקורות'

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

העתקת אובייקט במסוף

העתקת אובייקט בחלונית 'מקורות'

בעיות ב-Chromium: 1149859, 1148353

קיצורי דרך חדשים להעתקת שם קובץ בחלונית 'מקורות' ובחלונית 'סגנונות'

עכשיו אפשר להעתיק את שם הקובץ על ידי לחיצה ימנית על:

  • קובץ בחלונית מקורות, או
  • שם הקובץ בחלונית הסגנונות בחלונית רכיבים

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

העתקת שם הקובץ בחלונית 'מקורות'

העתקת שם הקובץ בחלונית 'סגנונות'

בעיה ב-Chromium: 1155120

עדכונים לגבי הצגת פרטי המסגרת

מידע על קובצי שירות חדשים בתצוגת הפרטים של המסגרת

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

בחלונית Application, מרחיבים מסגרת עם Service Workers ובוחרים קובץ שירות (service worker) בעץ Service Workers כדי לראות את הפרטים.

מידע על קובצי שירות בתצוגת הפרטים של המסגרת

בעיה ב-Chromium: 1122507

מדידת נתוני הזיכרון בתצוגת הפרטים של המסגרת

סטטוס ה-API performance.measureMemory() מוצג עכשיו בקטע זמינות API.

ה-API החדש של performance.measureMemory() מעריך את השימוש בזיכרון של כל דף האינטרנט. בעזרת ה-API החדש הזה, תוכלו לקרוא איך לעקוב אחר השימוש הכולל בזיכרון בדף האינטרנט במאמר הזה.

מדידת זיכרון

בעיה ב-Chromium: 1139899

שליחת משוב דרך הכרטיסייה 'בעיות'

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

קישור למשוב על בעיה

פריימים שהושמטו בחלונית 'ביצועים'

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

פריימים שהושמטו

בעיה ב-Chromium: 1075865

אמולציה של מכשירים מתקפלים ומסך כפול במצב מכשיר

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

אחרי הפעלת סרגל הכלים של המכשיר, בוחרים באחד מהמכשירים הבאים: Surface Duo או Samsung Galaxy Fold.

תוכלו ללחוץ על סמל ה-span החדש כדי לעבור בין תנוחות של מסך יחיד, מצב מקופל, או מצב של מסך כפול או מצב לא מקופל.

תוכלו גם להפעיל את התכונות הניסיוניות של פלטפורמת האינטרנט כדי לגשת לתכונה החדשה screen-spanning למדיה ב-CSS ול-JavaScript getWindowSegments API. הסמל הניסיוני מציג את מצב הדגל תכונות ניסיוניות של פלטפורמת האינטרנט. הסמל מודגש כשהדגל מופעל. מנווטים אל chrome://flags ומחליפים את מצב הדגל.

אמולציה של מסך כפול

בעיה ב-Chromium: 1054281

תכונות ניסיוניות

אוטומציה של בדיקות דפדפן באמצעות Puppeteer Recorder

עכשיו כלי הפיתוח יכולים ליצור סקריפטים של Puppeteer על סמך האינטראקציה שלכם עם הדפדפן, וכך קל יותר להפוך את בדיקת הדפדפן לאוטומטיים. Puppeteer היא ספריית Node.js שמספקת API ברמה גבוהה לשליטה ב-Chrome או ב-Chromium באמצעות DevTools Protocol.

נכנסים לדף ההדגמה הזה. פותחים את החלונית מקורות בכלי הפיתוח. בחרו בכרטיסייה Recording בחלונית שמשמאל. מוסיפים הקלטה חדשה ונותנים שם לקובץ (למשל test01.js).

כדי להתחיל להקליט את האינטראקציה, לוחצים על הלחצן הקלטה בתחתית המסך. נסו למלא את הטופס שמופיע במסך. שימו לב שפקודות Puppeteer מצורפות לקובץ בהתאם. כדי להפסיק את ההקלטה, לוחצים שוב על הלחצן Record (הקלטה).

כדי להריץ את הסקריפט, צריך לפעול לפי המדריך לתחילת העבודה באתר הרשמי של Puppeteer.

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

מכשיר הקלטה בבובן

בעיה ב-Chromium: 1144127

עורך הגופנים בחלונית 'סגנונות'

.

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

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

עורך הגופנים בחלונית 'סגנונות'

בעיה ב-Chromium: 1093229

כלים לניפוי באגים ב-flexbox של שירות CSS

בכלי הפיתוח נוספה תמיכה ניסיונית בניפוי באגים ב-flexbox מאז הגרסה האחרונה.

כלי הפיתוח משרטטים עכשיו קו מנחה כדי לעזור לכם להמחיש בצורה טובה יותר את מאפיין align-items של CSS. יש תמיכה גם בנכס gap ב-CSS. בדוגמה הזו, יש לנו את שירות ה-CSS gap: 12px;. שימו לב לדפוס הבקיעה בכל פער.

Flexbox

בעיה ב-Chromium: 1139949

כרטיסייה חדשה של הפרות CSP

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

הכרטיסייה 'הפרות של CSP'

בעיה ב-Chromium: 1137837

חישוב חדש של ניגודיות צבעים – אלגוריתם ניגודיות מתקדם של תפיסת צבעים (APCA)

אלגוריתם הניגודיות המתקדם (APCA) מחליף את יחס הניגודיות של הנחיות AA/AAA בבוחר הצבעים.

APCA היא דרך חדשה לחשב את הניגודיות על סמך מחקר מודרני לגבי תפיסת צבעים. בהשוואה להנחיות AA/AAA, APCA תלוי יותר בהקשר. הניגודיות מחושבת על סמך המאפיינים המרחביים של הטקסט (משקל וגודל הגופן), הצבע (ההבדל בין הבהירות הנתפסת לטקסט לבין הרקע) וההקשר (תאורת הסביבה, הסביבה ומטרת הטקסט).

APCA בבוחר הצבעים

בדוגמה רואים שהסף ל-APCA הוא 38%. יחס הניגודיות חייב להיות שווה לערך הרשום או גבוה ממנו. הערך הזה מחושב על סמך המשקל והגודל של הגופן, לפי טבלת החיפושים של APCA.

בעיה ב-Chromium: 1121900

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59