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

Jecelyn Yeen

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

התכונה הפעלה מחדש של המסגרת חזרה! אפשר להריץ מחדש את הקוד הקודם כשמושהים במקום כלשהו בפונקציה. בעבר, התכונה הזו הוצאה משימוש והוסרה בגרסה 92 של Chrome בגלל בעיות יציבות.

בדוגמה הזו, מאתר הבאגים מושהה בהתחלה בנקודת העצירה (שורה 343) ליד סוף הפונקציה toggleColorScheme. כדי להפעיל מחדש את הניפוי באגים מתחילת הפונקציה toggleColorScheme, מרחיבים את הקטע Call stack בחלונית Debugger, לוחצים לחיצה ימנית על toggleColorScheme ובוחרים באפשרות Restart frame.

בעיה ב-Chromium: 1303521

אפשרויות להפעלה איטית בחלונית ההקלטה

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

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

בעיה ב-Chromium: ‏ 1306756

איך יוצרים תוסף לחלונית ההקלטה

עכשיו אפשר ליצור או להתקין תוסף ל-Chrome כדי לייצא סקריפטים של הפעלות חוזרות בפורמט המועדף. במאמר Recorder extension API מוסבר איך ליצור תוסף כזה.

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

בעיה ב-Chromium: ‏ 1325751

קיבוץ קבצים לפי 'כפי שנוצר' / 'פרוס' בחלונית 'מקורות'

מפעילים את האפשרות החדשה Group files by Authored / Deployed כדי לארגן את הקבצים בחלונית Sources. כשמפתחים אפליקציות אינטרנט באמצעות מסגרות (לדוגמה, React, ‏ Angular), יכול להיות שיהיה קשה להתמצא בקובצי המקור בגלל הקבצים הממוזערים שנוצרים על ידי כלי הבנייה (לדוגמה, Webpack, ‏ Vite).

בעזרת תיבת הסימון הזו, אפשר לקבץ קבצים ל-2 קטגוריות כדי לחפש קבצים מהר יותר:

• נכתבה. בדומה לקובצי המקור שמוצגים בסביבת הפיתוח המשולבת (IDE). כלי הפיתוח יוצרים את הקבצים האלה על סמך מפות מקור (שמסופקות על ידי כלי הבנייה).
• נפרס. הקבצים בפועל שהדפדפן קורא. בדרך כלל הקבצים האלה מוקטנים.

רוצים לנסות בעצמכם? הנה הדגמה של React.

בעיה ב-Chromium: ‏ 960909

מסלול חדש של תזמוני משתמשים בחלונית 'תובנות לגבי הביצועים'

אפשר להמחיש את סימני performance.measure() בהקלטה באמצעות הרצועה החדשה User Timings בחלונית Performance insights.

לדוגמה, בדף האינטרנט הזה נעשה שימוש בשיטה performance.measure() כדי לחשב את הזמן שחלף מאז טעינת הטקסט.

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

בעיה ב-Chromium: ‏ 1322808

הצגת משבצת שהוקצתה לרכיב

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

בדוגמה הזו יש כרטיסים עם כמה משבצות שנקראות בשם. בודקים את משבצת person-occupation של כרטיס, לוחצים על התג slot שלידו כדי לראות את המשבצת שהוקצתה לו.

כאן מוסבר איך להשתמש ברכיבים <template> ו-<slot> כדי ליצור תבנית גמישה שאפשר להשתמש בה כדי לאכלס את ה-Shadow DOM של רכיב אינטרנט.

בעיה ב-Chromium: ‏ 1018906

סימולציה של הפעלות בו-זמניות בחומרה להקלטות של ביצועים

ההגדרה החדשה Hardware concurrency (מקבילות חומרה) בחלונית Performance (ביצועים) מאפשרת למפתחים להגדיר את הערך שמדווח על ידי navigator.hardwareConcurrency.

חלק מהאפליקציות משתמשות ב-navigator.hardwareConcurrency כדי לשלוט במידת ההקבלה של האפליקציה שלהן, למשל כדי לשלוט בגודל של מאגר ה-pthread של Emscripten. התכונה הזו מאפשרת למפתחים לבדוק את ביצועי האפליקציה שלהם עם מספרים שונים של ליבות.

בעיה ב-Chromium: ‏ 1297439

תצוגה מקדימה של ערך שאינו צבע כשמשלימים אוטומטית משתני CSS

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

בעיה ב-Chromium: ‏ 1285091

זיהוי מסגרות חסימה בחלונית 'מטמון לדף הקודם/הבא'

בחלונית Back/forward cache בחלונית Application יש קטע חדש של frames שעוזר לכם לזהות מסגרות חוסמות שאולי מונעות מהדף להיות כשיר ל-bfcache.

בעיה ב-Chromium: ‏ 1288158

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

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

1. מאפיינים שניתן למנות
2. מאפיינים לא ניתנים למנייה
3. מאפיינים שניתנים למנייה ועוברים בירושה
4. מאפיינים שעברו בירושה ולא ניתן למנות אותם

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

בעיה ב-Chromium: ‏ 1299241

שיפורים במפות המקור

ריכזנו כאן כמה תיקונים במפות מקור כדי לשפר את חוויית הניפוי הכוללת:

• נקודות עצירה פועלות עכשיו ב-inline <script> עם הערות sourceURL.
• הדיבאגר פותר עכשיו משתנים בהיקף בלוק בתצוגה Scope באמצעות מפות מקור.
• הבאג הזה תוקן: עכשיו אפשר לפתור בעיות במשתנים בפונקציות חץ בתצוגה Scope באמצעות מפות מקור.

בעיות ב-Chromium: 1329113, 1322115

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

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

• תוקנה ההגדרה השלמה אוטומטית בחלונית מקורות. בעבר, ההשלמה האוטומטית תמיד פעלה גם אם ההגדרה שלה הייתה מושבתת. (1323286)
• עדכנו את הכרטיסייה Manifest בחלונית Application כדי לנתח את הפורמט העדכני של ערכת הצבעים. (1318305)
• שיפרנו את ההצעות לפתרון בעיות שקשורות לחסימת הרינדור של <script async> בחלונית תובנות לגבי ביצועים. בעבר, כלי הפיתוח הציעו להוסיף add async attribute to the script tag גם אם התסריט כבר סומן כ-async. (1334096)
• בחלונית תובנות לגבי ביצועים יש עכשיו אפשרות לזהות מסגרות iframe כסיבות אפשריות לשינויים בפריסה. אפשר לראות את פרטי ה-iframe בחלונית פרטים. (1328873)
• כשלוחצים על open file (פתיחת קובץ) בתפריט הפקודות, הקבצים שנוצרו (קבצים שנוצרו על ידי מפות מקור) מדורגים עכשיו גבוה יותר, כך שהם מופיעים מעל סקריפטים שפריסתם דומה. (1312929)

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

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

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

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

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

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

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