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

ניקוי חלונית הביצועים בטעינה מחדש

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

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

ניקוי חלונית הביצועים בטעינה מחדש.

בעיות ב-Chromium: 1101268, 1382044

עדכונים במכשיר ההקלטה

הצגה והדגשה של קוד זרימת המשתמש ב'מכשיר ההקלטה'

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

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

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

בעיה ב-Chromium: 1385489

התאמה אישית של סוגי הבורר של ההקלטה

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

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

בעיה ב-Chromium: 1384431

עריכה של זרימת המשתמש במהלך ההקלטה

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

עריכה במהלך תיעוד התהליך של המשתמש.

בעיה ב-Chromium: 1381971

הדפסה יפה ואוטומטית לפי מקום

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

בעבר, בחלונית מקורות הוצג תוכן מוקטן כברירת מחדל. כדי לעצב את התוכן, היה עליך ללחוץ על הלחצן 'הדפסה יפה' באופן ידני. בנוסף, התוכן שהודפס יפה לא הוצג באותה כרטיסייה, אלא בכרטיסייה אחרת ::formatted.

הצגת קובץ מוקטן לפני ואחרי הדפסה יפהפייה אוטומטית.

בעיות ב-Chromium: 1383453, 1382752, 1382397

הדגשת תחביר טובה יותר ותצוגה מקדימה מוטבעת עבור Vue, SCSS ועוד

בחלונית מקורות הדגשת התחביר בכמה פורמטים נפוצים של קבצים, ועכשיו אפשר לקרוא את הקוד ולזהות את המבנה שלו בקלות רבה יותר, כולל Vue , JSX , Dart, Lless, SCSS, SASS ו-CSS מוטבע.

הדגשת תחביר ב-Vue.

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

תצוגה מקדימה מוטבעת ל-Vue.

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

קישור למפת מקור של SASS.

בעיות ב-Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 13951, 13951

השלמה אוטומטית ארגונומית ועקבית במסוף

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

  • Tab משמש תמיד להשלמה אוטומטית.
  • ההתנהגות של Arrow right ושל Enter משתנה בהתאם להקשר.
  • חוויית ההשלמה האוטומטית זהה בכל עורכי הטקסט: בחלוניות מסוף, מקורות ורכיבים

לדוגמה, זה מה שקורה כשמקלידים cons במסוף:

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

  • המסוף מפעיל את השורה כשמקישים על Enter. בעבר, המערכת הייתה משלימה באופן אוטומטי את השורה עם ההצעה המובילה. להשלמה אוטומטית, מקישים על Tab או על Arrow Right. מפעיל את השורה על Enter.

  • במסוף האפשרות שנבחרה מודגשת ברשימת ההצעות באמצעות מקשי הקיצור Arrow up ו-Arrow down. מודגש במהלך ניווט ההצעות.

  • כדי לבצע השלמה אוטומטית באמצעות האפשרות שנבחרה במהלך הניווט, יש להשתמש במקשי המקלדת Tab, Enter או Arrow Right. השלמה אוטומטית באמצעות האפשרות שנבחרה במהלך הניווט.

  • כשמבצעים עריכה באמצע הקוד, למשל כשהסמן נמצא בין n ל-s, משתמשים ב-Tab להשלמה אוטומטית, ב-Enter כדי להפעיל את השורה וב-Arrow Right כדי להזיז את הסמן קדימה. עריכה באמצע הקוד.

בעיות ב-Chromium: 1399436, 1276960

דגשים שונים

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

  • פתרנו בעיית רגרסיה בכלי הפיתוח, שבה העצירה לא הסתיימה בהצהרה debugger בסקריפטים מוטבעים. (1385374)
  • הגדרת מסוף חדשה שמאפשרת להרחיב או לכווץ הודעות console.trace() כברירת מחדל. משנים את ההגדרות דרך הגדרות > העדפות > הרחבת הודעות console.trace() כברירת מחדל. (1139616)
  • החלונית קטעי טקסט בחלונית מקורות תומכת בהשלמה אוטומטית משופרת, בדומה למסוף. (772949) השלמה אוטומטית בקטעי קוד.

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

כדאי להשתמש ב-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