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

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

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

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

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

בעיה ב-Chromium: ‏ 1401107.

תמיכה בהטמעת עץ של CSS

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

בעיה ב-Chromium: ‏ 1172985.

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1027458.

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 883325.

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

בתחילת השימוש ב-Chrome 58, צוות כלי הפיתוח תכננו להוציא משימוש את JavaScript Profiler, ולמפתחי 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.

הצגת אזהרה במסוף לגבי הסרת handler של אחזור קובץ שירות (service worker) ללא תפעול

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

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

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

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

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

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