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

Kayce Basques

התכונות החדשות והשינויים המשמעותיים שנוספו ל-DevTools בגרסה 67 של Chrome כוללים:

גרסה של נתוני הגרסה בסרטון:

פותחים את החלונית Network ומקישים על Command+F (ב-Mac) או על Control+F (ב-Windows,‏ Linux או ChromeOS) כדי לפתוח את החלונית החדשה Network Search. כלי הפיתוח מחפשים את השאילתה שסיפקתם בכותרות ובגופים של כל הבקשות לרשת.

חיפוש הטקסט 'cache-control' באמצעות החלונית החדשה של חיפוש הרשת.

איור 1. חיפוש הטקסט cache-control באמצעות החלונית החדשה של חיפוש הרשת

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

שאילתה של ביטוי רגולרי בחלונית 'חיפוש ברשת'.

איור 2. שאילתה של ביטוי רגולרי בחלונית 'חיפוש ברשת'.

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

ממשק המשתמש הישן והחדש.

איור 3. ממשק המשתמש הישן בצד ימין וממשק המשתמש החדש בצד ימין

כדי לפתוח את החיפוש הגלובלי, מקישים על Command+Option+F (ב-Mac) או על Control+Shift+F (ב-Windows, ב-Linux וב-ChromeOS). אפשר לפתוח אותו גם דרך תפריט הפקודות.

תצוגות מקדימות של ערכי משתני CSS בחלונית Styles

עכשיו, כשהערך של מאפיין צבע ב-CSS, כמו background-color או color, מוגדר למשתנה CSS, מוצגת תצוגה מקדימה של הצבע הזה בכלי הפיתוח.

דוגמה לערכי צבעים משתנים ב-CSS.

איור 4. בממשק המשתמש הישן בצד ימין, אין תצוגה מקדימה של צבע לצד color: var(--main-color), אבל בממשק המשתמש החדש בצד ימין יש

העתקה כאחזור

לוחצים לחיצה ימנית על בקשת רשת ובוחרים באפשרות העתקה > העתקה כ-Fetch כדי להעתיק ללוח את הקוד המקביל ל-fetch() של הבקשה הזו.

העתקת הקוד המקביל ל-fetch() עבור בקשה.

איור 5. העתקת הקוד המקביל ל-fetch() עבור בקשה

כלי הפיתוח יוצרים קוד כמו זה:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

עדכונים בחלונית 'ביקורות'

ביקורות חדשות

בחלונית ביקורות יש 2 ביקורות חדשות, כולל:

אפשרויות הגדרה חדשות

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

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

אפשרויות חדשות להגדרת ביקורת.

איור 6. אפשרויות הגדרה חדשות לבדיקות

הצגת נתוני מעקב

אחרי שבודקים דף, לוחצים על View Trace (הצגת המעקב) כדי להציג בחלונית Performance (ביצועים) את נתוני ביצועי העומס שעליהם מבוסס הביקורת.

הלחצן 'צפייה בעקבות'.

איור 7. הלחצן צפייה בעקבות

איך מפסיקים לולאות אינסופיות

אם אתם עובדים הרבה עם לולאות for, לולאות do...while או חזרה חוזרת (recursion), סביר להניח שביצעתם לולאה אינסופית בטעות במהלך הפיתוח של האתר. כדי להפסיק את הלולאה האינסופית, עכשיו אפשר:

  1. פותחים את החלונית מקורות.
  2. לוחצים על השהיה השהיה. הלחצן ישתנה להמשך ביצוע הסקריפט המשך.
  3. לוחצים לחיצה ארוכה על המשך ביצוע הסקריפט המשך ואז בוחרים באפשרות עצירת הקריאה הנוכחית של JavaScript עצירה.

בסרטון שלמעלה, השעון מתעדכן באמצעות טיימר setInterval(). לחיצה על Start Infinite Loop מפעילה לולאה do...while שלא נגמרת. מרווח הזמן ממשיך כי הוא לא היה פועל כשהאפשרות Stop Current JavaScript Call (עצירת הקריאה הנוכחית של JavaScript) עצירה נבחרה.

'תזמון משתמש' בכרטיסיות 'ביצועים'

כשמציגים הקלטה של ביצועים, לוחצים על הקטע User Timing כדי להציג את המדדים של User Timing בכרטיסיות Summary (סיכום), Bottom-Up (מלמטה למעלה), Call Tree (עץ קריאות) ו-Event Log (יומן אירועים).

הצגת מדדי 'תזמון משתמש' בכרטיסייה 'מלמטה למעלה'.

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

באופן כללי, עכשיו אפשר לבחור כל אחד מהקטעים (Main Thread,‏ User Timing,‏ GPU,‏ ScriptStreamer וכו') ולראות את הפעילות של הקטע הזה בכרטיסיות.

בחירת מכונות VM ל-JavaScript בחלונית Memory

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

צילומי מסך של חלונית הזיכרון לפני ואחרי.

איור 9. בממשק המשתמש הישן שמימין, מכונות ה-VM של JavaScript מוסתרות מאחורי התפריט הנפתח Target, ואילו בממשק המשתמש החדש שמשמאל הן מוצגות בטבלה Select JavaScript VM Instance.

לצד המכונה developers.google.com יש 2 ערכים: 8.7 MB ו-13.3 MB. הערך הימני מייצג את הזיכרון שהוקצה בגלל JavaScript. הערך הימני מייצג את כל הזיכרון של מערכת ההפעלה שמוקצה בגלל מכונת ה-VM הזו. הערך הימני כולל את הערך הימני. במנהל המשימות של Chrome, הערך הימני תואם לערך JavaScript Memory והערך הימני תואם לערך Memory Footprint.

השם של הכרטיסייה 'רשת' השתנה לכרטיסייה 'דף'

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

שני חלונות של DevTools זה לצד זה, שמוצג בהם שינוי השם.

איור 10. בממשק המשתמש הישן בצד ימין, הכרטיסייה שמציגה את המשאבים של הדף נקראת Network, ואילו בממשק המשתמש החדש בצד ימין היא נקראת Page.

עדכונים של העיצוב הכהה

ב-Chrome 67 יש כמה שינויים קלים בערכת הצבעים של העיצוב הכהה. לדוגמה, סמלי נקודות העצירה והשורה הנוכחית של הביצוע צבועים עכשיו בירוק.

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

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

שקיפות אישורים בחלונית 'אבטחה'

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

פרטי שקיפות האישור בחלונית האבטחה.

איור 12. מידע על שקיפות אישורים בחלונית האבטחה

בידוד של אתרים בחלונית 'ביצועים'

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

תרשימי אש לכל תהליך בהקלטת ביצועים.

איור 13. תרשימי להבות לכל תהליך בהקלטה של ביצועים

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.