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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

לפני ואחרי הצגת קודי מצב HTTP שאנשים יכולים לקרוא.

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

בעיה ב-Chromium: 1153956.

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

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

הקטע 'לפני ואחרי הניתוח של סוג המשנה של אפליקציה/JSON' בתצוגה מקדימה של תגובת הרשת.

בעיה ב-Chromium: ‏ 406900.

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

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

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

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

העמודה Priority בחלונית Network.

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

לדוגמה:

נכשל הבדיקה של צבע הקישורים, כך שלא ניתן להבדיל ביניהם.

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

בעיה ב-Chromium:‏ 772558.

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

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

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

בעיה ב-Chromium: ‏ 1410709.

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

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

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

אמולציית רינדור חדשה: 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).

ציון פקודה של CDP ושליחתה.

בעיה ב-Chromium: ‏ 1469345.

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

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

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

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

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

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