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

Kayce Basques

שלום! ריכזנו כאן את החידושים ב-Chrome DevTools בגרסה 76 של Chrome.

השלמה אוטומטית עם ערכים של CSS

כשמוסיפים הצהרות סגנון לצומת DOM, לפעמים קל יותר לזכור את ערך ההצהרה מאשר את שם ההצהרה. לדוגמה, כשמשנים את העמודה של הצומת <p> לעמודה מודגשת, קל יותר לזכור את הערך bold מאשר את השם font-weight. ממשק המשתמש של המילוי האוטומטי בחלונית הסגנונות תומך עכשיו בערכי CSS. אם אתם זוכרים את ערך מילת המפתח הרצוי אבל לא זוכרים את שם המאפיין, נסו להקליד את הערך והשלמה אוטומטית אמורה לעזור לכם למצוא את השם שאתם מחפשים.

איור 1. אחרי שמקלידים bold, font-weight: bold מופיע בתיבה 'סגנונות'.

אפשר לשלוח משוב על התכונה החדשה הזו בבעיה מספר 931145 ב-Chromium.

ממשק משתמש חדש להגדרות הרשת

לחלונית 'רשת' הייתה בעבר בעיה בנוחות השימוש, שבה לא ניתן היה לגשת לאפשרויות כמו תפריט ויסות הנתונים (throttle) כשהחלון של כלי הפיתוח היה צר. כדי לפתור את הבעיה ולצמצם את העומס בחלונית 'רשת', העברנו כמה אפשרויות שפחות נפוצות לחלונית החדשה של הגדרות הרשת.

איור 2. הגדרות רשת.

האפשרויות הבאות הועברו להגדרות רשת: Use Large Request Rows, Group By Frame, Show Overview ו-Capture Screenshots. באיור 3 מוצג מיפוי של המיקומים הישנים למיקומים החדשים.

איור 3. מיפוי המיקומים הישנים למיקומים החדשים.

אפשר לשלוח משוב על השינוי בממשק המשתמש הזה בבעיה מס' 892969 ב-Chromium.

הודעות WebSocket בייצוא של קובצי HAR

כשמייצאים קובץ HAR מחלונית הרשת כדי לשתף יומני רשת עם קולגות, קובץ ה-HAR כולל עכשיו הודעות WebSocket. המאפיין _webSocketMessages מתחיל בקו תחתון כדי לציין שהוא שדה מותאם אישית.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

ניתן לשלוח משוב על התכונה החדשה הזו אל בעיה מס' 496006 ב-Chromium.

לחצני ייבוא וייצוא של HAR

עכשיו קל יותר לשתף יומני רשת עם עמיתים באמצעות הלחצנים החדשים ייצוא הכול כ-HAR עם תוכן וייבוא קובץ HAR . האפשרות לייבא ולייצא קבצי HAR הייתה קיימת בכלי הפיתוח כבר זמן מה. הלחצנים שקל יותר למצוא הם השינוי החדש.

איור 4. לחצני ה-HAR החדשים.

ניתן לשלוח משוב על השינוי הזה בממשק המשתמש לגבי בעיה מס' 904585 ב-Chromium.

שימוש כולל בזיכרון בזמן אמת

בחלונית 'זיכרון' מוצג עכשיו השימוש הכולל בזיכרון בזמן אמת.

איור 5. בחלק התחתון של חלונית הזיכרון, הדף משתמש ב-43.4MB מהזיכרון בסך הכול. 209KB/s מציין שהשימוש הכולל בזיכרון גדל ב-209KB לשנייה.

ראו גם צג ביצועים למעקב אחר השימוש בזיכרון בזמן אמת.

אפשר לשלוח משוב על התכונה החדשה הזו בבעיה מספר 958177 ב-Chromium.

מספרי יציאות לרישום של קובצי שירות (service worker)

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

איור 6. יציאות של קובצי שירות (service worker).

ניתן לשלוח משוב על השינוי הזה בממשק המשתמש לגבי בעיה מס' 601286 ב-Chromium.

בדיקת אירועים של אחזור וסנכרון ברקע

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

עוברים לחלונית Application, פותחים את הכרטיסייה Background Fetch או Background Sync ולוחצים על Record כדי להתחיל לתעד אירועים. לוחצים על אירוע כדי לראות מידע נוסף לגביו.

איור 7. החלונית 'אחזור ברקע'. הדגמה מאת Maxim Salnikov.

איור 8. החלונית Background Sync.

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

Puppeteer ל-Firefox

Puppeteer for Firefox הוא פרויקט ניסיוני חדש שמאפשר להפוך את Firefox לאוטומציה באמצעות Puppeteer API. במילים אחרות, עכשיו אפשר להפוך את Firefox ו-Chromium לאוטומטיים באמצעות אותו Node API, כפי שמוצג בסרטון שבהמשך.

אחרי שמריצים את הפקודה node example.js, הדפדפן Firefox נפתח והטקסט page מוכנס לתיבת החיפוש באתר התיעוד של Puppeteer. לאחר מכן, אותה משימה חוזרת על עצמה ב-Chromium.

אתם מוזמנים לצפות בשיחות של Puppeteer מאת Joel ו-Andrey ב-Google I/O 2019, לקבלת מידע נוסף על Puppeteer ו-Puppeteer ב-Firefox. ההכרזה על Firefox מתבצעת בסביבות 4:05.

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

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

פנייה לצוות של כלי הפיתוח ל-Chrome

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

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

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

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