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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1385489

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

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

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

בעיה ב-Chromium: 1384431

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

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

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

בעיה ב-Chromium: 1381971

הדפסה יפה באופן אוטומטי במקום

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

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

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

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

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

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

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

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

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

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

קישור למפת המקור עבור SASS.

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

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

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

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