דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

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

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

הערה: מומלץ לבדוק ב-chrome://version איזו גרסת Chrome פועלת אצלך. אם מריצים גרסה קודמת, התכונות האלה לא קיימות. אם מריצים גרסה מאוחרת יותר, יכול להיות שהתכונות האלה השתנו. Chrome מתעדכן באופן אוטומטי לגרסה ראשית חדשה בערך כל 6 שבועות.

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

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

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

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

איך זה עובד:

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

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

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

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

מגבלות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

קוד אמין לקודד עם עובדים וקוד אסינכרוני

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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