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

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

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

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

שינויים מקומיים

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

איור 1. שמירת שינוי ב-CSS לאורך הטענות של הדפים באמצעות שינוי מברירת המחדל המקומית

איך זה עובד:

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

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

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

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

   

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

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

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

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

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

מגבלות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בדיקת קוד מהימנה באמצעות עובדים וקוד אסינכרוני

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

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

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

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

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

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

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

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

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

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

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

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

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

מספר הקלטות בחלונית הביצועים

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

איור 12. בחירת הקלטה מתוך כמה הקלטות בחלונית ביצועים

בונוס: אוטומציה של פעולות ב-DevTools באמצעות 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 כדי לחשוף את התכונות של DevTools בזמן הגלישה, בלי לפתוח את DevTools באופן מפורש. דוגמה מופיעה בקטע שימוש בתכונות של כלי הפיתוח בלי לפתוח את כלי הפיתוח.

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.