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

Kayce Basques

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

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

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

ביטולים מקומיים

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

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

איך זה עובד:

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

כדי להגדיר שינויים מקומיים מברירת המחדל:

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

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

   

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

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

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

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

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

מגבלות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

איור 10. Stepping into asynchronous code in 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.

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

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