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

Kayce Basques
Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מכיוון שהסקריפט 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 שקשורים לכלי פיתוח.

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59