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

Kayce Basques

שלום! מה חדש בכלי הפיתוח ל-Chrome ב-Chrome 76.

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

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

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

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

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

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

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

האפשרויות הבאות עברו להגדרות הרשת: שימוש בשורות בקשה גדולות, קיבוץ לפי מסגרת, הצגת סקירה כללית, צילום צילומי מסך. איור 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 Workers כוללת עכשיו מספרי יציאות בשמות שלה. של קובצי שירות (service worker) שאתם מבצעים ניפוי באגים.

איור 6. יציאות של Service Worker.

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

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

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

עוברים לחלונית Application, פותחים את הכרטיסייה Background fetch או Background Sync (סנכרון ברקע) ולאחר מכן לוחצים על הקלטה כדי להתחיל את הרישום ביומן אירועים. לוחצים על אירוע כדי לראות מידע נוסף לגביו.

איור 7. החלונית Background Fetch. הדגמה של מקסים סלניקוב.

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

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

Puppeteer ב-Firefox

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

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

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

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

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

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

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

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

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

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