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

שקיפות אישורים בחלונית Security

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

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

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

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

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

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

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

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

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

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

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

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

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