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

جسلین یین

اطلاعات مربوط به ویتامین‌های وب (Web Vitals) در پنل عملکرد (Performance) ظاهر می‌شود.

برای فهمیدن اینکه عملکرد خوب است، نیاز به بهبود دارد یا ضعیف، نشانگر Web Vitals را در پنل Performance نگه دارید.

اطلاعات مربوط به ویتامین‌های وب ظاهر می‌شود

مشکل کرومیوم: ۱۱۴۷۸۷۲

تجسم اسکرول-اسنک CSS

اکنون می‌توانید نشان scroll-snap را در پنل Elements تغییر وضعیت دهید تا ترازبندی scroll-snap در CSS را بررسی کنید.

اسکرول-اسنک در CSS

وقتی یک عنصر HTML در صفحه شما (مثلاً این صفحه آزمایشی ) دارای قابلیت scroll-snap-type باشد، می‌توانید یک نشان scroll-snap در کنار آن در پنل عناصر مشاهده کنید. برای تغییر نمایش پوشش scroll-snap در صفحه، روی نشان کلیک کنید.

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

مشکل کرومیوم: ۸۶۲۴۵۰

بازرس حافظه جدید

از ابزار جدید Memory inspector برای بررسی ArrayBuffer در جاوا اسکریپت و همچنین حافظه Wasm استفاده کنید.

این صفحه آزمایشی را باز کنید. در پنل منابع ، فایل demo-js.js را باز کنید و یک نقطه توقف در خط ۱۸ تنظیم کنید.

صفحه را رفرش کنید. بخش Scope را در پنل اشکال‌زدای سمت راست باز کنید. به آیکون جدید کنار مقدار بافر توجه کنید. روی آن کلیک کنید تا Memory Inspector نمایش داده شود.

برای کسب اطلاعات بیشتر در مورد بازرسی ArrayBuffer جاوا اسکریپت و WebAssembly.Memory با این بازرس حافظه جدید، مستندات را بررسی کنید.

بازرس حافظه

مشکل کرومیوم: ۱۱۶۶۵۷۷

صفحه تنظیمات نشان جدید در پنل Elements

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

صفحه تنظیمات نشان در پنل عناصر

در پنل عناصر ، روی هر عنصری کلیک راست کنید. از منوی زمینه، تنظیمات نشان (Badge settings) را انتخاب کنید، پنجره تنظیمات نشان در بالا ظاهر می‌شود. برای نمایش/پنهان کردن نشان‌ها، هر کادر انتخاب را فعال یا غیرفعال کنید.

مشکل کرومیوم: ۱۰۶۶۷۷۲

پیش‌نمایش تصویر پیشرفته با اطلاعات نسبت ابعاد

پیش‌نمایش‌های تصویر در پنل Elements اکنون اطلاعات بیشتری در مورد تصویر نمایش می‌دهند - اندازه رندر شده، نسبت ابعاد رندر شده، اندازه ذاتی، نسبت ابعاد ذاتی و اندازه فایل.

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

پیش‌نمایش تصویر با اطلاعات نسبت ابعاد

اطلاعات نسبت ابعاد تصویر در پنل شبکه نیز هنگام کلیک برای پیش‌نمایش تصویر در دسترس است.

اطلاعات نسبت ابعاد تصویر در پنل شبکه

مشکلات کرومیوم: ۱۱۴۹۸۳۲ ، ۱۱۷۰۶۵۶

دکمه جدید شرایط شبکه با گزینه‌هایی برای پیکربندی Content-Encoding

یک دکمه جدید با عنوان «شرایط شبکه» در پنل «شبکه» اضافه شده است. برای باز کردن تب «شرایط شبکه» ، روی آن کلیک کنید.

یک گزینه جدید Accepted Content-Encodings به تب Network conditions اضافه شده است. آن را طوری پیکربندی کنید که بررسی کند آیا پاسخ‌های سرور در مرورگرهایی که از gzip، brotli یا سایر Content-Encoding های آینده پشتیبانی نمی‌کنند، به درستی کدگذاری می‌شوند یا خیر.

دکمه جدید شرایط شبکه با گزینه‌هایی برای پیکربندی کدگذاری محتوا

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

