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

Kayce Basques
Kayce Basques
X GitHub

טוב לראות אותך שוב! התכונות החדשות שיתווספו לכלי הפיתוח ב-Chrome 63 כוללות:

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

תמיכה בניפוי באגים מרחוק של כמה לקוחות

אם ניסיתם פעם לנפות באגים באפליקציה מ-IDE כמו VS Code או WebStorm, סביר להניח שגיליתם שפתיחת כלי הפיתוח משבשת את סשן ניפוי הבאגים. בנוסף, הבעיה הזו מנעה שימוש בכלי הפיתוח כדי לנפות באגים בבדיקות של WebDriver.

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

ניפוי באגים מרוחק בכמה לקוחות היה הבעיה הכי פופולרית בכלי הפיתוח ב-crbug.com, והבעיה השלישית הכי פופולרית בכל פרויקט Chromium. תמיכה במספר לקוחות פותחת גם לא מעט הזדמנויות מעניינות לשילוב כלים אחרים עם DevTools, או לשימוש בכלים האלה בדרכים חדשות. לדוגמה:

  • לקוחות פרוטוקול כמו ChromeDriver או תוספי ניפוי הבאגים של Chrome ל-VS Code ול-Webstorm, ולקוחות WebSocket כמו Puppeteer, יכולים עכשיו לפעול בו-זמנית עם כלי הפיתוח.
  • שני לקוחות נפרדים של פרוטוקול WebSocket, כמו Puppeteer או chrome-remote-interface, יכולים עכשיו להתחבר לאותו כרטיסייה בו-זמנית.
  • תוספים ל-Chrome שמשתמשים ב-API‏ chrome.debugger יכולים לפעול עכשיו בו-זמנית עם כלי הפיתוח.
  • מעכשיו, כמה תוספים שונים ל-Chrome יכולים להשתמש ב-API‏ chrome.debugger באותו כרטיסייה בו-זמנית.

סביבות עבודה 2.0

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

‫Workspaces 2.0 מבוסס על גרסה 1.0, וכולל חוויית משתמש מועילה יותר ומיפוי אוטומטי משופר של קוד שעבר הידור (transpilation). התכונה הזו הייתה אמורה להיות מושקת זמן קצר אחרי Chrome Developer Summit‏ (CDS) 2016, אבל הצוות דחה את ההשקה כדי לפתור כמה בעיות.

כדי לראות את Workspaces 2.0 בפעולה, אפשר לצפות בחלק 'יצירה' (בסביבות 14:28) של ההרצאה על DevTools מ-CDS 2016.

ארבע ביקורות חדשות

ב-Chrome 63, נוספו 4 ביקורות חדשות לחלונית Audits:

  • הצגת תמונות בפורמט WebP.
  • השתמשו בתמונות עם יחס גובה-רוחב מתאים.
  • כדאי להימנע משימוש בספריות JavaScript חזיתיות עם פגיעויות ידועות באבטחה.
  • שגיאות דפדפן שנרשמו במסוף.

במאמר הרצת Lighthouse בכלי הפיתוח ל-Chrome מוסבר איך להשתמש בחלונית Audits כדי לשפר את איכות הדפים.

מידע נוסף על הפרויקט שמפעיל את החלונית ביקורות זמין במאמר בנושא Lighthouse.

הדמיה של התראות פוש עם נתונים בהתאמה אישית

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

  1. עוברים אל Simple Push Demo (הדגמה של שליחת הודעות פשוטות).
  2. לוחצים על הפעלת התראות בדחיפה.
  3. כשמופיעה ב-Chrome בקשה לאישור התראות, לוחצים על אישור.
  4. פותחים את כלי הפיתוח.
  5. עוברים לחלונית Service Workers (קובצי שירות).

  6. כותבים משהו בתיבת הטקסט Push.

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

    איור 1. הדמיה של הודעת פוש עם נתונים מותאמים אישית באמצעות תיבת הטקסט Push בחלונית Service Worker

  7. לוחצים על שליחה כדי לשלוח את ההתראה.

    ההתראה המדומה

    איור 2. ההתראה המדומה

הפעלת אירועי סנכרון ברקע באמצעות תגים מותאמים אישית

הפעלת אירועים של סנכרון ברקע הייתה זמינה בחלונית Service Workers במשך זמן מה, אבל עכשיו אפשר לשלוח תגים בהתאמה אישית:

  1. פותחים את כלי הפיתוח.
  2. עוברים לחלונית Service Workers (קובצי שירות).
  3. מזינים טקסט כלשהו בתיבת הטקסט Sync (סנכרון).
  4. לוחצים על סנכרון.

הפעלת אירוע מותאם אישית של סנכרון ברקע

איור 3. אחרי שלוחצים על סנכרון, כלי הפיתוח שולחים אירוע סנכרון ברקע עם התג המותאם אישית update-content אל Service Worker

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

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

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

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

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

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