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

Kayce Basques

התכונות החדשות והשינויים העיקריים שיחולו בקרוב בכלי הפיתוח ל-Chrome ב-Chrome 71 כוללים:

כדאי להמשיך לקרוא או לצפות בגרסת הסרטון של הדף הזה:

כדי להדגיש צומת DOM, מעבירים את העכבר מעל 'ביטוי פעיל'

כש-Live Expression מקבל הערכה של צומת DOM, מעבירים את העכבר מעל התוצאה של Live Express כדי להדגיש את הצומת באזור התצוגה.

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

איור 1. כדי להדגיש את הצומת באזור התצוגה, מעבירים את העכבר מעל תוצאה של ביטוי בזמן אמת

אחסון צומתי DOM כמשתנים גלובליים

כדי לאחסן צומת DOM כמשתנה גלובלי, מריצים ביטוי במסוף שבודק את הצומת, לוחצים לחיצה ימנית על התוצאה ובוחרים באפשרות Store as global variable.

אחסון כמשתנה גלובלי במסוף.

איור 2. אחסון כמשתנה גלובלי במסוף

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

אחסון כמשתנה גלובלי בעץ ה-DOM.

איור 3. אחסון כמשתנה גלובלי בעץ ה-DOM

המידע על היוזמים והעדיפות נמצאים עכשיו בייבוא ובייצוא של HAR

כדי לאבחן יומני רשת עם קולגות, אתם יכולים לייצא את בקשות הרשת לקובץ HAR.

מתבצע ייצוא של בקשות רשת לקובץ HAR.

איור 8. מתבצע ייצוא של בקשות רשת לקובץ HAR

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

עכשיו, כשמייצאים קובץ HAR, כלי הפיתוח כוללים את הפרטים של המפתחים ונתוני העדיפות בקובץ ה-HAR. כשמייבאים קובצי HAR חזרה לכלי הפיתוח, העמודות Initiator ו-Priority מאוכלסות עכשיו.

השדה _initiator מספק הקשר נוסף לגבי מה שגרם לבקשת המשאב. הפעולה ממופה לעמודה יוזם בטבלה 'בקשות'.

עמודת ההפעלה.

איור 9. עמודת היוזם

אפשר גם להחזיק את המקש Shift ולהעביר את העכבר מעל לבקשה כדי לראות את תאריך ההתחלה ואת יחסי התלות שלה.

צפייה ביזמים ויחסי תלות.

איור 10. צפייה ביזמים וביחסי התלות

השדה _priority מציין את רמת העדיפות שהדפדפן הקצה למשאב. הפעולה הזו ממופה לעמודה עדיפות בטבלה 'בקשות', שמוסתרת כברירת מחדל.

העמודה 'עדיפות'.

איור 11. העמודה 'עדיפות'

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

איך להציג את העמודה 'עדיפות'.

איור 12. איך להציג את העמודה עדיפות

גישה לתפריט הפקודות מהתפריט הראשי

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

תפריט הפקודות.

איור 13. תפריט הפקודה

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

פתיחת תפריט הפקודות מהתפריט הראשי.

איור 14. פתיחת תפריט הפקודות מהתפריט הראשי

נקודות עצירה של תמונה בתוך תמונה

תמונה בתוך תמונה הוא API ניסיוני חדש שמאפשר לדף ליצור חלון וידאו צף מעל שולחן העבודה.

צריך להפעיל את תיבות הסימון enterpictureinpicture, leavepictureinpicture ו-resize בחלונית המקומות של האזנה לאירועים כדי להשהות אותן בכל פעם שיופעל אחד מהאירועים האלה מסוג 'תמונה בתוך תמונה'. כלי הפיתוח מושהה בשורה הראשונה של ה-handler.

אירועי 'תמונה בתוך תמונה' בחלונית Event Listener Breakpoints.

איור 16. אירועי 'תמונה בתוך תמונה' בחלונית Event Listener Breakpoints

(טיפ בונוס) כדאי להריץ MonitoringEvents() במסוף כדי לצפות בהפעלת אירועים של רכיב

נניח שרוצים להוסיף גבול אדום מסביב ללחצן אחרי שמתמקדים בו ולוחצים על R, E, D, אבל לא יודעים לאילו אירועים להוסיף מאזינים. משתמשים ב-monitorEvents() כדי לתעד את כל האירועים של הרכיב במסוף.

  1. קבלת הפניה לצומת.

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

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

  2. מעבירים את הצומת כארגומנט הראשון אל monitorEvents().

    העברת הצומת ל-MonitorEvents().

    איור 18. העברת הצומת אל monitorEvents()

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

    האירועים של הצומת במסוף.

    איור 19. אירועי הצומת במסוף

קוראים לפונקציה unmonitorEvents() כדי להפסיק את הרישום של אירועים במסוף.

unmonitorEvents(temp1);

מעבירים מערך כארגומנט השני אל monitorEvents() אם רוצים לעקוב רק אחרי אירועים מסוימים או סוגי אירועים מסוימים:

monitorEvents(temp1, ['mouse', 'focus']);

הסוג mouse מורה לכלי הפיתוח לרשום את כל האירועים שקשורים לעכבר, כמו mousedown ו-click. סוגים נוספים של נתונים נתמכים הם key, touch ו-control.

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

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

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