بهبودهای پنل استایل‌ها

میانبر جدید برای مشاهده مقدار محاسبه‌شده در پنجره Styles

اکنون می‌توانید روی یک ویژگی CSS در پنل Styles کلیک راست کرده و گزینه View computed value را انتخاب کنید تا مقدار CSS محاسبه‌شده را مشاهده کنید.

میانبر جدید برای مشاهده مقدار محاسبه‌شده

مشکل کرومیوم: ۱۰۷۶۱۹۸

پشتیبانی از کلمه کلیدی accent-color

رابط کاربری تکمیل خودکار پنل Styles اکنون کلمه کلیدی CSS accent-color را تشخیص می‌دهد، که به توسعه‌دهندگان وب اجازه می‌دهد رنگ تأکیدی را برای کنترل‌های رابط کاربری (مثلاً چک‌باکس، دکمه رادیویی) تولید شده توسط عنصر، مشخص کنند.

ویژگی CSS accent-color در حال حاضر آزمایشی است. لطفاً برای آزمایش آن chrome://flags/#enable-experimental-web-platform-features فعال کنید.

رنگ تاکیدی

مشکل کرومیوم: ۱۰۹۲۰۹۳

دسته‌بندی انواع مسائل با رنگ‌ها و آیکون‌ها

تب «مسائل» اکنون مشکلات را به خطاهای صفحه، تغییرات فوری پیش رو و بهبودهای احتمالی برای نمایش بهتر شدت، دسته‌بندی می‌کند. می‌توانید با کلیک بر روی دکمه‌ی « تعداد مشکلات» در کنسول، تب «مسائل» را باز کنید.

  • خطاهای صفحه (قرمز) . مشکلاتی که تأثیر فوری بر عملکرد صفحه دارند، مانند عدم تنظیم صحیح هدرهای CORS و غیره.
  • تغییرات فوری پیش رو (زرد) . مسائلی که در مورد تغییر ناسازگار و قریب‌الوقوع پلتفرم وب اطلاع می‌دهند که ممکن است منجر به از دست رفتن عملکرد صفحه شود (مثلاً هشدار تغییرات قریب‌الوقوع CORS RFC 1918 ).
  • بهبودهای احتمالی (آبی) . بهبودهای بالقوه در صفحه، اما در حال حاضر به عملکرد اساسی صفحه آسیبی نمی‌رسانند (مثلاً مشکلات دسترسی).

دسته‌بندی انواع مسائل با رنگ‌ها و آیکون‌ها

مشکل کرومیوم: ۱۱۸۳۲۴۱

حذف توکن‌های اعتماد

اکنون می‌توانید توکن‌های اعتماد را با دکمه حذف جدید در پنل توکن‌های اعتماد ، در زیر پنل برنامه‌ها ، حذف کنید.

توکن اعتماد (Trust Token) یک API جدید برای کمک به مبارزه با کلاهبرداری و تشخیص ربات‌ها از انسان‌های واقعی، بدون ردیابی غیرفعال است. یاد بگیرید چگونه با توکن‌های اعتماد (Trust Tokens) شروع به کار کنید .

حذف توکن‌های اعتماد

مشکل کرومیوم: ۱۱۲۶۸۲۴

جزئیات مربوط به ویژگی‌های مسدود شده را در نمای جزئیات قاب مشاهده کنید

اکنون می‌توانید جزئیات مربوط به ویژگی‌های مسدود شده را در بخش سیاست مجوزها در نمای جزئیات قاب مشاهده کنید.

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

سیاست مجوزها یک API پلتفرم وب است که به یک وب‌سایت این امکان را می‌دهد که استفاده از ویژگی‌های مرورگر را در فریم خود یا در iframeهایی که در آن تعبیه شده است، مجاز یا مسدود کند.

ویژگی‌های مسدود شده در نمای جزئیات قاب

مشکل کرومیوم: ۱۱۵۸۸۲۷

آزمایش‌ها را در تنظیمات آزمایش‌ها فیلتر کنید

