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

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

בעיה ב-Chromium: ‏ 1285091

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

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

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

בעיה ב-Chromium: ‏ 1288158

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

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

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

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

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

בעיה ב-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.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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