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

جسلین ین

از DevTools به زبان دلخواه خود استفاده کنید

Chrome DevTools اکنون از بیش از 80 زبان پشتیبانی می کند و به شما امکان می دهد به زبان دلخواه خود کار کنید!

تنظیمات را باز کنید، سپس زبان مورد نظر خود را در منوی کرکره Preferences > Language انتخاب کنید و DevTools را دوباره بارگیری کنید.

ترجیحات" width="800" height="494">

شماره Chromium: 1163928

دستگاه‌های Nest Hub جدید در فهرست دستگاه‌ها

اکنون می‌توانید ابعاد Nest Hub و Nest Hub Max را در حالت دستگاه شبیه‌سازی کنید.

روی Toggle Device Toolbar کلیک کنید نوار ابزار دستگاه را تغییر دهید ، Nest Hub یا Nest Hub Max را در لیست دستگاه انتخاب کنید.

دستگاه Nest Hub در حالت دستگاه

شماره Chromium: 1223525

آزمایش‌های اولیه در نمای جزئیات قاب

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

آزمایش‌های مبدأ به شما امکان دسترسی به یک ویژگی جدید یا آزمایشی را می‌دهد، برای ایجاد عملکرد، کاربران شما می‌توانند برای مدت محدودی قبل از اینکه این ویژگی در دسترس همه قرار گیرد، آن را امتحان کنند.

صفحه ای را با نسخه آزمایشی اصلی باز کنید (مثلاً صفحه نمایشی ). در پنل برنامه ، به قسمت Frames رفته و فریم بالایی را انتخاب کنید.

آزمایش‌های اولیه در نمای جزئیات قاب

شماره Chromium: 607555

نشان جدید جستجوهای ظرف CSS

یک نشان کانتینر جدید در کنار عناصر کانتینر (عناصر اجدادی که با معیارهای @container at-rules مطابقت دارند) اضافه می‌شود. روی نشان کلیک کنید تا نمایش همپوشانی کانتینر انتخابی و همه نوادگان درخواستی آن در صفحه تغییر کند.

نشان جستجوهای ظرف CSS

شماره Chromium: 1146422

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

از کادر جدید Invert برای معکوس کردن فیلترها در پنل Network استفاده کنید.

برای مثال، می‌توانید «status-code: 404» را تایپ کنید تا درخواست‌های شبکه با وضعیت 404 را فیلتر کنید. کادر انتخاب Invert را برای نفی فیلتر فعال کنید (نمایش همه درخواست‌های شبکه که با وضعیت 404 نیستند).

فیلترهای شبکه را معکوس کنید

شماره Chromium: 1054464

منسوخ شدن آتی نوار کناری کنسول

نوار کناری کنسول به نفع انتقال رابط کاربری فیلتر به نوار ابزار حذف خواهد شد. آیا نگرانی یا بازخوردی دارید؟ از طریق این ردیاب موضوع به ما اطلاع دهید.

پیام منسوخ شدن نوار کناری کنسول

شماره Chromium: 1232937

هدرهای Set-Cookie خام را در برگه Issues و پنل Network نمایش دهید

DevTools اکنون هدرهای Set-Cookie خام را در برگه Issues نمایش می دهد.

قبلاً، DevTools کوکی‌های نادرست (سرصفحه Set-Cookie نادرست) را در پانل شبکه نشان نمی‌داد. با فیلتر جدید response-header-set-cookie اضافه شده در پانل شبکه ، کاربران می توانند پاسخ سرصفحه Set-Cookie خام را فیلتر کنند. DevTools سرصفحه‌های Set-Cookie خام در برگه Issues را به پانل شبکه پیوند می‌دهد.

هدرهای خام «Set-Cookie» در برگه Issues و پانل شبکه

شماره Chromium: 1179186

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

کنسول اکنون دسترسی‌های بومی را به‌عنوان ویژگی‌های خود به طور مداوم نمایش می‌دهد.

برای مثال، هنگام ارزیابی عبارت new Int8Array([1, 2, 3]) در کنسول ، دسترسی‌های بومی مانند length ، byteOffset در پیش‌نمایش نمایش داده نمی‌شوند. با این آخرین به‌روزرسانی، دسترسی‌های بومی در پیش‌نمایش نشان داده می‌شوند و ارزش‌ها در صورت گسترش مشتاقانه ارزیابی می‌شوند.

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

مسائل Chromium: 1076820 ، 1199247

ردیابی پشته خطای مناسب برای اسکریپت های درون خطی با #sourceURL

DevTools اکنون اسکریپت های درون خطی را با #sourceURL به درستی حل می کند و ردیابی پشته خطای مناسب را برای اشکال زدایی نشان می دهد.

قبلاً DevTools مکان نادرستی را برای اسکریپت‌های درون خطی با #sourceURL ، نسبت به سند اطراف به جای تگ <script> باز نشان می‌داد.

ردیابی پشته خطای مناسب برای اسکریپت های درون خطی با #sourceURL

مسائل Chromium: 1183990 ، 578269

فرمت رنگ را در قسمت Computed تغییر دهید

اکنون می توانید فرمت رنگ هر عنصر را در صفحه Computed با Shift + کلیک بر روی پیش نمایش رنگ تغییر دهید.

برای تغییر فرمت رنگ، روی پیش نمایش رنگ Shift+ کلیک کنید

شماره Chromium: 1226371

راهنمای ابزار سفارشی را با راهنمای ابزار HTML بومی جایگزین کنید

DevTools اکنون نکات ابزار HTML بومی را در تمام اجزاء به کار می گیرد. DevTools برای مدت طولانی به دلیل عدم استایل یک راهنمای ابزار HTML بومی، یک پیاده‌سازی راهنمای سفارشی داشته است.

متأسفانه، حفظ پیاده‌سازی راهنمای سفارشی پیچیده است و ما مرتباً با باگ‌های پیچیده مواجه می‌شویم.

پس از وزن‌دهی مجدد به مزایای پیاده‌سازی‌های سفارشی، متوجه می‌شویم که راهنمایی‌های ابزار HTML بومی برای DevTools کافی است و استفاده از راهنمایی‌های ابزار از انواع گسترده مشکلات برای کاربران ما جلوگیری می‌کند.

نکته ابزار DevTools

شماره Chromium: 1223391

[تجربی] مشکلات را در برگه Issues پنهان کنید

آزمایش منوی پنهان کردن مسائل را برای پنهان کردن مشکلات در برگه مشکلات فعال کنید. به این ترتیب می توانید روی مسائل مهمی که برایتان اهمیت دارد تمرکز کنید.

در تب Issue ، روی یک مشکل نگه دارید، روی منوی مشکل کلیک کنید بیشتر در سمت راست، گزینه Hide Problems like this را برای مخفی کردن آن انتخاب کنید.

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

شماره Chromium: 1175722

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

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

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

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

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

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