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

Kayce Basques

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

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

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

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

שינוי מתמיד של שירות CSS בכל טעינות הדפים באמצעות 'שינויים מקומיים'.

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

איך זה עובד:

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

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

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

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

    הכרטיסייה 'ביטולים'

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

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

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

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

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

מגבלות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בדיקת יחס הניגודיות של רכיב ה-H1 המודגש.

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

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

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

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

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

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

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

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

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

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

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

הקטגוריה החדשה של ביקורות עבור אופטימיזציה למנועי חיפוש (SEO).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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