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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

עדכונים לגבי מכשיר ההקלטה

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

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

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

ממשק משתמש מותאם אישית להפעלה מחדש.

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

בעיה ב-Chromium: ‏ 1400243.

הקלטה באמצעות בוררי חיתוך

בנוסף לסלקטורים מותאמים אישית, סלקטורים ב-CSS, סלקטורים של ARIA, סלקטורים של טקסט וסלקטורים של XPath, עכשיו אפשר להקליט באמצעות סלקטורים מסוג pierce. הסלקטורים האלה מתנהגים כמו סלקטורים של CSS, אבל הם יכולים גם לחדור ל-shadow roots.

מתחילים הקלטה חדשה בדף עם shadow DOM ומסמנים את התיבה תיבת סימון. Pierce בסוגי בוררים להקלטה. מתעדים את האינטראקציה עם רכיבים ב-shadow DOM ובודקים את השלב המתאים.

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

בעיה ב-Chromium: 1411188.

ייצוא כסקריפט של Puppeteer עם ניתוח Lighthouse

באפליקציית מכשיר הקלטה נוספה אפשרות ייצוא חדשה: Puppeteer (כולל ניתוח Lighthouse). באמצעות Puppeteer, אפשר לבצע אוטומציה של Chrome ולשלוט בו. בעזרת Lighthouse, אפשר ללכוד את נתוני הביצועים של האתר ולשפר אותם.

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

ייצוא של Puppeteer (כולל ניתוח Lighthouse).

מריצים את סקריפט Puppeteer כדי לקבל דוח Lighthouse בקובץ flow.report.html.

דוח Lighthouse נפתח ב-Chrome.

הורדת תוספים

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

האפשרות 'קבלת תוספים' בתפריט הנפתח 'ייצוא'.

אתם יכולים להוסיף תוסף משלכם לרשימה של תוספי כלי ההקלטה. נשמח לראות את הערוץ שלך ברשימה!

בעיות ב-Chromium: 1417104, 1413168.

רכיבים > עדכוני סגנונות

תיעוד CSS

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

הסבר קצר עם תיעוד על מאפיין CSS.

בתיאור הכלי יש גם קישור מידע נוסף שמוביל אל MDN CSS Reference בנושא הנכס הזה.

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

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

בעיה ב-Chromium: 1401107.

תמיכה בקינון CSS

בחלונית Elements > Styles יש עכשיו תמיכה בתחביר של CSS Nesting, והסגנונות המקוננים מוחלים על הרכיבים הנכונים.

בעיה ב-Chromium: ‏ 1172985.

סימון נקודות ביומן ונקודות עצירה מותנות במסוף

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

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

במסוף יש עכשיו קישורי עוגן תקינים לנקודות עצירה בקובצי מקור, במקום סקריפטים של VM<number> ש-Chrome יוצר כדי להריץ כל קטע של JavaScript ב-V8.

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

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

בעיה ב-Chromium: 1027458.

התעלמות מסקריפטים לא רלוונטיים במהלך ניפוי באגים

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

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

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

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

סקריפטים ותיקיות שנכללים ברשימת ההתעלמות מוצגים באפור. אפשר להסתיר אותם באמצעות אפשרות ניסיונית בתפריט הנפתח &#39;אפשרויות נוספות&#39;.

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

בעיה ב-Chromium: ‏ 883325.

הוצאה משימוש של הכלי לניתוח ביצועים (profiler) של JavaScript

כבר ב-Chrome 58, צוות כלי הפיתוח תכנן להוציא משימוש בסופו של דבר את JavaScript Profiler ולגרום למפתחי Node.js ו-Deno להשתמש בחלונית Performance ליצירת פרופילים של ביצועי המעבד (CPU) ב-JavaScript.

בגרסה הזו של כלי הפיתוח (112) מתחיל תהליך ההוצאה משימוש של הכלי לניתוח ביצועים (profiler) של JavaScript, שכולל ארבעה שלבים. עכשיו מוצג באנר האזהרה המתאים בחלונית JavaScript Profiler.

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

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

מידע נוסף ומשוב זמינים ב-RFC המתאים וב-crbug.com/1354548.

בעיה ב-Chromium: ‏ 1417647.

אמולציה של ירידה ברגישות לניגודיות

בכרטיסייה Rendering נוספה אפשרות חדשה לרשימה Emulate vision deficiencies – Reduced contrast. באמצעות האפשרות הזו, תוכלו לראות איך האתר שלכם נראה לאנשים עם רגישות מופחתת לניגודיות.

האפשרות של ניגודיות מופחתת שנבחרה במסגרת הפונקציונליות &#39;חיקוי של ליקויי ראייה&#39;.

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

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

בעיות ב-Chromium: 1412719, ‏ 1412721.

Lighthouse 10

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

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

‫Lighthouse > הגדרות. > תיבת סימון ריקה. Legacy navigation מושבתת עכשיו כברירת מחדל. האפשרות הזו משתמשת בהגדרות Lighthouse מדור קודם במצב ניווט.

השבתת הניווט הקודם.

‫Lighthouse 10 משתמש עכשיו ב-Moto G Power כמכשיר האמולציה שמוגדר כברירת מחדל. הכלי DevTools מוסיף את המכשיר הזה אל הגדרות. הגדרות > מכשירים.

‫Moto G Power ברשימת המכשירים.

בעיה ב-Chromium: ‏ 772558.

אזהרה במסוף לגבי הסרה של handler לא פעיל של בקשת fetch של service worker

‫Chrome 112 מדלג על מטפלי אחזור של קובצי שירות (service worker) מסוג no-op (ללא פעולה) כי הם עלולים להאט את הניווט אבל לא משרתים מטרה כלשהי. כבר לא נדרש להשתמש ב-handlers כאלה כדי שהאתר שלכם ייחשב כ-Progressive Web App.

במסוף מוצגת עכשיו אזהרה אם נמצא באתר שלכם handler של אחזור no-op. כדאי להסיר אותו.

‫handler לאחזור no-op והאזהרה התואמת במסוף.

בעיה ב-Chromium: ‏ 1347319.

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

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

  • בחלונית מקורות > נקודות עצירה מוצגות עכשיו נתיבי קבצים שונים לצד שמות קבצים לא חד-משמעיים (1403924).
  • בקטע Main בתרשים הלהבה של החלונית ביצועים, הערך CpuProfiler::StartProfiling מסומן עכשיו כ-Profiler Overhead (1358602).
  • שיפור ההשלמה האוטומטית בכלי הפיתוח:
    • מקורות: השלמות עקביות של כל מילה (1320204).
    • מסוף: Arrow down ההצעה הראשונה נבחרת וההצעות מקבלות Tab רמזים (1276960).
  • הוספנו לכלי הפיתוח נקודת עצירה של event listener כדי לאפשר לכם להשהות כשאתם פותחים חלון עם תמונה בתוך תמונה של מסמך (1315352).
  • ב-DevTools הוגדר פתרון עקיף שמאפשר להציג בצורה תקינה ארטיפקטים של Vue2 webpack כ-JavaScript ‏ (1416562).
  • ההגדרה Console מקבלת שם טוב יותר: הרחבת הודעות console.trace() באופן אוטומטי. (1139616).

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

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

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

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

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

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