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

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

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

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

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

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

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

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

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

שינוי התוכן של XHR ובקשות אחזור

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1153956.

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

הכרטיסייה Response של בקשה עם application/[subtype]+json סוג משנה MIME (לדוגמה, ld+json , hal+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 החסומים בתגובה.

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

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

לדוגמה:

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

בעיה ב-Chromium: 772558.

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

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

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

בעיה ב-Chromium: 1410709.

פרטים שונים

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

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

בעיה ב-Chromium: 1469345.

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

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

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

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

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

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

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