מה חדש בכלי הפיתוח (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 מופעלת.

העמודה Priority (עדיפות) בחלונית Network (רשת).

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

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

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

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

בעיה ב-Chromium: ‏ 1410709.

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

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

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

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

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

בעיה ב-Chromium: ‏ 1469345.

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

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

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

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

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

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