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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1153956.

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

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

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

בעיה ב-Chromium: 406900.

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

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

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

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

מידע נוסף זמין בפוסט ייעודי על כללי ספקולציות לניפוי באגים.

בעיה ב-Chromium: 1410709.

צבעים חדשים

יכול להיות שכבר שמתם לב שלכלי הפיתוח יש עכשיו מראה מעודכן שמתאים יותר ל-Chrome. אחד הגורמים המשפיעים הוא ערכת הצבעים החדשה.

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

בגרסה הזו (117) נוספו שיפורי חוויית המשתמש בכלי הפיתוח, שכבר צוינו ומפורטים יותר, כולל כמה טקסטים משופרים של ממשק המשתמש.

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

פרטים שונים

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

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

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

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

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

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

בעיה ב-Chromium: 1424879.

מעקב אחר פרוטוקול משופר

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

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

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

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

בעיה ב-Chromium: 1469345.

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

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

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

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

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