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

Jecelyn Yeen

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

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

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

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

בעיה ב-Chromium: 1303521

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

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

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

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

בעיה ב-Chromium: 1306756

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

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

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

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

בעיה ב-Chromium: 1325751

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

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

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

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

אפשר לנסות זאת בעצמך עם ההדגמה של התגובה!

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

בעיה ב-Chromium: 960909

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

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

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

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

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

בעיה ב-Chromium: 1322808

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

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

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

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

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

בעיה ב-Chromium: 1018906

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

ההגדרה החדשה בו-זמניות בחומרה בחלונית ביצועים מאפשרת למפתחים להגדיר את הערך שמדווח על ידי navigator.hardwareConcurrency.

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

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

בעיה ב-Chromium: 1297439

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

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

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

בעיה ב-Chromium: 1285091

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

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

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

בעיה ב-Chromium: 1288158

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

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

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

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

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

בעיה ב-Chromium: 1299241

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

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

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

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

דגשים שונים

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

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

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59