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

עורך רשת של CSS

תכונה מבוקשת מאוד. עכשיו אפשר להציג רשת CSS בתצוגה מקדימה ולחבר אותה באמצעות עורך ה-CSS החדש!

עורך מסוג CSS Grid

כאשר רכיב HTML בדף שלך מוחל עליו display: grid או display: inline-grid, יופיע לידו סמל בחלונית הסגנונות. לוחצים על הסמל כדי להפעיל או להשבית את הכלי לעריכת רשתות של CSS. כאן אפשר לראות תצוגה מקדימה של השינויים הפוטנציאליים באמצעות הסמלים במסך (למשל justify-content: space-around) ולכתוב את מראה הרשת בלחיצה אחת בלבד.

בעיה ב-Chromium: 1203241

תמיכה בהצהרות מחדש של const במסוף

המסוף תומך עכשיו בהצהרה מחדש של הצהרת const, בנוסף להצהרות הקיימות let ו-class. חוסר היכולת להצהיר מחדש הייתה מטרד נפוץ למפתחי אתרים שמשתמשים במסוף כדי להתנסות בקוד JavaScript חדש.

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

דוגמה: הצהרה מחדש של const נתמכת בסקריפטים נפרדים של REPL (מידע נוסף על המשתנה a). לתשומת ליבכם: התרחישים הבאים לא נתמכים בתכנון:

  • הצהרה מחדש של const על סקריפטים של דף אינה מותרת בסקריפטים של REPL
  • הצהרה מחדש של const בתוך אותו סקריפט REPL אינה מותרת (יש לעיין במשתנה b)

הצהרות מחדש

בעיה ב-Chromium: 1076427

הרשאת צפייה בהזמנת המקור

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

הרשאת צפייה בהזמנת המקור

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

בעיה ב-Chromium: 1094406

קיצור דרך חדש להצגת פרטי המסגרת

כדי להציג פרטי iframe, לוחצים לחיצה ימנית על רכיב ה-iframe בחלונית 'רכיבים' ובוחרים באפשרות Show frame details (הצגת פרטי מסגרת).

הצגת פרטי המסגרת

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

תצוגת פרטי המסגרת

בעיה ב-Chromium: 1192084

תמיכה מתקדמת בניפוי באגים ב-CORS

שגיאות בשיתוף משאבים בין מקורות (CORS) מופיעות עכשיו בכרטיסייה 'בעיות'. קיימות סיבות שונות לשגיאות CORS. ניתן ללחוץ כדי להרחיב כל בעיה כדי להבין את הסיבות האפשריות והפתרונות האפשריים.

בעיות ב-CORS בכרטיסייה 'בעיות'

בעיה ב-Chromium: 1141824

עדכונים של חלונית הרשת

שינוי השם של תווית XHR ל-אחזור/XHR

השם של תווית ה-XHR השתנה ל-Fetch/XHR. השינוי הזה מבהיר שהמסנן הזה כולל גם בקשות רשת של XMLHttpRequest וגם בקשות רשת אחזור API.

תווית אחזור/XHR

בעיה ב-Chromium: 1201398

סינון סוג המשאב Wasm בחלונית 'רשת'

עכשיו אפשר ללחוץ על לחצן Wasm החדש כדי לסנן את בקשות רשת Wasm.

סינון לפי Wasm

בעיה ב-Chromium: 1103638

רמזים על הלקוח (Client Hints) לגבי הסוכן המשתמש למכשירים בכרטיסייה 'תנאי רשת'

רמזים של לקוח (Client Hints) לגבי סוכן משתמש חלים עכשיו על מכשירים בשדה סוכן משתמש בכרטיסייה תנאי רשת.

התכונה User-Agent Client Hints היא הרחבה חדשה ל-Client Hints API, והיא מאפשרת למפתחים לגשת למידע על הדפדפן של המשתמש בצורה ארגונומית ושומרת על הפרטיות.

רמזים על הלקוח (Client Hints) לגבי הסוכן המשתמש למכשירים בכרטיסייה 'תנאי רשת'

בעיה ב-Chromium: 1174299

דיווח על בעיות במצב תאימות בכרטיסייה 'בעיות'

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

'מצב תאימות (quirks)' ו'מצב תאימות מוגבלת (LTD)' הם מצבי דפדפן מדור קודם, שקדמו ליצירת תקני האינטרנט. המצבים האלה מדמים התנהגויות פריסה מלפני התקופה הרגילה, שהרבה פעמים גורמים לאפקטים חזותיים בלתי צפויים.

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

דיווח על בעיות במצב תאימות בכרטיסייה 'בעיות'

בעיה ב-Chromium: 622660

הכללת צמתים של Compute בחלונית 'ביצועים'

כלי הפיתוח מציגים עכשיו את Compute Intersections בתרשים הלהבות. השינויים האלה יעזרו לך לזהות את האירועים של התצפית על הצומת ולנפות באגים לגבי התקורות האפשריות של הביצועים שלהם.

חישוב צמתים בחלונית 'ביצועים'

בעיה ב-Chromium: 1199137

Lighthouse 7.5 בחלונית Lighthouse

בחלונית Lighthouse פועל עכשיו Lighthouse 7.5. האזהרה "חסרים רוחב וגובה מפורשים" הוסרה עכשיו לגבי תמונות שבהן מוגדר aspect-ratio ב-CSS. בעבר, ב-Lighthouse הוצגו אזהרות לגבי תמונות שלא הוגדרו בהן רוחב וגובה.

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

בעיה ב-Chromium: 772558

תפריט ההקשר 'הפעלת מסגרת מחדש' הוצא משימוש בערימת השיחות

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

תפריט ההקשר של המסגרת הוצא משימוש

בעיה ב-Chromium: 1203606

[ניסיוני] מוניטור פרוטוקול

בכלי הפיתוח ל-Chrome נעשה שימוש בפרוטוקול Chrome DevTools (CDP) כדי להגדיר דפדפני Chrome, לבדוק אותם, לנפות באגים ולעצב אותם ליצירת פרופיל. מעקב אחר הפרוטוקול מאפשר להציג את כל הבקשות והתשובות של CDP שנשלחו על ידי כלי הפיתוח.

נוספו שתי פונקציות חדשות כדי להקל על הבדיקה של CDP:

  • אפשר ללחוץ על הלחצן החדש שמירה כדי להוריד את ההודעות המוקלטות כקובץ JSON
  • שדה חדש שמאפשר לשלוח פקודת CDP גולמית ישירות.

מוניטור פרוטוקול

בעיות ב-Chromium: 1204004, 1204466

[ניסיוני] מכשיר Puppeteer Recorder

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

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

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

מכשיר הקלטה בבובן

בעיה ב-Chromium: 1199787

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59