דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

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

הערה: מומלץ לבדוק ב-chrome://version איזו גרסת Chrome פועלת אצלך. אם מריצים גרסה קודמת, התכונות האלה לא קיימות. אם מריצים גרסה מאוחרת יותר, יכול להיות שהתכונות האלה השתנו. Chrome מתעדכן באופן אוטומטי לגרסה ראשית חדשה בערך כל 6 שבועות.

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

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

חיפוש של הטקסט '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), ואילו בממשק המשתמש החדש בצד שמאל יש

העתקה כאחזור

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

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

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

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

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

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

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

הצגת עקבות

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

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

עצירת לולאות אינסופיות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שני חלונות של כלי פיתוח זה לצד זה, שמדגים את שינוי השם.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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