چیزهای جدید در DevTools (Chrome 79)

کیسی باسکی

ویژگی های جدید برای کوکی ها اشکال زدایی که چرا یک کوکی مسدود شده است

پس از ضبط فعالیت شبکه، یک منبع شبکه را انتخاب کنید و سپس به برگه کوکی های به روز شده بروید تا بفهمید چرا کوکی های درخواست یا پاسخ آن منبع مسدود شده اند. به تغییرات رفتار پیش‌فرض بدون SameSite مراجعه کنید تا متوجه شوید که چرا ممکن است کوکی‌های مسدود شده بیشتری را در Chrome 76 و نسخه‌های جدیدتر مشاهده کنید.

برگه کوکی ها.

برگه کوکی ها .

  • کوکی‌های درخواست زرد از طریق سیم ارسال نشدند. اینها به طور پیش فرض پنهان هستند. برای نمایش کوکی‌های درخواست فیلتر شده، روی نشان دادن آنها کلیک کنید.
  • کوکی‌های پاسخ زرد از طریق سیم ارسال شدند اما ذخیره نشدند.
  • ماوس را روی اطلاعات بیشتر نگه داریداطلاعات برای اطلاع از اینکه چرا یک کوکی مسدود شده است.
  • بیشتر داده‌های جداول درخواست کوکی‌ها و کوکی‌های پاسخ از سربرگ‌های HTTP منبع می‌آیند. داده‌های دامنه ، مسیر و انقضا/حداکثر سن از پروتکل Chrome DevTools می‌آیند.

مسائل Chromium #856777 ، #993843

مشاهده مقادیر کوکی

برای مشاهده مقدار آن کوکی، روی یک ردیف در قسمت Cookies کلیک کنید.

مشاهده ارزش یک کوکی

مشاهده ارزش یک کوکی

Chromium شماره 462370

الگوهای ترجیحی-رنگ-رنگی و ترجیحات-حرکت کاهش یافته را شبیه سازی کنید

درخواست رسانه prefers-color-scheme به شما امکان می دهد سبک سایت خود را با تنظیمات برگزیده کاربر مطابقت دهید. به عنوان مثال، اگر عبارت prefers-color-scheme: dark media درست باشد، به این معنی است که کاربر سیستم عامل خود را روی حالت تاریک تنظیم کرده است و رابط های کاربری حالت تاریک را ترجیح می دهد.

Command Menu را باز کنید، دستور Show Rendering را اجرا کنید و سپس ویژگی شبیه‌سازی رسانه CSS prefers-color-scheme را برای اشکال‌زدایی سبک‌های prefers-color-scheme: dark و prefers-color-scheme: light را تنظیم کنید.

ترجیح می دهد-رنگ-طرح: تیره

هنگامی که prefers-color-scheme: dark is set (جعبه وسط) صفحه Styles (جعبه سمت راست) CSS را نشان می دهد که در زمانی که درخواست رسانه درست است اعمال می شود و viewport سبک های حالت تاریک (جعبه سمت چپ) را نشان می دهد.

شما همچنین می‌توانید prefers-reduced-motion: reduce با استفاده از ویژگی شبیه‌سازی رسانه CSS از منوی کرکره ترجیح می‌دهید-reduced-motion در کنار ویژگی شبیه‌سازی رسانه CSS، ترجیح می‌دهد، طرح رنگ را کاهش دهید .

Chromium شماره 1004246

شبیه سازی منطقه زمانی

تب Sensors اکنون به شما امکان می دهد نه تنها موقعیت جغرافیایی را نادیده بگیرید ، بلکه مناطق زمانی دلخواه را نیز تقلید کرده و تأثیر آن را بر برنامه های وب خود آزمایش کنید. شاید تعجب آور باشد که این ویژگی جدید قابلیت اطمینان شبیه سازی موقعیت جغرافیایی را نیز بهبود می بخشد: قبلاً، برنامه های وب می توانستند با تطبیق مکان با منطقه زمانی محلی کاربر، جعل موقعیت مکانی را تشخیص دهند. اکنون که موقعیت جغرافیایی و تقلید منطقه زمانی با هم ترکیب شده اند، این دسته از عدم تطابق حذف شده است.

به روز رسانی پوشش کد

تب Coverage می تواند به شما کمک کند جاوا اسکریپت و CSS استفاده نشده را پیدا کنید .

تب Coverage اکنون از رنگ های جدید برای نمایش کدهای استفاده شده و استفاده نشده استفاده می کند. ثابت شده است که این ترکیب رنگ برای افرادی که کمبود دید رنگی دارند قابل دسترسی تر است. نوار قرمز در سمت چپ نشان دهنده کد استفاده نشده و نوار آبی در سمت راست نشان دهنده کد استفاده شده است.

کادر متنی فیلتر نوع پوشش جدید به شما امکان می دهد اطلاعات پوشش را بر اساس نوع آن فیلتر کنید: فقط پوشش جاوا اسکریپت، فقط CSS، یا نمایش همه انواع پوشش.

برگه پوشش.

برگه پوشش.

پانل منابع داده های پوشش کد را در صورت در دسترس بودن نمایش می دهد. با کلیک بر روی علامت های قرمز یا آبی در کنار شماره خط، برگه Coverage باز می شود و فایل برجسته می شود.

داده های پوشش در پانل منابع.

داده های پوشش در پانل منابع. خط 8 نمونه ای از کدهای استفاده نشده است. خط 11 نمونه ای از کدهای استفاده شده است.

مسائل Chromium #1003671 ، #1004185

اشکال زدایی که چرا یک منبع شبکه درخواست شده است

پس از ضبط فعالیت شبکه، یک منبع شبکه را انتخاب کنید و سپس به تب Initiator بروید تا دلیل درخواست منبع را متوجه شوید. بخش درخواست پشته تماس، پشته تماس جاوا اسکریپت را که به درخواست شبکه منتهی می شود، توصیف می کند.

تب Initiator.

تب Initiator .

مسائل Chromium 963183 ، 842488

پانل های کنسول و منابع دوباره به اولویت های تورفتگی احترام می گذارند

برای مدت طولانی DevTools تنظیماتی را برای سفارشی کردن برگزیده تورفتگی شما به 2 فاصله، 4 فاصله، 8 فاصله، یا برگه دارد. اخیراً این تنظیم اساساً بی فایده بود زیرا پانل های Console و Sources تنظیمات را نادیده می گرفتند. این باگ اکنون رفع شده است.

برای تنظیم تنظیمات برگزیده خود به Settings > Preferences > Sources > Default Indentation بروید.

Chromium شماره 977394

میانبرهای جدید برای پیمایش مکان نما

برای انتقال مکان نما به خط بالا، Control+P را در پنل های Console یا Sources فشار دهید. برای انتقال مکان نما به خط زیر، Control+N را فشار دهید.

Chromium شماره 983874

کانال های پیش نمایش را دانلود کنید

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان می‌دهند به جدیدترین ویژگی‌های DevTools دسترسی داشته باشید، APIهای پلت‌فرم وب پیشرفته را آزمایش کنید و قبل از اینکه کاربرانتان این کار را انجام دهند، مشکلات موجود در سایت خود را پیدا کنید!

تماس با تیم Chrome DevTools

از گزینه های زیر برای بحث در مورد ویژگی ها و تغییرات جدید در پست یا هر چیز دیگری مربوط به DevTools استفاده کنید.

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.
چیزهای جدید در DevTools

فهرستی از همه چیزهایی که در سری چیزهای جدید در DevTools پوشش داده شده است.

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59