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

Kayce Basques

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

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

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

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

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

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

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

המערכת מתעלמת מ-'requests.js'.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כשיצרתי את הסרטון תחילת העבודה עם ניפוי באגים ב-JavaScript, חלק מהצופים הגיבו שנקודות העצירה (breakpoint) של event listener לא שימושיות לאפליקציות המבוססות על frameworks, כי האירוע בדרך כלל פונקציות ה-listener עטופות בקוד של framework. לדוגמה, באיור 8 הגדרתי click בנקודת עצירה (breakpoint) בכלי פיתוח. כשלוחצים על הלחצן בהדגמה, כלי הפיתוח מושהה אוטומטית השורה הראשונה של קוד ה-listener. במקרה כזה, היא מושהית בקוד wrapper של Vue.js בשורה 1802, לא ממש מועילה.

נקודת העצירה (breakpoint) של הקליק מושהית ב-Vue.js wrapper

איור 6. נקודת העצירה (breakpoint) click מושהית ב-Vue.js קוד wrapper

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

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

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

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

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

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

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

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

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

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

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

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

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