מה חדש בכלי הפיתוח (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.

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

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

בעיה ב-Chromium: 1027458.

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

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

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

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

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

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

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

בעיה ב-Chromium: 883325.

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

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

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

באנר להוצאה משימוש בחלק העליון של הכלי 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 לא פעיל של אחזור נתונים מ-service worker

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

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

‫no-op fetch handler והאזהרה התואמת ב-Console.

בעיה ב-Chromium: ‏ 1347319.

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

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

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

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

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

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

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

  • אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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