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

Jecelyn Yeen

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

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

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

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

בעיה ב-Chromium: 1303521

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

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

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

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

בעיה ב-Chromium: 1306756

פיתוח תוסף לחלונית של מכשיר ההקלטה

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

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

תוסף בהתאמה אישית לחלונית של מכשיר ההקלטה

בעיה ב-Chromium: 1325751

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

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

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

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

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

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

בעיה ב-Chromium: 960909

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

אפשר להציג גרפית את הסימונים performance.measure() בהקלטה באמצעות הטראק החדש זמני משתמשים בחלונית תובנות לגבי ביצועים.

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

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

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

בעיה ב-Chromium: 1322808

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

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

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

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

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

בעיה ב-Chromium: 1018906

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

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

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

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

בעיה ב-Chromium: 1297439

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

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

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

בעיה ב-Chromium: 1285091

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

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

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

בעיה ב-Chromium: 1288158

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

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

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

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

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

בעיה ב-Chromium: 1299241

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

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

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

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

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

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

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

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

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

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

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

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

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