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

שיפורים בחלונית 'רשת'

שינוי מקומי של תוכן מהאינטרנט מהר יותר

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

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

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

אחרי שמגדירים את ההחרגות, תועברו ל-DevTools בקטע מקורות > החרגות > עריכה כדי לשנות את תוכן האינטרנט.

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

בעיות ב-Chromium: ‏ 1465785, ‏ 1470532, ‏ 1469359.

שינוי התוכן של בקשות XHR ואחזור

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

נכון לעכשיו, DevTools תומך בשינוי תוכן של סוגי הבקשות הבאים: תמונות (לדוגמה, avif,‏ png), גופנים, אחזור ו-XHR, סקריפטים (css ו-js) ומסמכים (html). מעכשיו, האפשרות שינוי תוכן מופיעה באפור עבור סוגי תוכן שלא נתמכים.

בעיות ב-Chromium: ‏ 792101, ‏ 1469776.

הסתרת בקשות של תוספים ל-Chrome

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

כדי לסנן את כל הבקשות שנשלחות לכתובות ה-URL מסוג chrome-extension://, מסמנים את התיבה הסתרת כתובות URL של תוספים.

בעיות ב-Chromium: 1257885, ‏ 1458803.

קודי מצב HTTP שקריאים לאנשים

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

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

בעיה ב-Chromium: ‏ 1153956.

הדפסה יפה של תגובות לסוגי משנה של JSON

בכרטיסייה Response (תגובה) של בקשה עם סוג משנה של MIME מסוג application/[subtype]+json (לדוגמה, ld+json, ‏ hal+json ועוד), התגובה מנותחת כראוי ועכשיו אפשר לשפר את המראה שלה.

בעיה ב-Chromium: ‏ 406900.

ביצועים: הצגת השינויים בעדיפות האחזור של אירועי רשת

בחלונית ביצועים מוצגים עכשיו שני שדות עדיפות בסיכום של אירוע בטראק רשת: עדיפות ראשונית ועדיפות (סופית), במקום רק שדה עדיפות יחיד. בעזרת השדה הנוסף הזה, אפשר לראות אם עדיפות האחזור של האירוע השתנתה ולשנות את סדר ההורדות. מידע נוסף זמין במאמר אופטימיזציה של טעינת המשאבים באמצעות Fetch Priority API.

בנוסף, אפשר למצוא את אותו מידע בעמודה Priority בחלונית Network, כשההגדרה Big request rows מופעלת.

בעיות ב-Chromium: ‏ 1463901, ‏ 1380964.

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

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

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

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

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

בעיות ב-Chromium: 1459193, ‏ 1336599.

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

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

כבר עכשיו אפשר לבדוק איך Chrome מתנהג אחרי הסגירה ההדרגתית של קובצי ה-cookie של צד שלישי. כדי לעשות זאת, מריצים את Chrome משורת הפקודה עם הדגל --test-third-party-cookies-phaseout. מידע נוסף על הפונקציה של הדגל הזה זמין במאמר ניפוי באגים בקובצי Cookie.

ללא קשר לאופן שבו אתם מפעילים את Chrome (עם הדגל או בלי הדגל), התיבה Include third-party cookie issues (הכללת בעיות שקשורות לקובצי Cookie של צד שלישי) מופעלת עכשיו כברירת מחדל בכרטיסייה Issues (בעיות) לכל המשתמשים החדשים ב-Chrome. כתוצאה מכך, המערכת מדווחת על:

• אזהרה על שינוי מהותי לגבי ההוצאה משימוש הקרובה.
• בעיות שקשורות לקובצי cookie של צד שלישי.

אם אתם משתמשים קיימים ב-Chrome ואתם רוצים לראות אזהרות לגבי קובצי cookie לגבי ההוצאה משימוש הקרובה, חשוב לסמן את התיבה הזו.

כדי לבדוק זאת, בודקים את קובצי ה-cookie בדף ההדגמה הזה.

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

בעיות ב-Chromium: ‏ 1458839, ‏ 1462693, ‏ 1466310.

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

צוות Chrome מחזיר את העיבוד המוקדם המלא של דפים עתידיים שהמשתמשים צפויים לנווט אליהם. כדי לאפשר לכם לנפות באגים, כלי הפיתוח מוסיפים את הקטע טעינה מראש לחלונית אפליקציה. בשיטות החדשות של טעינה מראש ועיבוד מראש (שנקראות ביחד 'טעינה מראש של ניווט') נעשה שימוש ב-Speculation Rules API במקום ברמזים למשאבים שמבוססים על קישורים.

בדף הדגמה הזה, בקטע Application (אפליקציה) > Preloading (טעינה מראש), אפשר לבדוק את הפרטים הבאים:

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

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

בעיה ב-Chromium: ‏ 1410709.

צבעים חדשים

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

בגרסה הזו (117) נוספו שיפורים נוספים לחוויית המשתמש ב-DevTools, כולל כמה שיפורים בטקסטים של ממשק המשתמש.

