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

Jecelyn Yeen

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

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

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

ממשק ה-API של Trusted Types עוזר למנוע נקודות חולשה של פרצות אבטחה XSS (cross-site scripting) שמבוססות על DOM. כאן מוסבר איך לכתוב, לבדוק ולתחזק אפליקציות ללא נקודות חולשה מסוג DOM XSS באמצעות Trusted Types.

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

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

בעיה ב-Chromium: 1142804

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

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

בעיה ב-Chromium: 1150883

צילום מסך של צומת מעבר לתחום התצוגה

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

בחלונית Elements, לוחצים לחיצה ימנית על רכיב כלשהו ובוחרים באפשרות Capture node screenshot.

צילום מסך של צומת מעבר לתחום התצוגה

בעיה ב-Chromium: 1003629

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

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

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

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

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

בעיה ב-Chromium: 1126824

Lighthouse 7 בחלונית של Lighthouse

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

Lighthouse 7 בחלונית של Lighthouse

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

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

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

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

בעיה ב-Chromium: 772558

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

תמיכה באילוץ המצב :target ב-CSS

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

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

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

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

בעיה ב-Chromium: 1156628

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

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

לוחצים לחיצה ימנית על רכיב בחלונית Elements ובוחרים באפשרות Duplicate element. ייווצר אלמנט חדש מתחתיו.

לחלופין, אפשר להשתמש במקשי הקיצור כדי להעתיק את האלמנט:

  • ב-Mac: ‏ Shift + Option + ⬇️
  • Windows/ ‏ Linux: ‏ Shift + Alt + ⬇️

רכיב כפול

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

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

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

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

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

בעיה ב-Chromium: 1147016

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

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

בחלונית Elements (רכיבים), בוחרים רכיב. לאחר מכן, לוחצים לחיצה ימנית על כיתה CSS או על מאפיין CSS בחלונית Styles כדי להעתיק את הערך.

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

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

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

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

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

בעיה ב-Chromium: 1152391

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

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

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

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

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

בעיה ב-Chromium: 997625

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

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

בחלונית Application (אפליקציה) > Cookies (קובצי cookie), מזינים טקסט בתיבת הטקסט כדי לסנן את קובצי ה-cookie. בדוגמה הזו, אנחנו מסננים את הרשימה לפי 'PREF'. לוחצים על הלחצן Clear filtered cookies כדי למחוק את קובצי ה-cookie הגלויים. מוחקים את טקסט המסנן ותראו שקובצי ה-cookie האחרים נשארים ברשימה. בעבר, הייתה לכם אפשרות רק למחוק את כל קובצי ה-cookie.

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

בעיה ב-Chromium: 978059

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

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

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

בעיה ב-Chromium: 1012337

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

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

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

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

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

בעיה ב-Chromium: 1073909

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

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

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

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

בעיה ב-Chromium: 1122580

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

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

חיבורי WebTransport

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

בעיה ב-Chromium: 1152290

השם של 'Online' (באינטרנט) שונה ל-'No throttling' (ללא הגבלת קצב העברת נתונים)

השם של האפשרות 'Online' (באינטרנט) בסימולציית הרשת השתנה ל'No Throttling' (ללא הגבלת רוחב פס).

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

בעיה ב-Chromium: 1028078

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1155120

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

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

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

בחלונית Application מרחיבים את המסגרת עם שירותי ה-Workers, ובוחרים שירות Worker מתחת לעץ Service Workers כדי להציג את הפרטים.

פרטי Service Workers בתצוגת פרטי המסגרת

בעיה ב-Chromium: 1122507

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

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

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

מדידת זיכרון

בעיה ב-Chromium: 1139899

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

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

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

מסגרות חסרות בחלונית 'ביצועים'

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

פריימים חסרים

בעיה ב-Chromium: 1075865

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

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

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

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

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

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

בעיה ב-Chromium: 1054281

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

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

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

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

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

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

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

Puppeteer Recorder

בעיה ב-Chromium: 1144127

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

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

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

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

בעיה ב-Chromium: 1093229

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

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

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

Flexbox

בעיה ב-Chromium: 1139949

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

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

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

בעיה ב-Chromium: 1137837

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

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

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

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

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

בעיה ב-Chromium: 1121900

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

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

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

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

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

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