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

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

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

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

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

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

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

איך זה עובד:

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

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

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

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

   

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

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

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

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

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

מגבלות

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

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

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

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

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

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

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

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

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

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

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

כדאי לעיין באוסף A11ycast של רוב דודסון (Rob Dodson) בנושא תוויות למטה כדי לראות את החלונית נגישות בפעולה.

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

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

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

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

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

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

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

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

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

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

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

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

ביקורות חדשות לאופטימיזציה למנועי חיפוש

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

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

בדיקות חדשות של הביצועים

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

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

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

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

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

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

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

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

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

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

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

איור 8. מעבר לקוד להעברת הודעות ב-Chrome 65

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

איור 9. מעבר לקוד להעברת הודעות ב-Chrome 63

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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