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

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

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

בעיה ב-Chromium: 1285091

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

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

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

בעיה ב-Chromium: 1288158

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

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

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

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

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

בעיה ב-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 שקשורים לכלי פיתוח.

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59