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

Kayce Basques

ویژگی‌های جدید برای کوکی‌ها

اشکال‌زدایی دلیل مسدود شدن یک کوکی

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

برگه کوکی‌ها .

• کوکی‌های درخواست زرد از طریق سیم ارسال نشده‌اند. این کوکی‌ها به طور پیش‌فرض پنهان هستند. برای نمایش آنها ، روی نمایش کوکی‌های درخواست فیلتر شده کلیک کنید.
• کوکی‌های پاسخ زرد از طریق سیم ارسال شدند اما ذخیره نشدند.
• موس را روی اطلاعات بیشتر ببرید برای اطلاع از دلیل مسدود شدن یک کوکی.
• بیشتر داده‌های موجود در جداول Request Cookies و Response Cookies از هدرهای HTTP منبع می‌آیند. داده‌های Domain ، Path و Expires/Max-Age از پروتکل Chrome DevTools می‌آیند.

مشکلات کرومیوم #۸۵۶۷۷۷ ، #۹۹۳۸۴۳

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

برای مشاهده مقدار یک کوکی، روی یک ردیف در پنل کوکی‌ها کلیک کنید.

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

مشکل کرومیوم شماره ۴۶۲۳۷۰

شبیه‌سازی ترجیحات مختلف طرح رنگ ترجیحی و ترجیحات کاهش حرکت ترجیحی

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

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

وقتی prefers-color-scheme: dark تنظیم شده باشد (کادر وسط)، پنل Styles (کادر سمت راست) CSS ای را نشان می‌دهد که وقتی آن کوئری رسانه‌ای درست باشد اعمال می‌شود و viewport استایل‌های حالت تاریک (کادر سمت چپ) را نشان می‌دهد.

همچنین می‌توانید با استفاده از منوی کشویی Emulate CSS media feature prefers-reduced-motion: reduce تابع prefers-reduced-motion را که در کنار منوی کشویی Emulate CSS media feature prefers-color-scheme قرار دارد، شبیه‌سازی کنید.

مشکل کرومیوم شماره ۱۰۰۴۲۴۶

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

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

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

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

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

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

برگه پوشش.

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

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

مشکلات کرومیوم #1003671 ، #1004185

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

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

برگه آغازگر .

مشکلات کروم ۹۶۳۱۸۳ ، ۸۴۲۴۸۸

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

مدت زیادی است که DevTools تنظیماتی برای تنظیم میزان تورفتگی به ۲ فاصله، ۴ فاصله، ۸ فاصله یا تب دارد. اخیراً این تنظیمات اساساً بی‌فایده بود زیرا پنل‌های Console و Sources این تنظیمات را نادیده می‌گرفتند. این اشکال اکنون برطرف شده است.

برای تنظیم ترجیح خود، به تنظیمات > تنظیمات برگزیده > منابع > تورفتگی پیش‌فرض بروید.

مشکل کرومیوم شماره ۹۷۷۳۹۴

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

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

مشکل کرومیوم شماره ۹۸۳۸۷۴

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

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

با تیم Chrome DevTools تماس بگیرید

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

قابلیت‌های جدید در DevTools

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