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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

אפשרויות הביטול בתפריט הנפתח של בקשה.

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

כתובות URL של תוספים מוסתרות מטבלת הבקשות.

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

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

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

לפני ואחרי הצגת קודי סטטוס של HTTP שניתנים לקריאה על ידי בני אדם.

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

בעיה ב-Chromium: ‏ 1153956.

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

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

תצוגה מקדימה של תגובת רשת לפני ואחרי ניתוח של סוג משנה של application/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 בדף ההדגמה הזה.

בעיות בקובצי Cookie של צד שלישי שמדווחות בכרטיסייה 'בעיות'.

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

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

לדוגמה:

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

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

בעיה ב-Chromium: 772558.

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

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

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

בעיה ב-Chromium: ‏ 1410709.

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

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

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

הדמיה חדשה של עיבוד: 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).

הגדרה ושליחה של פקודת CDP.

בעיה ב-Chromium: ‏ 1469345.

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

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

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

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

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

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