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

Kayce Basques

התכונות החדשות שיתווספו לכלי הפיתוח ב-Chrome 65 כוללות:

• שינויים מקומיים
• כלים חדשים לנגישות
• הכרטיסייה שינויים
• ביקורות חדשות על SEO וביצועים
• כמה הקלטות בחלונית Performance
• ניפוי באגים אמין בקוד עם workers וקוד אסינכרוני

בהמשך מופיעה גרסת הווידאו של הערות השחרור האלה.

שינויים מברירת המחדל של המערכת

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

איור 1. שמירת שינוי CSS בטעינות דפים באמצעות Local Overrides

איך זה עובד:

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

כדי להגדיר ביטולים מקומיים:

1. פותחים את החלונית מקורות.

2. פותחים את הכרטיסייה שינויים.

   

   איור 2. הכרטיסייה Overrides (ביטולים)

3. לוחצים על Setup Overrides (הגדרת שינויים).

4. בוחרים את הספרייה שבה רוצים לשמור את השינויים.

5. בחלק העליון של אזור התצוגה, לוחצים על אישור כדי לתת לכלי הפיתוח גישת קריאה וכתיבה לספרייה.

6. עורכים שינויים לפי הצורך.

מגבלות

• כלי הפיתוח לא שומר את השינויים שמתבצעים בעץ ה-DOM בחלונית Elements. במקום זאת, עורכים את ה-HTML בחלונית מקורות.
• אם עורכים CSS בחלונית Styles, והמקור של ה-CSS הזה הוא קובץ HTML, כלי DevTools לא ישמור את השינוי. במקום זאת, עורכים את קובץ ה-HTML בחלונית Sources.

תכונות קשורות

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

הכרטיסייה 'שינויים'

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

איור 3. הכרטיסייה שינויים

כלי נגישות חדשים

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

חלונית הנגישות

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

איור 4. בחלונית Accessibility מוצגים מאפייני ARIA ומאפיינים מחושבים של הרכיב שנבחר כרגע בעץ ה-DOM בחלונית Elements, וגם המיקום שלו בעץ הנגישות.

כדי לראות את חלונית הנגישות בפעולה, אפשר לצפות ב-A11ycast של רוב דודסון בנושא תיוג, שמופיע בהמשך.

יחס הניגודיות בבוחר הצבעים

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

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

איור 5. בדיקת יחס הניגודיות של האלמנט h1 המודגש

באיור 5, שני סימני הווי לצד 4.61 מציינים שהאלמנט הזה עומד ביחס הניגודיות המומלץ המשופר (AAA). אם היה רק סימן וי אחד, זה היה אומר שהצבע עומד ביחס הניגודיות המינימלי המומלץ (AA).

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

איור 6. הקטע יחס ניגודיות אחרי הרחבה

תכונות קשורות

בחלונית Audits יש בדיקת נגישות אוטומטית שמוודאת שלכל רכיב טקסט בדף יש יחס ניגודיות מספיק.

כדי ללמוד איך להשתמש בחלונית Audits לבדיקת נגישות, אפשר לעיין במאמר הפעלת Lighthouse בכלי הפיתוח ל-Chrome או לצפות בסרטון A11ycast שבהמשך.

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

‫Chrome 65 מגיע עם קטגוריה חדשה לגמרי של ביקורות SEO, ועם הרבה ביקורות חדשות של ביצועים.

ביקורות חדשות של SEO

הקפדה על כך שהדפים שלכם יעברו כל אחת מהבדיקות בקטגוריה החדשה SEO עשויה לעזור לכם לשפר את הדירוגים במנועי החיפוש.

איור 7. הקטגוריה החדשה SEO של ביקורות

ביקורות ביצועים חדשות

ב-Chrome 65 יש גם הרבה בדיקות חדשות של ביצועים:

• זמן האתחול של JavaScript גבוה
• נעשה שימוש במדיניות מטמון לא יעילה בנכסים סטטיים
• הבקשה לא מבצעת הפניות לכתובות אחרות
• במסמך נעשה שימוש ביישומי פלאגין
• הקטן CSS
• הקטן JavaScript

הביצועים חשובים! אחרי ש-Mynet שיפרה את מהירות טעינת הדפים פי 4, המשתמשים בילו באתר 43% יותר זמן, צפו ב-34% יותר דפים, שיעורי העזיבה ירדו ב-24% וההכנסות עלו ב-25% לכל צפייה בדף של מאמר. מידע נוסף

טיפ! אם אתם רוצים לשפר את ביצועי הטעינה של הדפים, אבל לא יודעים מאיפה להתחיל, כדאי לנסות את החלונית Audits (ביקורות). אתם מזינים כתובת URL, והכלי מספק דוח מפורט על דרכים שונות לשיפור הדף. שנתחיל?

עדכונים אחרים

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

ניפוי באגים אמין בקוד עם workers וקוד אסינכרוני

ב-Chrome 65 יש עדכונים ללחצן Step Into (כניסה לשלב) כשנכנסים לקוד שמעביר הודעות בין שרשורים ולקוד אסינכרוני. אם רוצים להשתמש בהתנהגות הקודמת של מעבר בין שלבים, אפשר להשתמש במקום זאת בלחצן Step (שלב) החדש.

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

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

לדוגמה, האפליקציה באיור 8 מעבירה הודעה בין השרשור הראשי לבין שרשור העובד. אחרי שנכנסים לשיחה postMessage() בשרשור הראשי, כלי הפיתוח מושהים ב-onmessage handler בשרשור של העובד. ה-handler של onmessage עצמו מפרסם הודעה בחזרה לשרשור הראשי. כשנכנסים לשיחה הזו, הפעולה של DevTools מושהית בשרשור הראשי.

איור 8. כניסה לקוד של העברת הודעות ב-Chrome 65

כשנכנסים לקוד כזה בגרסאות קודמות של Chrome, מוצג רק הצד של השרשור הראשי של הקוד, כמו שאפשר לראות באיור 9.

איור 9. כניסה לקוד של העברת הודעות ב-Chrome 63

כניסה לקוד אסינכרוני

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

לדוגמה, באיור 10, אחרי הכניסה ל-setTimeout(), כלי הפיתוח מריץ את כל הקוד עד לנקודה הזו ברקע, ואז עוצר בפונקציה שמועברת ל-setTimeout().

איור 10. כניסה לקוד אסינכרוני ב-Chrome 65

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

איור 11. כניסה לקוד אסינכרוני ב-Chrome 63

כמה הקלטות בחלונית הביצועים

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

איור 12. בחירה בין כמה הקלטות בחלונית Performance

בונוס: אוטומציה של פעולות בכלי הפיתוח באמצעות Puppeteer 1.0

גרסה 1.0 של Puppeteer, כלי לאוטומציה של דפדפנים שמתחזק על ידי צוות כלי הפיתוח ל-Chrome, זמינה עכשיו. אפשר להשתמש ב-Puppeteer כדי להפוך לאוטומטיות הרבה משימות שבעבר היו זמינות רק דרך DevTools, כמו צילום מסך:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

יש לו גם ממשקי API למשימות אוטומציה רבות ששימושיות בדרך כלל, כמו יצירת קובצי PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

מידע נוסף זמין במאמר מדריך למתחילים.

אפשר גם להשתמש ב-Puppeteer כדי לחשוף תכונות של כלי הפיתוח בזמן הגלישה, בלי לפתוח את כלי הפיתוח באופן מפורש. דוגמה מופיעה במאמר שימוש בתכונות של כלי הפיתוח בלי לפתוח את כלי הפיתוח.

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

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

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

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

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

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

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