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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

העתקה כאחזור

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

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

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

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

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

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

הצגת עקבות

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

איור 7. הלחצן הצגת נתוני המעקב

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

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

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

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

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

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

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

באופן כללי, עכשיו אפשר לבחור כל אחד מהקטעים (שרשור ראשי, תזמון משתמש, GPU, ScriptStreamer, וכן הלאה) והצגה של הפעילות של קטע זה בכרטיסיות.

בחירת מכונות VM של JavaScript בחלונית הזיכרון

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

איור 9. בממשק המשתמש הישן בצד שמאל, המכונות הווירטואליות של JavaScript מוסתרות בתפריט הנפתח Target, ואילו בממשק המשתמש החדש שבצד שמאל הם מופיעים בקטע Select (בחירה) טבלה של מופע VM של JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   > עזרה > דיווח על בעיות בכלי הפיתוח ב'כלי פיתוח'.
• שליחת ציוץ אל @ChromeDevTools.
• נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.

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

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