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

Kayce Basques

התכונות החדשות והשינויים המשמעותיים שייכנסו ל-DevTools בגרסה 66 של Chrome כוללים:

אפשר להמשיך לקרוא או לצפות בגרסה הווידאו של הערות המוצר שבהמשך.

התעלמות מהתסריט בחלונית 'רשת'

בעמודה Initiator בחלונית Network מצוין למה התבקשה בקשה למשאב. לדוגמה, אם JavaScript גורם לאחזור תמונה, בעמודה Initiator מוצג שורת הקוד של JavaScript שגרמה לבקשה.

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

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

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

מתעלמים מ-'requests.js'.

איור 1. התעלמות מ-requests.js

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

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

הדפסה יפה בכרטיסיות 'תצוגה מקדימה' ו'תגובה'

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

בכרטיסייה 'תצוגה מקדימה', תוכן הקובץ analytics.js מודפס בצורה יפה כברירת מחדל.

איור 2. בכרטיסייה Preview, הדפסה יפה של התוכן של analytics.js כברירת מחדל

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

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

איור 3. הדפסה ידנית של התוכן של analytics.js באמצעות הלחצן Format (פורמט)

תצוגה מקדימה של תוכן HTML בכרטיסיית התצוגה המקדימה

בעבר, בכרטיסייה תצוגה מקדימה בחלונית רשת הוצג הקוד של משאב HTML במצבים מסוימים, ובמצבים אחרים הוצגה תצוגה מקדימה של ה-HTML. הכרטיסייה תצוגה מקדימה מבצעת עכשיו תמיד עיבוד בסיסי של ה-HTML. הוא לא מיועד להיות דפדפן מלא, ולכן יכול להיות שה-HTML לא יוצג בדיוק כפי שציפיתם. כדי לראות את קוד ה-HTML, לוחצים על הכרטיסייה Response או לוחצים לחיצה ימנית על משאב ובוחרים באפשרות Open in Sources panel.

תצוגה מקדימה של HTML בכרטיסיית התצוגה המקדימה.

איור 4. תצוגה מקדימה של HTML בכרטיסייה Preview

התאמה אוטומטית של מרחק התצוגה במצב מכשיר

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

עכשיו אפשר להשתמש בשינויים מקומיים עם סגנונות מסוימים שהוגדרו ב-HTML

כשהשקנו את שינויים מקומיים ב-DevTools בגרסה 65 של Chrome, אחת המגבלות הייתה שלא ניתן היה לעקוב אחרי שינויים בסגנונות שהוגדרו ב-HTML. לדוגמה, באיור 7 יש כלל סגנון ב-head של המסמך שמצהיר על font-weight: bold לרכיבי h1.

דוגמה לסגנונות שהוגדרו ב-HTML

איור 5. דוגמה לסגנונות שהוגדרו ב-HTML

ב-Chrome 65, אם תשנו את ההצהרה font-weight באמצעות החלונית Style של כלי הפיתוח, המערכת לא תעקוב אחרי השינוי בהחלפות מקומיות. במילים אחרות, בטעינה מחדש הבאה, הסגנון יחזור ל-font-weight: bold. אבל ב-Chrome 66, שינויים כאלה נשארים עכשיו בכל טעינת דף.

טיפ בונוס: התעלמות מסקריפטים של מסגרות כדי להפוך את נקודות העצירה של Event Listener לשימושיות יותר

כשיצאתי עם הסרטון תחילת העבודה עם ניפוי באגים ב-JavaScript, חלק מהצופים ציינו שהנקודות לעצירה של רכיבי מעקב האירועים לא שימושיות לאפליקציות שנוצרו על גבי מסגרות, כי רכיבי מעקב האירועים לעיתים קרובות עטופים בקוד של המסגרת. לדוגמה, באיור 8 הגדרתי נקודת עצירה click ב-DevTools. כשלחצתי על הלחצן בדמו, כלי הפיתוח הושעו באופן אוטומטי בשורה הראשונה של קוד המאזין. במקרה הזה, הוא מושהה בקוד המעטפת של Vue.js בשורה 1802, וזה לא ממש עוזר.

נקודת העצירה של הקליקים מושהית בקוד המעטפת של Vue.js.

איור 6. נקודת העצירה click משהה את קוד המעטפת של Vue.js

מכיוון שהסקריפט של Vue.js נמצא בקובץ נפרד, אפשר להתעלם מהסקריפט הזה בחלונית Call Stack כדי להפוך את נקודת העצירה click לשימושית יותר.

התעלמות מהסקריפט Vue.js בחלונית Call Stack.

איור 7. התעלמות מהסקריפט של Vue.js בחלונית Call Stack

בפעם הבאה שאלחץ על הלחצן ואפעיל את נקודת העצירה click, הקוד של Vue.js יופעל בלי להשהות אותו, ואז יושהה בשורת הקוד הראשונה בבורר של האפליקציה, שבו רציתי להשהות אותו מלכתחילה.

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

איור 8. נקודת העצירה (breakpoint) click עכשיו תושהה בקוד של מאזין האפליקציה

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.