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

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

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

עכשיו אפשר להגדיר נקודות עצירה (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:

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

בעיה ב-Chromium: 1156628

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1147016

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

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

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

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

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

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

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

בעיה ב-Chromium: 1152391

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

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

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

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

בעיה ב-Chromium: 997625

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

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

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

בעיה ב-Chromium: 978059

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

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

בעיה ב-Chromium: 1012337

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

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

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

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

בעיה ב-Chromium: 1073909

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

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

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

בעיה ב-Chromium: 1122580

הצגת חיבורי 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 כדי להציג את הפרטים.

בעיה ב-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 ומחליפים את מצב הדגל.

בעיה ב-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 והפרות מסוג מהימן.

בעיה ב-Chromium: 1137837

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

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

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

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

בעיה ב-Chromium: 1121900

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

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

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

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

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

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

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