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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כשצילמתי את הסרטון Get Started With Debugging JavaScript, חלק מהצופים כתבו בתגובות שנקודות עצירה של מאזיני אירועים לא שימושיות באפליקציות שמבוססות על מסגרות, כי מאזיני האירועים עטופים לרוב בקוד של המסגרת. לדוגמה, באיור 8 הגדרתי נקודת עצירה בכלי הפיתוח.click כשלוחצים על הלחצן בהדגמה, כלי הפיתוח מושהים באופן אוטומטי בשורה הראשונה של קוד המאזין. במקרה הזה, ההשהיה מתרחשת בקוד העוטף של 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 של האפליקציה שלי, שזה המקום שבו רציתי לעצור מלכתחילה.

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

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

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

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

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

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

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

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