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

Kayce Basques

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

• חיפוש בכל הכותרות של הרשת
• תצוגה מקדימה של ערכי משתני CSS בחלונית Styles
• העתקה כאחזור
• ביקורות חדשות, אפשרויות הגדרה למחשב וצפייה בנתוני מעקב
• איך מפסיקים לולאות אינסופיות
• תזמוני משתמש בכרטיסיות ביצועים
• מופעי VM של JavaScript מופיעים בבירור בחלונית Memory
• הכרטיסייה Network בחלונית Sources נקראת עכשיו Page
• עדכונים בעיצוב הכהה
• מידע על שקיפות אישורים בחלונית אבטחה
• תכונות של בידוד אתרים בחלונית Performance

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

חיפוש בכל הכותרות והתשובות של הרשת

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

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

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

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

עדכונים בממשק המשתמש של חלונית החיפוש

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

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

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

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

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

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

העתקה כאחזור

לוחצים לחיצה ימנית על בקשת רשת ואז בוחרים באפשרות העתקה > העתקה כ-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 ביקורות חדשות, כולל:

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

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

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

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

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

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

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

איור 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.

איור 8. צפייה במדדי תזמון המשתמשים בכרטיסייה Bottom-Up. הסרגל הכחול שמימין לקטע 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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