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

בעיה ב-Chromium: ‏ 772558

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

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

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

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

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

בעיה ב-Chromium: ‏ 1073909

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

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

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

בעיה ב-Chromium: 1122580

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

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

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

בעיה ב-Chromium: ‏ 1152290

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

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

בעיה ב-Chromium: ‏ 1028078

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1155120

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

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

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

בחלונית Application, מרחיבים את המסגרת עם העובדים של השירות, ואז בוחרים עובד שירות בעץ 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

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

עוברים אל דף ההדגמה הזה. פותחים את החלונית מקורות בכלי הפיתוח. בחלונית הימנית, לוחצים על הכרטיסייה הקלטה. מוסיפים הקלטה חדשה ונותנים שם לקובץ (למשל 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.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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