با فیلتر جدید آزمایش، آزمایش‌ها را سریع‌تر پیدا کنید. برای مثال، به تنظیمات > آزمایش‌ها بروید، در کادر متن فیلتر ، «contrast» را تایپ کنید تا همه آزمایش‌ها با کلمه «contrast» فیلتر شوند.

آزمایش‌ها را در تنظیمات آزمایش‌ها فیلتر کنید

ستون جدید Vary Header در پنل ذخیره‌سازی Cache

برای مشاهده‌ی هدر پاسخ HTTP مربوط به Vary، از ستون جدید Vary Header در پنل Cache Storage استفاده کنید.

ستون سربرگ متغیر

مشکل کرومیوم: ۱۱۸۶۰۴۹

بهبودهای پنل منابع

پشتیبانی از ویژگی‌های جدید جاوا اسکریپت

DevTools اکنون از ویژگی جدید زبان جاوا اسکریپت برای بررسی برند خصوصی ، که با نام #foo in obj شناخته می‌شود، پشتیبانی می‌کند.

این ویژگی بررسی برند خصوصی ، عملگر in را برای پشتیبانی از آزمایش فیلدهای کلاس خصوصی روی هر شیء داده شده، گسترش می‌دهد.

آن را در پنل Console and Sources امتحان کنید. می‌توانید فیلدهای خصوصی را در بخش Scope در زیر پنل اشکال‌زدا نیز بررسی کنید.

بررسی‌های برند خصوصی جاوا اسکریپت

مشکل کرومیوم: ۱۱۳۷۴

پشتیبانی پیشرفته برای اشکال‌زدایی نقاط شکست

DevTools اکنون به درستی نقاط توقف را در چندین اسکریپت تنظیم می‌کند. بسته‌های نرم‌افزاری مدرن جاوا اسکریپت (مانند Webpack ، Rollup ) از ویژگی تقسیم کد پشتیبانی می‌کنند - سناریوهایی وجود دارد که در آنها می‌توان یک کامپوننت مشترک را در چندین مسیر (تقسیم کد) گنجاند.

پیش از این، DevTools فقط می‌توانست نقاط شکست را در یک مکان خام تنظیم کند. با این پیشرفت اخیر، DevTools می‌تواند نقاط شکست را در تمام مکان‌های مربوطه به درستی تنظیم کند.

مشکلات کرومیوم: ۱۱۴۲۷۰۵ ، ۹۷۹۰۰۰ ، ۱۱۸۰۷۹۴

پشتیبانی از پیش‌نمایش با استفاده از نشانگر []

DevTools اکنون از پیش‌نمایش با ماوس روی عبارات عضو جاوا اسکریپت که از نماد [] در پنل Sources استفاده می‌کنند، پشتیبانی می‌کند.

پشتیبانی از پیش‌نمایش شناور با نماد '[]'

مشکل کرومیوم: ۱۱۷۸۳۰۵

طرح کلی بهبود یافته از فایل‌های HTML

DevTools اکنون پشتیبانی بهتری از طرح کلی برای فایل‌های HTML دارد. در پنل Sources ، یک فایل HTML را باز کنید. می‌توانید طرح کلی کد را با استفاده از کلیدهای Cmd + Shift + O در مک یا Ctrl + Shift + O در ویندوز تغییر دهید.

در مثال زیر، DevTools اکنون به درستی تمام توابع موجود در طرح کلی را فهرست می‌کند. پیش از این، DevTools فقط برخی از توابع را نشان می‌داد.

طرح کلی بهبود یافته از فایل‌های HTML

شماره کروم: ۷۶۱۰۱۹ ، ۱۱۹۱۴۶۵

ردیابی صحیح پشته خطا برای اشکال‌زدایی Wasm

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

پیش از این، DevTools فقط ارجاعات عمومی Wasm را در ردیابی‌های پشته خطا نمایش می‌داد.

ردیابی صحیح پشته خطا برای اشکال‌زدایی Wasm

نسخه قدیمی کروم در سمت چپ، محل منبع (مثلاً dsquare ) را در ردگیری‌های پشته خطا نشان نمی‌دهد، در حالی که نسخه جدید در سمت راست این کار را انجام می‌دهد.

مشکل کرومیوم: ۱۱۸۹۱۶۱

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

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

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

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

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

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