چیزهای جدید در 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 استفاده کنید.

چیزهای جدید در DevTools

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