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

Kayce Basques

התכונות החדשות והשינויים העיקריים בכלי הפיתוח בגרסה 66 של Chrome כוללים:

• התעלמות מסקריפט בחלונית Network (רשת)
• התאמה אוטומטית של מרחק התצוגה במצב מכשיר
• הדפסה יפה בכרטיסיות תצוגה מקדימה ותגובה
• תצוגה מקדימה של תוכן HTML בכרטיסייה תצוגה מקדימה
• הבדלים תלויי-מיקום עם סגנונות בתוך HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כשצילמתי את הסרטון Get Started With Debugging JavaScript, חלק מהצופים כתבו בתגובות שנקודות עצירה של מאזיני אירועים לא שימושיות באפליקציות שמבוססות על מסגרות, כי מאזיני האירועים עטופים לרוב בקוד של המסגרת. לדוגמה, באיור 8 הגדרתי נקודת עצירה (breakpoint) בכלי הפיתוח click DevTools. כשלוחצים על הלחצן בהדגמה, כלי הפיתוח עוצרים באופן אוטומטי בשורה הראשונה של קוד המאזין. במקרה הזה, ההשהיה מתרחשת בקוד העטיפה של Vue.js בשורה 1802, וזה לא כל כך מועיל.

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

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

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

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

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

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

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

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

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

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

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

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