דף זה תורגם על ידי Cloud Translation API.

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

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-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 השתנתה במידה משמעותית.
הקבוצה Installable עכשיו מופעלת במלואה על ידי בדיקות היכולות שמפעילות את הקריטריונים של Chrome להתקנה. אלה אותם אותות שמופיעים בחלונית המניפסט.
- הביקורת 'רישום עובד שירות...' עוברת לקבוצה PWA Optimized, והביקורת 'Uses HTTPS' נכללת עכשיו כחלק מביקורת המפתח 'דרישות התקנה'.
- הקבוצה מהירה ואמינה הוסרה. הביקורת 'דרישות התקנה' המשופר כוללת בדיקה של היכולות במצב אופליין, לכן הביקורת הנוכחית ו-start_url מגיבות בציון 200 כאשר אופליין הוסרה. הוסרה גם הביקורת 'טעינת הדף מהירה מספיק ברשת הסלולרית'.

בעיה ב-Chromium: 772558

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

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

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

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

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

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

בעיה ב-Chromium: 1156628

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

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

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

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

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

רכיב כפול

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

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

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

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

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

בעיה ב-Chromium: 1147016

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

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

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

קיצורי דרך חדשים להעתקת מאפייני 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 > בחלונית Cookies (קובצי Cookie), מזינים טקסט בתיבת הטקסט כדי לסנן את קובצי ה-Cookie. בדוגמה שלנו כאן, אנחנו מסננים את הרשימה לפי 'PREF'. לוחצים על הלחצן נקה קובצי cookie מסוננים כדי למחוק את קובצי ה-cookie הגלויים. תמחקו את הטקסט של המסנן כדי לראות ששאר קובצי ה-cookie יישארו ברשימה. בעבר הייתה לכם רק אפשרות לנקות את כל קובצי ה-cookie.

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

בעיה ב-Chromium: 978059

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

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

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

בעיה ב-Chromium: 1012337

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1155120

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

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

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

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

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

בעיה ב-Chromium: 1122507

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

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

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

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

בעיה ב-Chromium: 1139899

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

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

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

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

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

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

בעיה ב-Chromium: 1075865

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

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

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

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

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

אמולציה של Dual Screen

בעיה ב-Chromium: 1054281

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1144127

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

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

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

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

בעיה ב-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 שקשורים לכלי פיתוח.