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

Jecelyn Yeen

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

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

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

تنظیمات" عرض ="800" ارتفاع ="494">

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

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

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

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

مشکل کرومیوم: ۱۲۲۳۵۲۵

آزمایش‌های مبدا در نمای جزئیات Frame

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

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

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

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

نشان جدید کوئری‌های کانتینر CSS

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

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

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

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

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

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

منسوخ شدن قریب‌الوقوع نوار کناری کنسول

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

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

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

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

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

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

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

کنسول اکنون به طور مداوم accessorهای native را به عنوان propertyهای خودشان نمایش می‌دهد.

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

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

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

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

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

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

تغییر قالب رنگ در پنل Computed

اکنون می‌توانید با نگه داشتن کلید Shift و کلیک روی پیش‌نمایش رنگ، قالب رنگ هر عنصری را در پنل Computed تغییر دهید.

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

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

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

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

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

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

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

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

در برگه «مسئله» ، نشانگر ماوس را روی یک مسئله نگه دارید، روی منوی «مسئله» کلیک کنید در سمت راست، برای پنهان کردن آن، گزینه‌ی «مخفی کردن مسائلی از این دست» را انتخاب کنید.

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

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

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

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

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

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

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

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