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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1142804

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

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

בעיה ב-Chromium: ‏ 1150883

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

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

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

בעיה ב-Chromium: 1003629

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

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

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

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

בעיה ב-Chromium: ‏ 1126824

‫Lighthouse 7 בחלונית Lighthouse

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

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

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

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

  • הביקורת 'Registers a service worker…‎' (רישום של service worker…) עוברת לקבוצה PWA Optimized (אופטימיזציה של PWA), והביקורת 'Uses HTTPS' (שימוש ב-HTTPS) נכללת עכשיו כחלק מהביקורת 'installability requirements' (דרישות להתקנה).
  • הקבוצה מהיר ואמין הוסרה. הביקורת 'דף נוכחי ו-start_url מגיבים בסטטוס 200 כשהם במצב אופליין' הוסרה, כי הביקורת המשופצת 'דרישות להתקנה' כוללת בדיקה של היכולת להשתמש באפליקציה במצב אופליין. גם הביקורת 'טעינת הדף ברשתות סלולריות מהירה מספיק' הוסרה.

בעיה ב-Chromium: ‏ 772558

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

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

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

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

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

בעיה ב-Chromium: ‏ 1156628

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

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

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

אפשר גם לשכפל אלמנט באמצעות מקשי קיצור:

• ‫Mac: ‏ ‎Shift + Option + ⬇️
• Windows/ Linux: ‏ Shift + Alt + ⬇️

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

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

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

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

בעיה ב-Chromium: ‏ 1147016

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

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

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

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

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

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

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

בעיה ב-Chromium: 1152391

עדכונים בנושא קובצי Cookie

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

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

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

בעיה ב-Chromium: ‏ 997625

ניקוי רק של קובצי Cookie גלויים

הכפתור ניקוי של קובצי Cookie בחלונית Cookies הוחלף בכפתור ניקוי של קובצי Cookie מסוננים.

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

בעיה ב-Chromium: ‏ 978059

אפשרות חדשה לניקוי קובצי Cookie של צד שלישי בחלונית Storage (אחסון)

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

בעיה ב-Chromium: ‏ 1012337

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

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

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

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

בעיה ב-Chromium: ‏ 1073909

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

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

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

בעיה ב-Chromium: ‏ 1122580

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

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

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

בעיה ב-Chromium: ‏ 1152290

השם 'באינטרנט' שונה ל'ללא הגבלת מהירות'

האפשרות 'אונליין' לחיקוי רשת נקראת עכשיו 'ללא הגבלת רוחב פס'.

בעיה ב-Chromium: ‏ 1028078

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1155120

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

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

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

בחלונית Application, מרחיבים את המסגרת עם ה-service workers, ואז בוחרים service worker מתחת לעץ Service Workers כדי לראות את הפרטים.

בעיה ב-Chromium: ‏ 1122507

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

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

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

בעיה ב-Chromium: ‏ 1139899

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

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

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

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

בעיה ב-Chromium: ‏ 1075865

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

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

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

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

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

בעיה ב-Chromium: ‏ 1054281

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1144127

עורך הגופנים בחלונית Styles (סגנונות)

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

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

בעיה ב-Chromium: ‏ 1093229

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

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

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

בעיה ב-Chromium: ‏ 1139949

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

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

בעיה ב-Chromium: 1137837

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

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

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

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

בעיה ב-Chromium: ‏ 1121900

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

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

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

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

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

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

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