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

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

Kayce Basques

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

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

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

לאחר הקלדת המילה 'bold', חלונית הסגנונות מושלמת אוטומטית ל-'font-weight: bold'.

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

לחצני ה-HAR החדשים.

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

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

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

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

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

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

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

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

מספרי יציאות לרישום של קובצי שירות

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

יציאות של Service Worker.

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

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

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

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

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

החלונית Background Fetch.

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

החלונית Background Sync.

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

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

Puppeteer ב-Firefox

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

אחרי שמריצים את הפקודה 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.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
שליחת ציוץ אל @ChromeDevTools.
נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.