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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

קודי סטטוס של HTTP שקריאים לאנשים

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

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

בעיה ב-Chromium: ‏ 1153956.

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

בכרטיסייה תשובה של בקשה עם application/[subtype]+json סוג משנה של MIME (לדוגמה, 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 של צד שלישי) מופעלת עכשיו כברירת מחדל לכל המשתמשים החדשים ב-Chrome בכרטיסייה Issues (בעיות), ולכן מדווחים על:

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

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

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

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

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

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

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

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

• Speculation Rules (כללים של טעינות מראש) שבו מוצגות כל קבוצות הכללים שנמצאו בדף הנוכחי.
• טעינות מראש שבהן מפורטות כל כתובות ה-URL שבוצעו להן אחזור מראש ועיבוד מראש מתוך קבוצות הכללים.
• This Page (הדף הזה) שבו מפורט סטטוס הטרום-רנדור של הדף הנוכחי.

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

בעיה ב-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: אופטימיזציה של מהירות האתר.

בעיה ב-Chromium: 772558.

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

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

כאן מוסבר איך ליצור, להריץ ולבדוק את התוסף. אתם מוזמנים גם לתרום.

בעיה ב-Chromium: ‏ 1410709.

מידע חשוב נוסף

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

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

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

הדמיה חדשה של עיבוד: prefers-reduced-transparency

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

כדי לבדוק את התכונה הזו ב-Chrome, מפעילים את התכונה הניסיונית Experimental Web Platform features ב-chrome://flags.

בעיה ב-Chromium: 1424879.

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

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

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

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

בעיה ב-Chromium: ‏ 1469345.

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

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

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

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

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

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

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