מה חדש בכלי הפיתוח (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, וכולל חוויית משתמש מועילה יותר ומיפוי אוטומטי משופר של קוד שעבר טרנספילציה. התכונה הזו הייתה אמורה להיות מושקת זמן קצר אחרי Chrome Developer Summit‏ (CDS) 2016, אבל הצוות דחה את ההשקה כדי לפתור כמה בעיות.

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

ארבעה תהליכי ביקורת חדשים

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

  • הצגת תמונות בפורמט 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

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

  • אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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