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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1400243.

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

בנוסף לסלקטורים מותאמים אישית, סלקטורים ב-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.

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

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

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

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

מידע נוסף ומשוב זמינים ב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 והאזהרה התואמת ב-Console.

בעיה ב-Chromium: ‏ 1347319.

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

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

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

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

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

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

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

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

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