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

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

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

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

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

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

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

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

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

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

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

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

בעיות ב-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 (עם או בלי הדגל), התיבה בעיות כוללת עכשיו את תיבת הסימון הכללת בעיות בקובצי cookie של צד שלישי כברירת מחדל לכל משתמשי Chrome החדשים, וכתוצאה מכך היא מדווחת:

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1410709.

צבעים חדשים

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

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

בעיה ב-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. מידע נוסף זמין במאמר ניפוי באגים ב-C/C++ WebAssembly.

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

בעיה ב-Chromium: ‏ 1410709.

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

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

• עיצוב עץ ב-CSS: בחלונית Elements מוצגת עכשיו שרשרת הסלקטורים המלאה של צאצאים בתצוגת עץ (1172985).
• בקטע Application (אפליקציה) > Manifest (מניפסט) יש עכשיו קטע Window Controls Overlay (שכבת-על של פקדי חלון) שבודק אם הערך display_override נמצא במניפסט ומספק קישורים למסמכים הרלוונטיים.
• עכשיו, בעץ מקורות > דף מתבצעות הפעולות הבאות, בין היתר (1442863):
  • הסתרת תיקיות באפור אם כל התוכן שלהן מופיע ברשימה להתעלמות.
  • תיקיות מודגשות בכתום אם כל התוכן שלהן מגיע ממפת מקור.
• ביצועים: הגדרות הצילום מוסתרות עכשיו באופן אוטומטי כשמתחילים את ההקלטה (1455498).
• מקורות > Editor שחזר את התנהגות 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

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

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

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

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