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

Kayce Basques

תכונות חדשות של קובצי Cookie

ניפוי באגים כדי להבין למה קובץ Cookie נחסם

אחרי שמקליטים את פעילות הרשת, בוחרים משאב רשת ועוברים לכרטיסייה המעודכנת Cookies (קובצי Cookie) כדי להבין למה קובצי ה-Cookie של הבקשה או התגובה של המשאב הזה נחסמו. כדי להבין למה יכול להיות שאתם רואים יותר קובצי Cookie חסומים ב-Chrome מגרסה 76 ואילך, כדאי לעיין במאמר בנושא שינויים בהתנהגות ברירת המחדל ללא SameSite.

הכרטיסייה Cookies (קובצי Cookie).

• קובצי ה-Cookie של הבקשה בצבע צהוב Request Cookies לא נשלחו דרך החיבור. הן מוסתרות כברירת מחדל. כדי להציג אותם, לוחצים על הצגת קובצי Cookie של בקשה שסוננו.
• קובצי Cookie של תגובה בצבע צהוב נשלחו דרך הרשת אבל לא אוחסנו.
• מעבירים את העכבר מעל מידע נוסף כדי לראות למה קובץ Cookie נחסם.
• רוב הנתונים בטבלאות Request Cookies (קובצי Cookie של בקשה) ו-Response Cookies (קובצי Cookie של תגובה) מגיעים מכותרות ה-HTTP של המשאב. הנתונים Domain,‏ Path ו-Expires/Max-Age מגיעים מפרוטוקול כלי הפיתוח ל-Chrome.

בעיות ב-Chromium‏ #856777, #993843

צפייה בערכים של קובצי Cookie

לוחצים על שורה בחלונית Cookies כדי לראות את הערך של קובץ ה-Cookie הזה.

צפייה בערך של קובץ Cookie.

בעיה ב-Chromium‏ #462370

סימולציה של העדפות שונות של prefers-color-scheme ו-prefers-reduced-motion

שאילתת המדיה prefers-color-scheme מאפשרת לכם להתאים את הסגנון של האתר להעדפות של המשתמשים. לדוגמה, אם שאילתת המדיה prefers-color-scheme: dark מחזירה true, זה אומר שהמשתמש הגדיר את מערכת ההפעלה למצב כהה ומעדיף ממשקי משתמש במצב כהה.

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering (הצגת עיבוד), ואז מגדירים את התפריט הנפתח Emulate CSS media feature prefers-color-scheme (יצירת אמולציה של מדיה של CSS עם העדפה לערכת צבעים) כדי לנפות באגים בסגנונות prefers-color-scheme: dark ו-prefers-color-scheme: light.

כשמגדירים את prefers-color-scheme: dark (התיבה האמצעית), בחלונית Styles (התיבה השמאלית) מוצג ה-CSS שמוחל כששאילתת המדיה הזו היא True, ובאזור התצוגה מוצגים הסגנונות של המצב הכהה (התיבה השמאלית).

אפשר גם לדמות prefers-reduced-motion: reduce באמצעות התפריט הנפתח יצירת אמולציה של prefers-reduced-motion לתכונת מדיה של CSS לצד התפריט הנפתח יצירת אמולציה של prefers-color-scheme לתכונת מדיה של CSS.

בעיה ב-Chromium‏ #1004246

אמולציה של אזור זמן

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

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

בכרטיסייה Coverage אפשר למצוא קוד JavaScript ו-CSS שלא נמצא בשימוש.

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

תיבת הטקסט החדשה של מסנן סוג הכיסוי מאפשרת לסנן את פרטי הכיסוי לפי הסוג שלו: כיסוי JavaScript לרשת המדיה בלבד, CSS בלבד או הצגת כל סוגי הכיסוי.

הכרטיסייה 'כיסוי'.

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

נתוני הכיסוי בחלונית 'מקורות'. שורה 8 היא דוגמה לקוד שלא נעשה בו שימוש. שורה 11 היא דוגמה לקוד בשימוש.

בעיות ב-Chromium‏ #1003671, ‏ #1004185

ניפוי באגים כדי להבין למה משאב רשת נדרש

אחרי שמקליטים את פעילות הרשת, בוחרים משאב רשת ועוברים לכרטיסייה Initiator כדי להבין למה המשאב נדרש. בקטע Request call stack (שליחת בקשה ב-call stack) מתואר ה-call stack של JavaScript שמוביל לבקשת הרשת.

בכרטיסייה יוזם.

בעיות ב-Chromium‏ 963183, ‏ 842488

החלוניות Console ו-Sources מכבדות שוב את העדפות ההזחה

במשך תקופה ארוכה, בכלי הפיתוח הייתה הגדרה להתאמה אישית של העדפת הכניסה: 2 רווחים, 4 רווחים, 8 רווחים או טאבים. לאחרונה ההגדרה הזו הייתה חסרת תועלת כי החלוניות Console ו-Sources התעלמו ממנה. הבאג הזה תוקן.

עוברים אל הגדרות > העדפות > מקורות > הזחה כברירת מחדל כדי להגדיר את ההעדפה.

בעיה ב-Chromium‏ #977394

קיצורי דרך חדשים לניווט באמצעות החצים

לוחצים על Control+P בחלוניות Console או Sources כדי להעביר את הסמן לשורה שמעל. מקישים על Control+N כדי להעביר את הסמן לשורה שמתחת.

בעיה ב-Chromium ‎#983874

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

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

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

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

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

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

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