דף זה תורגם על ידי Cloud Translation API.

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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

עקוף את התוכן של XHR ובקשות אחזור

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1153956.

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

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

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

בעיה ב-Chromium: 406900.

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

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

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

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

העמודה 'עדיפות' בחלונית 'רשת'.

הבעיות ב-Chromium: 1463901, 1380964.

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

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

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

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

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

הבעיות ב-Chromium: 1459193, 1336599.

ניפוי באגים משופר בבעיות של קובצי cookie של צד שלישי

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

אפשר כבר לבדוק את אופן הפעולה של Chrome אחרי הסגירה ההדרגתית של קובצי ה-cookie של צד שלישי. לשם כך, מריצים את Chrome משורת הפקודה עם הדגל --test-third-party-cookies-phaseout. כדי לדעת מה הסימון הזה עושה, אפשר לעיין במאמר ניפוי באגים בקובצי cookie.

בלי קשר לאופן שבו אתם מפעילים את Chrome (עם או בלי הדגל), הכרטיסייה בעיות כוללת עכשיו את תיבת הסימון הכללת בעיות בקובצי cookie של צד שלישי מופעלת כברירת מחדל לכל משתמשי Chrome החדשים, וכתוצאה מכך, בדוחות:

אזהרה על שינוי תוכנה שעלול לגרום לכשל.
בעיות שקשורות לקובצי cookie של צד שלישי.

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

כדי לבדוק זאת, אפשר לבדוק את קובצי ה-cookie בדף ההדגמה הזה.

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

בנוסף, המסנן קובצי cookie לתשובה חסומים בחלונית רשת נוסח מחדש כדי להבהיר שבו מוצגים רק קובצי ה-cookie של התגובה החסומים.

תיבת הסימון מופעלת ומציגה רק את הבקשות עם קובצי Cookie שחסומים לתשובה.

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

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

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

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

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

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

בעיה ב-Chromium: 1410709.

דגשים שונים

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

CSS Nesting: בחלונית רכיבים מוצגת עכשיו כל שרשרת הבוררים עבור צאצאים בתצוגת עץ (1172985).
אפליקציה > מניפסט כולל עכשיו קטע בשם שכבת-על של פקדי החלונות שבודק אם הערך display_override נמצא במניפסט ומספק קישורים למסמכים רלוונטיים.
העץ מקורות > דף מבצע עכשיו את הפעולות הבאות, כולל, בין היתר: (1442863):
- התיקיות יופיעו באפור אם כל התוכן שלהן לא נכלל.
- צבע התיקיות בכתום אם כל התוכן שלהן מגיע ממפת מקור.
ביצועים: הגדרות הצילום יוסתרו אוטומטית כשמתחילים להקליט (1455498).
מקורות > עורך שחזר את ההתנהגות של Ctrl + חץ (Win) ו-Opt + חץ (MacO) (1468208).
אנימציות > לחצן החלפת המצב השהיית הכול שומר עכשיו על מצב הטעינה של הדפים (1446046).
Application > Storage > cache storage הועברה אל Application (אפליקציה) > אחסון > 'קטע מטמון' (1462622).
אפשר לשפר את הטקסטים וההסברים הקצרים מסוימים בממשק המשתמש: הסבר קצר על בו-זמניות בחומרה, טקסטים של מסנני רשת ואפשרות בתפריט הראשי, שימוש באותיות רישיות בתצוגת עץ האפליקציה, רשת > טקסטים של כותרות, מקורות > שינויים וטקסט של מערכת הקבצים.

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

אמולציה חדשה של רינדור: `prefers-reduced-transparency`

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

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

בעיה ב-Chromium: 1424879.

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

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

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

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

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

בעיה ב-Chromium: 1469345.

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

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

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

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

שלחו לנו הצעה או משוב דרך crbug.com.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
אפשר לשלוח ציוץ אל @ChromeDevTools.
אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.