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

Jecelyn Yeen

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

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

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

בעיה ב-Chromium: 1303521

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

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

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

בעיה ב-Chromium: 1306756

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

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

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

בעיה ב-Chromium: 1325751

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

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

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

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

אפשר לנסות את ההדגמה הזו של React!

בעיה ב-Chromium: 960909

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

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

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

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

בעיה ב-Chromium: 1322808

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

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

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

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

בעיה ב-Chromium: 1018906

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

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

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

בעיה ב-Chromium: 1297439

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

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

בעיה ב-Chromium: 1285091

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

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

בעיה ב-Chromium: 1288158

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

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

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

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

בעיה ב-Chromium: 1299241

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

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

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

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

פרטים שונים

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

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

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

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

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

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

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

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

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