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

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

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

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

הכרטיסייה 'קובצי cookie'.

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

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

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

הצגת הערכים של קובצי ה-Cookie

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

הצגת הערך של קובץ 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 מוגדר (בתיבה האמצעית), בחלונית 'סגנונות' (בתיבה השמאלית) מוצג ה-CSS שיוחל כששאילתת המדיה הזו תהיה True, ובתצוגת המסך מוצגים הסגנונות של מצב האפל (בתיבה הימנית).

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

בעיה ב-Chromium‏ #1004246

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

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

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

הכרטיסייה 'כיסוי' יכולה לעזור לכם למצוא קוד JavaScript ו-CSS שלא נמצאים בשימוש.

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

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

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

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

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

נתוני הכיסוי בחלונית המקורות.

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

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

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

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

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

בכרטיסייה Initiator (יוזם).

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

שוב אפשר להגדיר העדפות לגבי הפסקה פנימה בחלוניות Console ו-Sources

במשך זמן רב, ב-DevTools הייתה הגדרה להתאמה אישית של העדפת ההכנסה (indentation) ל-2 רווחים, ל-4 רווחים, ל-8 רווחים או ל-tab. לאחרונה ההגדרה הזו הייתה בעצם חסרת תועלת כי הלוחות Console ו-Sources התעלמו ממנה. הבאג הזה תוקן.

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

בעיה ב-Chromium‏ ‎#977394

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

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

בעיה ב-Chromium‏ #983874

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.