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

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

Kayce Basques

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

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

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

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

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

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

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

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

איך זה עובד:

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

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

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

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

מגבלות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שלבי קוד אמינים בעזרת עובדים וקוד אסינכרוני

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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