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

Kayce Basques

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

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

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

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

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

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

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

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

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

הצגת הערך של קובץ cookie.

הצגת הערך של קובץ cookie.

בעיה ב-Chromium #462370

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

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

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

העדפה לערכת צבעים: כהה

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

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

בעיה ב-Chromium #1004246

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

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

עדכונים לגבי הקוד

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיות ב-Chromium 963183, 842488

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

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

כדי להגדיר כניסת פיסקה, עוברים אל Settings > Preferences > Sources > Default Indentation.

בעיה ב-Chromium #977394

מקשי קיצור חדשים לניווט בסמן

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

בעיה ב-Chromium #983874

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

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