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

Kayce Basques
Kayce Basques
X GitHub

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

גרסת וידאו של נתוני הגרסה:

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

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

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

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

שאילתת ביטוי רגולרי בחלונית Network Search (חיפוש ברשת).

איור 2. שאילתת ביטוי רגולרי בחלונית Network Search (חיפוש ברשת).

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

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

איור 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 ביקורות חדשות, כולל:

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

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

  • שמירה של אזור התצוגה בשולחן העבודה והגדרות סוכן המשתמש. במילים אחרות, אתם יכולים למנוע מהחלונית Audits לדמות מכשיר נייד.
  • השבתה של ויסות נתונים (throttle) ברשת ובמעבד CPU.
  • שמירה של נתוני אחסון, כמו LocalStorage ו-IndexedDB, בין ביקורות.

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

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

הצגת פרטי ההעברה

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

הכפתור View Trace (צפייה בעקבות).

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

הפסקת לולאות אינסופיות

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

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

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

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

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

צפייה במדדי תזמון משתמשים בכרטיסייה Bottom-Up.

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

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

בחירת מופעי VM של JavaScript בחלונית Memory

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

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

איור 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. תרשימי להבות (flame charts) לכל תהליך בהקלטת ביצועים

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

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

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

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

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

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