דף זה תורגם על ידי Cloud Translation API.

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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: 1400243.

הקלטה בעזרת בוררי פירס

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

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

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

בעיה ב-Chromium: 1411188.

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

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

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

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

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

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

להורדת תוספים

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

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

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

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

Elements > עדכוני סגנונות

מסמכי תיעוד של CSS

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

הסבר קצר עם תיעוד על נכס CSS.

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

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

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

בעיה ב-Chromium: 1401107.

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

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

בעיה ב-Chromium: 1172985.

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

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

console.* קריאות בנקודות עצירה מותנות עם סימן שאלה כתום ?
הודעות Logpoint עם שתי נקודות ורודות ..

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

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

לוחצים על הקישור שמוצג לצד ההודעה של נקודת העצירה (breakpoint) כדי לעבור ישירות לעורך של נקודות העצירה.

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

בעיה ב-Chromium: 1027458.

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

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

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

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

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

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

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

בעיה ב-Chromium: 883325.

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

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

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

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

מידע נוסף ושליחת משוב אפשר למצוא ב-RFC וב-crbug.com/1354548 המתאימים.

בעיה ב-Chromium: 1417647.

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

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

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

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

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

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

מגדלור 10

בחלונית Lighthouse פועל עכשיו Lighthouse 10.0.1. פרטים נוספים זמינים במאמר What's new ב-Lighthouse 10.0.1.

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

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

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

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

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

בעיה ב-Chromium: 772558.

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

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

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

handler של אחזור ללא תפעול (no-op) והאזהרה התואמת ב-Console.

בעיה ב-Chromium: 1347319.

דגשים שונים

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

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

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

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

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

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

שלחו לנו הצעה או משוב דרך crbug.com.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
אפשר לשלוח ציוץ אל @ChromeDevTools.
אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.