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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59