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

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

Kayce Basques

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

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

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

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

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

לוחצים לחיצה ימנית על מספר השורה שאליה רוצים להוסיף את נקודת הרישום (logpoint).

איור 1. הוספת נקודת רישום (logpoint)
בוחרים באפשרות הוספת נקודת רישום (logpoint). ייפתח הכלי Breakpoint Editor.

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

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

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

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

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

התוצאה של הביטוי Logpoint ב- Console

איור 5. התוצאה של הביטוי Logpoint ב- Console

כדי לדווח על באגים או להציע שיפורים, צריך לעיין בבעיה מס' 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) כדי לפתוח את תפריט הפקודה.

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

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

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

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

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

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

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

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

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

התמקדות בקישור

איור 11. התמקדות בקישור

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

התמקדות בקישור אחר

איור 12. התמקדות בקישור אחר

הקשה נוספת על מקש החץ למעלה תמקד שוב את ההודעה כולה.

מיקוד הודעה שלמה

איור 13. מיקוד הודעה שלמה

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

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

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

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

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

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

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

קו AA (למעלה) וקו AAA (תחתון)

איור 15. קו AA (למעלה) וקו AAA (תחתון)

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

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

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

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

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

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

לחץ על Control+Shift+P או Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודה.

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

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

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

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

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

הפרדת קוד

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

קווים 54 עד 65 מקופלים

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

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

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

כדי לקפל בלוק של קוד:

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

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

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

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

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

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

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

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

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

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

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

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