מה חדש בכלי הפיתוח (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 של 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.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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