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

Sofia Emelianova
Sofia Emelianova

עדכונים ממכשיר ההקלטה

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

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

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

ממשק משתמש להפעלה חוזרת בהתאמה אישית.

כדי להתאים אישית את מכשיר ההקלטה לצרכים שלכם ולשלב אותו עם הכלים, כדאי לפתח תוסף משלכם: לנסות את chrome.devtools.recorder API ולעיין בדוגמאות נוספות של תוספים.

בעיה ב-Chromium: 1400243.

הקלטה עם סלקטורים של פירס

בנוסף לסלקטורים בהתאמה אישית, ב-CSS, ARIA, טקסט ו-XPath, עכשיו אפשר להקליט באמצעות סלקטורים של Pierce. הסלקטורים האלה מתנהגים כמו סלקטורים של CSS, אבל הם יכולים גם לפרוץ דרך שורשים מוצללים.

מתחילים הקלטה חדשה בדף עם DOM של צללים ומסמנים את התיבה תיבת סימון. Pierce בקטע סוגי הסלקטורים להקלטה. מקליטים את האינטראקציה עם הרכיבים ב-DOM של הצללית ובודקים את השלב המתאים.

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

בעיה ב-Chromium: 1411188.

ייצוא כסקריפט של Puppeteer באמצעות ניתוח Lighthouse

ב-Recorder יש אפשרות ייצוא חדשה: Puppeteer (כולל ניתוח Lighthouse). באמצעות Puppeteer תוכלו לשלוט ב-Chrome באופן אוטומטי. באמצעות Lighthouse, אפשר לתעד ולשפר את ביצועי האתר.

פותחים את ההקלטה, לוחצים על ייצוא. ייצוא, בוחרים באפשרות החדשה ושומרים את הקובץ .js.

ייצוא של Puppeteer (כולל ניתוח Lighthouse).

מריצים את הסקריפט Puppeteer כדי לקבל דוח Lighthouse בקובץ flow.report.html.

הדוח Lighthouse נפתח ב-Chrome.

הורדת תוספים

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

האפשרות 'קבלת תוספים' בתפריט הנפתח 'ייצוא'.

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

בעיות ב-Chromium: 1417104, 1413168.

אלמנטים > עדכוני סגנונות

מסמכי תיעוד בנושא CSS

כמה פעמים ביום אתם מחפשים מסמכים על נכסי CSS? בחלונית רכיבים > סגנונות מופיע עכשיו תיאור קצר כשמעבירים את העכבר מעל נכס.

הסבר קצר עם תיעוד על נכס CSS.

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

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

כדי להפעיל אותם מחדש, צריך לעבור אל הגדרות. הגדרות > העדפות > רכיבים > תיבת סימון. הצגת הסבר קצר במסמכי התיעוד של CSS.

בעיה ב-Chromium: 1401107.

תמיכה בנושא הצבת שירותי CSS

החלונית Elements > Styles מזהה עכשיו תחביר של CSS Nesting ומחילה סגנונות מקוננים על הרכיבים הנכונים.

בעיה ב-Chromium: 1172985.

סימון נקודות ביומן ונקודות עצירה (breakpoint) מותנות במסוף

כדי לשפר עוד יותר את חוויית המשתמש המשופרת של נקודת העצירה (breakpoint), המסוף מסמן עכשיו הודעות שהופעלו על ידי נקודות עצירה (breakpoint):

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

עכשיו המסוף מספק קישורי עוגן מתאימים לנקודות עצירה בקובצי מקור, במקום סקריפטים VM<number> שנוצרו על ידי Chrome כדי להריץ כל קטע של JavaScript ב-V8.

לוחצים על הקישור שליד ההודעה של נקודת העצירה כדי לעבור ישירות לכלי לעריכת נקודות העצירה.

קישור העוגן לצד הודעה של נקודה ביומן (Logpoint) שפותח את עורך נקודות העצירה.

בעיה ב-Chromium: 1027458.

התעלמות מסקריפטים לא רלוונטיים במהלך ניפוי באגים

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

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

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

כל הסקריפטים והתיקיות הכלולים בעץ הקבצים מופיעים באפור בעץ הקבצים.

סקריפטים ותיקיות מהרשימה המתעלמים מהם מופיעים באפור, ניתן להסתיר אותם באמצעות אפשרות ניסיונית בתפריט הנפתח &#39;אפשרויות נוספות&#39;.

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

בעיה ב-Chromium: 883325.

התחילה ההוצאה משימוש של הכלי לניתוח ביצועי JavaScript

בתחילת השימוש ב-Chrome 58, צוות כלי הפיתוח תכננו להוציא משימוש את JavaScript Profiler, ולמפתחי Node.js ו-Deno ישתמשו בחלונית ביצועים כדי לשפר את ביצועי המעבד (CPU) ב-JavaScript.

הגרסה הזו של כלי הפיתוח (112) מפעילה את ההוצאה משימוש של JavaScript Profiler בארבעת השלבים. בחלונית JavaScript Profiler תוצג עכשיו האזהרה המתאימה.

באנר הוצאה משימוש בחלק העליון של כלי הפרופיל.

במקום ב-Profiler, תוכלו להשתמש בחלונית ביצועים כדי ליצור פרופיל למעבד (CPU).

אפשר לקרוא מידע נוסף ולשלוח משוב ב-RFC וב-crbug.com/1354548 המתאימים.

בעיה ב-Chromium: 1417647.

אמולציה של ניגודיות מופחתת

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

האפשרות המופחתת של הניגודיות שנבחרה בפונקציונליות &#39;הדמיה של ליקויי ראייה&#39;.

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

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

בעיות ב-Chromium: 1412719, 1412721.

מגדלור 10

בחלונית Lighthouse פועלת עכשיו Lighthouse 10.0.1. מידע נוסף זמין במאמר מה חדש ב-Lighthouse 10.0.1.

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

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

הניווט הקודם הושבת.

Lighthouse 10 משתמש עכשיו ב-Moto G Power כמכשיר האמולציה המוגדר כברירת מחדל. כלי הפיתוח הוסיפו את המכשיר הזה אל הגדרות. הגדרות > מכשירים.

Moto G Power ברשימת המכשירים.

בעיה ב-Chromium: 772558.

הצגת אזהרה במסוף לגבי הסרת handler של אחזור קובץ שירות (service worker) ללא תפעול

Chrome 112 מדלג על רכיבי handler של אחזורים ללא תפעול (ללא תפעול) כי הם עלולים להאט את הניווט אבל לא ימלאו מטרה. handlers כאלה כבר לא נדרשים כדי שהאתר שלכם יוגדר כProgressive Web App.

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

handler של אחזור ללא תפעול והאזהרה המתאימה במסוף.

בעיה ב-Chromium: 1347319.

פרטים שונים

הנה כמה תיקונים חשובים בגרסה הזו:

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

כדאי להשתמש ב-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