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

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

Kayce Basques

מה חדש בכלי הפיתוח ב-Chrome 73.

גרסת הסרטון של נתוני הגרסה האלה

נקודות רישום (Logpoints)

אפשר להשתמש ב-Logpoints כדי לרשום הודעות במסוף בלי להעמיס על הקוד בשיחות console.log().

כדי להוסיף נקודת רישום (logpoint):

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

איור 1. הוספת נקודת רישום (Logpoint)
בוחרים באפשרות הוספת נקודת רישום (logpoint). החלון הקופץ עורך נקודת העצירה ייפתח.

איור 2. עורך נקודת העצירה (breakpoint)
בעורך נקודות העצירה, מזינים את הביטוי שרוצים לרשום במסוף.

איור 3. הקלדת הביטוי של נקודת ה-Logpoint

טיפ: כשיוצאים ממשתנה (למשל, TodoApp), כוללים את המשתנה באובייקט (למשל, {TodoApp}) כדי לנתק את השם והערך שלו במסוף. למידע נוסף על התחביר הזה, ראו אובייקטים ביומן תמיד וקיצור של ערך מאפיין אובייקט.
כדי לשמור, מקישים על Enter או לוחצים מחוץ לעורך נקודות העצירה. התג הכתום שמופיע בחלק העליון של מספר השורה מייצג את ה-Logpoint.

איור 4. תג Logpoint כתום בשורה 174

בפעם הבאה שהשורה תתבצע, כלי הפיתוח רושם את התוצאה של הביטוי ב-Logpoint במסוף.

התוצאה של ביטוי ה-Logpoint במסוף

איור 5. התוצאה של ביטוי ה-Logpoint במסוף

כדי לדווח על באגים או להציע שיפורים, ראו בעיה מס' 700519 ב-Chromium.

הסברים קצרים מפורטים במצב בדיקה

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

בדיקת צומת

איור 6. בדיקת צומת

כדי לבדוק צומת:

לוחצים על בדיקה .

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

ייצוא נתונים של הכיסוי של הקוד

עכשיו אפשר לייצא את הנתונים של כיסוי הקוד כקובץ JSON. קובץ ה-JSON נראה כך:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url היא כתובת ה-URL של קובץ ה-CSS או ה-JavaScript שאותם ניתחו כלי הפיתוח. ב-ranges מתוארים חלקי הקוד שהיו בשימוש. start הוא ההיסט ההתחלתי של טווח שנעשה בו שימוש. end הוא ההיסט הסופי. text הוא הטקסט המלא של הקובץ.

בדוגמה שלמעלה, הטווח בין 0 ל-21 תואם ל-body { margin: 1em; } והטווח 45 עד 67 תואם ל-h1 { color: #317EFB; }. במילים אחרות, המערכת השתמשה בקבוצת הכללים הראשונה והאחרונה, ובקבוצת הכללים לא נעשה שימוש.

כדי לנתח את כמות הקוד שבה נעשה שימוש במהלך טעינת הדף ולייצא את הנתונים:

מקישים על Control+Shift+P או Command+Shift+P (Mac) כדי לפתוח את תפריט Command.

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

איור 8. הצגת הסיקור

הכרטיסייה כיסוי תיפתח.

איור 9. הכרטיסייה 'כיסוי'
לוחצים על טעינה מחדש . כלי הפיתוח טוענים מחדש את הדף ומתעדים את כמות הקוד שנעשה בה שימוש בהשוואה לכמות הקוד שנשלחה.
לוחצים על Export כדי לייצא את הנתונים כקובץ JSON.

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

כדי לדווח על באגים או להציע שיפורים, ראו בעיה מס' 717195 ב-Chromium.

ניווט במסוף באמצעות המקלדת

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

הקשה על Shift+Tab מתמקדת בהודעה האחרונה (או התוצאה של ביטוי שנבדק). אם ההודעה מכילה קישורים, הקישור האחרון יודגש קודם. הקשה על Enter פותחת את הקישור בכרטיסייה חדשה. הקשה על מקש החץ שמאלה מדגישה את כל ההודעה (ראו איור 13).

מיקוד לקישור

איור 11. מיקוד לקישור

הקשה על מקש החץ למעלה מתמקדת בקישור הבא.

מיקוד לקישור אחר

איור 12. מיקוד לקישור אחר

הקשה על מקש החץ למעלה מתמקדת שוב בהודעה כולה.

התמקדות בהודעה כולה

איור 13. התמקדות בהודעה כולה

הקשה על מקש החץ ימינה מרחיבה את דוח הקריסות המכווץ (או אובייקט, מערך וכו').

הרחבה של דוח קריסות מכווץ

איור 14. הרחבה של דוח קריסות מכווץ

הקשה על מקש החץ שמאלה מכווצת הודעה או תוצאה מורחבת.

כדי לדווח על באגים או להציע שיפורים, יש לעיין בבעיה מס' 865674 ב-Chromium.

קו של יחס ניגודיות AAA בבוחר הצבעים

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

קו AA (למעלה) וקו AAA (למטה)

איור 15. קו AA (למעלה) וקו AAA (למטה)

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

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

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

כדי לדווח על באגים או להציע שיפורים, ראו בעיה מס' 879856 ב-Chromium.

שמירת שינויים מותאמים אישית של מיקום גיאוגרפי

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

מקישים על Control+Shift+P או Command+Shift+P (Mac) כדי לפתוח את תפריט Command.

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

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

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

איור 19. הוספת מיקום גיאוגרפי מותאם אישית

כדי לדווח על באגים או להציע שיפורים, יש לעיין בבעיה מס' 649657 ב-Chromium.

קיפול קוד

החלוניות מקורות ורשת תומכים עכשיו בכיווץ קוד.

שורות 54 עד 65 מקופלות

איור 20. שורות 54 עד 65 מקופלות

כדי להפעיל את כיווץ הקוד:

מקישים על F1 כדי לפתוח את הגדרות.
בקטע הגדרות > העדפות > מקורות מפעילים את האפשרות כיווץ קוד.

כדי לקפל קטע קוד:

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

כדי לדווח על באגים או להציע שיפורים, יש לעיין בבעיה מס' 328431 ב-Chromium.

הכרטיסייה 'הודעות'

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

הכרטיסייה 'הודעות'

איור 21. הכרטיסייה 'הודעות'

כדי לדווח על באגים או להציע שיפורים, יש לעיין בבעיה מס' 802182 ב-Chromium.

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

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

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

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

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