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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

ממשק משתמש בהתאמה אישית להפעלה חוזרת.

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

בעיה ב-Chromium: ‏ 1400243.

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1401107.

תמיכה ב-CSS בתוך CSS

בחלונית Elements (רכיבים) > Styles (סגנונות) המערכת מזהה עכשיו תחביר של CSS Nesting (עיצוב עץ ב-CSS) ומחילה סגנונות עץ על הרכיבים הנכונים.

בעיה ב-Chromium: ‏ 1172985.

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1027458.

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 883325.

הכלי לניתוח ביצועי JavaScript הוצא משימוש

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

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

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

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

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

בעיה ב-Chromium: ‏ 1417647.

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

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

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

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

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

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

Lighthouse 10

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 772558.

אזהרה במסוף על הסרת טיפול האחזור של שירות ה-worker ללא פעולה

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

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

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

בעיה ב-Chromium: ‏ 1347319.

רגעי שיא שונים

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.