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

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

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

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

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

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

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

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

בעיות ב-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.

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 772558.

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

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

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

בעיה ב-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).
• שיפרנו חלק מהטקסטים בממשק המשתמש ואת תיאורי הכלים: תיאור הכלי Hardware concurrency, טקסטים של מסנן הרשת ואפשרות בתפריט הראשי, שימוש באותיות רישיות בתצוגת העץ של האפליקציה, טקסטים של Network > Headers, טקסטים של Sources > Overrides and Filesystem.

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

תכונה חדשה: הדמיית עיבוד: prefers-reduced-transparency

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

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

בעיה ב-Chromium: ‏ 1424879.

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

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

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

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

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