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

Kayce Basques

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

גרסת וידאו של נתוני הגרסה האלה

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

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

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

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

   

   איור 1. הוספת נקודת רישום (logpoint)

2. לוחצים על הוספת נקודת רישום. מופיע הכלי לעריכת נקודות עצירה (breakpoint).

   

   איור 2. עורך נקודות העצירה (breakpoint)

3. בעורך נקודות העצירה, מזינים את הביטוי שרוצים לרשום ביומן במסוף.

   

   איור 3. הקלדת הביטוי של נקודת הרישום (logpoint)

   טיפ: כשמבצעים רישום של משתנה (למשל TodoApp), צריך להוסיף את המשתנה לאובייקט (למשל {TodoApp}) כדי לרשום את השם והערך שלו במסוף. למידע נוסף על התחביר הזה, אפשר לעיין במאמרים Always Log Objects ו-Object Property Value Shorthand.

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

   

   איור 4. תג כתום של נקודת רישום בשורה 174

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

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

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

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

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

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

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

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

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

2. באזור התצוגה, מעבירים את העכבר מעל הצומת.

ייצוא נתוני כיסוי קוד

עכשיו אפשר לייצא נתונים של כיסוי קוד כקובץ 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; }. במילים אחרות, נעשה שימוש בקבוצות הכללים הראשונה והאחרונה, אבל לא בזו שבאמצע.

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

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

   

   איור 7. תפריט הפקודות

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

   

   איור 8. הצגת כלי ה-Coverage

   הכרטיסייה Coverage (כיסוי) תיפתח.

   

   איור 9. הכרטיסייה 'כיסוי'

3. לוחצים על טעינה מחדש . כלי DevTools טוענים מחדש את הדף ומתעדים את כמות הקוד שנמצא בשימוש בהשוואה לכמות הקוד שנשלח.

4. לוחצים על ייצוא כדי לייצא את הנתונים כקובץ JSON.

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

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

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

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

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

איור 11. הדגשת קישור

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

   איור 16. תפריט הפקודות

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

   

   איור 17. הכרטיסייה 'חיישנים'

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

   

   איור 18. הכרטיסייה 'מיקומים גיאוגרפיים' בהגדרות

4. לוחצים על הוספת מיקום.

5. מזינים שם מיקום, קו רוחב וקו אורך, ואז לוחצים על הוספה.

   

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

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

הפרדת קוד

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

איור 20. שורות 54 עד 65 נסגרו

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

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

כדי לכווץ בלוק קוד:

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

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

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

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

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

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

הורדת ערוצי התצוגה המקדימה

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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