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

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: 1142804

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

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

בעיה ב-Chromium: 1150883

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

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

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

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

בעיה ב-Chromium: 1003629

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

בודקים את בקשות הרשת ל-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 השתנתה במידה משמעותית.

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

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

בעיה ב-Chromium: 772558

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

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

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

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

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

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

בעיה ב-Chromium: 1156628

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

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

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

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

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

רכיב כפול

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

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

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

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

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

בעיה ב-Chromium: 1147016

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1152391

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

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

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

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

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

בעיה ב-Chromium: 997625

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

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

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

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

בעיה ב-Chromium: 978059

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

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

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

בעיה ב-Chromium: 1012337

עריכת רמזים של לקוח סוכן משתמש למכשירים מותאמים אישית

עכשיו אפשר לערוך רמזים של לקוח סוכן משתמש למכשירים מותאמים אישית.

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

עריכת רמזים ללקוח של סוכן משתמש

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

בעיה ב-Chromium: 1073909

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

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

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

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

בעיה ב-Chromium: 1122580

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

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

חיבורי WebTransport

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

בעיה ב-Chromium: 1152290

"אונליין" השם הקודם היה "ללא ויסות נתונים"

אפשרות הדמיית הרשת 'אונליין' נקרא עכשיו "No Throttling".

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

בעיה ב-Chromium: 1028078

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1155120

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

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

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

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

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

בעיה ב-Chromium: 1122507

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

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

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

מדידת הזיכרון

בעיה ב-Chromium: 1139899

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

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

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

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

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

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

בעיה ב-Chromium: 1075865

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

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

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

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

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

אמולציה של Dual Screen

בעיה ב-Chromium: 1054281

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1144127

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

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

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

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

בעיה ב-Chromium: 1093229

כלים לניפוי באגים של CSS Flexbox

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

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

גמיש

בעיה ב-Chromium: 1139949

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

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

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

בעיה ב-Chromium: 1137837

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

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

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

APCA בבוחר צבעים

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

בעיה ב-Chromium: 1121900

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

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

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

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

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

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

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