בעיה ב-Chromium: ‏ 1456677.

Lighthouse 10.4.0

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

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

לדוגמה:

אפשר לעיין גם ברשימת השינויים המלאה. במאמר Lighthouse: אופטימיזציה של מהירות האתר מוסבר על היסודות של השימוש בחלונית Lighthouse ב-DevTools.

בעיה ב-Chromium: ‏ 772558.

התוסף לניפוי באגים של WebAssembly ב-C/C++ ל-DevTools הוא עכשיו קוד פתוח

תוסף ניפוי הבאגים של WebAssembly ב-C/C++ ל-DevTools הוא עכשיו קוד פתוח, והוא נמצא במאגר הקצה הקדמי של DevTools. האקסטנציה הזו מאפשרת להשתמש ביכולות לניפוי באגים בכלי הפיתוח לתוכנות C++‎ שעבר עיבוד לקובצי WebAssembly. מידע נוסף זמין במאמר ניפוי באגים ב-WebAssembly של C/C++.

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

בעיה ב-Chromium: ‏ 1410709.

רגעי שיא שונים

ריכזנו כאן כמה מהתיקונים והשיפורים החשובים בגרסה הזו:

• עיצוב ב-CSS בתצוגת עץ: בחלונית Elements מוצגת עכשיו שרשרת הסלקטורים המלאה של צאצאים בתצוגת עץ (1172985).
• בקטע Application (אפליקציה) > Manifest (מניפסט) יש עכשיו קטע Window Controls Overlay (שכבת-על של פקדי חלון) שבודק אם הערך display_override נמצא במניפסט ומספק קישורים למסמכים הרלוונטיים.
• עכשיו, בעץ מקורות > דף מתבצעות הפעולות הבאות, בין היתר (1442863):
  • התיקיות יוצגו באפור אם כל התוכן שלהן נמצא ברשימת ההתעלמות.
  • תיקיות מודגשות בכתום אם כל התוכן שלהן מגיע ממפת מקור.
• ביצועים: הגדרות הצילום נסתרות עכשיו באופן אוטומטי כשמתחילים את הצילום (1455498).
• מקורות > עורך – השבתנו את ההתנהגות של Ctrl + חץ (Win) ושל Opt + חץ (MacOs) (1468208).
• המתג אנימציות > השהיית הכול שומר עכשיו את המצב שלו במהלך טעינות דפים (1446046).
• הדף Application‏ > Storage‏ > Cache storage הועבר לדף Application‏ > Storage‏ > Cache section (1462622).
• שיפורים בטקסטים ובתיאורים של ממשק המשתמש: תיאור של בו-זמניות בחומרה, טקסטים של מסנני רשת ואפשרות בתפריט הראשי, שימוש באותיות רישיות בתצוגת עץ האפליקציות, טקסטים של Network‏ > Headers, טקסטים של Sources‏ > Overrides ו-Filesystem.

תכונות ניסיוניות חדשות

הדמיה חדשה של רינדור: prefers-reduced-transparency

משתמשי האתר שלכם עשויים להתחיל להפעיל את תכונה הניסיונית החדשה של מדיה ב-CSS‏ prefers-reduced-transparency במכשירים שלהם כדי לציין את העדפתם לצמצם את ההשפעות השקופות. מומלץ להביא בחשבון את ההעדפה הזו כדי לשפר את הנגישות של האתר. כדי לעזור לכם, מעכשיו אפשר לדמות את ההגדרה prefers-reduced-transparency: reduce בכרטיסייה עיבוד שבתפריט הנפתח, כדי שתוכלו ליצור אב טיפוס של פתרון ולבדוק איך האתר מתנהג במקרה הזה.

כדי לבדוק את התכונה הזו ב-Chrome, מפעילים את האפשרות תכונות ניסיוניות של פלטפורמת אינטרנט בקטע chrome://flags.

בעיה ב-Chromium: ‏ 1424879.

מוניטור פרוטוקול משופר

כלי הפיתוח של Chrome משתמשים בפרוטוקול Chrome DevTools‏ (CDP) כדי לבדוק, לנפות באגים ולבצע פרופיל של דפדפני Chrome. אם אתם מפתחים של Chromium או של DevTools, צג הפרוטוקול מאפשר לכם לראות את כל הבקשות והתשובות של CDP שנשלחו על ידי DevTools ולשלוח פקודות CDP.

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

בפינה השמאלית התחתונה של הכרטיסייה של התפריט הנפתח Protocol monitor, לוחצים על Show CDP command editor (הצגת עורך הפקודות של CDP), בוחרים יעד, מתחילים להקליד פקודה, בוחרים באחת מההצעות, אם צריך, מציינים ערכי פרמטרים ולוחצים על Send command (שליחת פקודה, Ctrl/Cmd + Enter).

בעיה ב-Chromium: ‏ 1469345.

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.