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

جسلین ین

ابزارهای جدید نوشتن CSS طول

DevTools یک راه آسان تر و در عین حال انعطاف پذیر برای به روز رسانی طول در CSS اضافه کرد!

در قسمت Styles ، هر ویژگی CSS با طول (به عنوان مثال height ، padding ) را جستجو کنید.

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

ماوس را روی مقدار واحد نگه دارید و نشانگر ماوس شما به مکان نما افقی تغییر می کند. برای افزایش یا کاهش مقدار به صورت افقی بکشید. برای تنظیم مقدار 10، کلید Shift را هنگام کشیدن نگه دارید.

همچنان می‌توانید مقدار واحد را به‌عنوان متن ویرایش کنید - فقط روی مقدار کلیک کنید و ویرایش را شروع کنید.

مسائل Chromium: 1126178 ، 1172993

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

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

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

مخفی کردن منوی مسائل

همه مسائل پنهان در قسمت Hidden Problems اضافه خواهند شد. صفحه را باز کنید. شما می توانید همه مسائل پنهان یا یک مورد انتخاب شده را آشکار کنید.

پنجره مسائل پنهان

شماره Chromium: 1175722

نمایش خواص را بهبود بخشید

DevTools نمایش ویژگی ها را با موارد زیر بهبود می بخشد:

  • همیشه خصوصیات خود را ابتدا در قسمت کنسول ، پنل منابع و بخش خصوصیات پررنگ کنید و مرتب کنید.
  • نمایش خصوصیات را در قسمت Properties صاف کنید.

به عنوان مثال، قطعه زیر یک link شی URL با 2 ویژگی خاص ایجاد می کند: user and access ، و مقدار search ویژگی ارثی را به روز می کند.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

link ورود به سیستم را در کنسول امتحان کنید. ویژگی‌های شخصی اکنون درشت شده و ابتدا مرتب شده‌اند. این تغییرات، شناسایی ویژگی‌های سفارشی را آسان‌تر می‌کند، مخصوصاً برای APIهای وب (مثلاً URL ) با بسیاری از ویژگی‌های ارثی.

ویژگی های خود اول پررنگ و مرتب شده اند

جدای از این تغییرات، ویژگی‌های پنجره Properties نیز اکنون برای تجربه بهتر اشکال‌زدایی ویژگی‌های DOM، به‌ویژه برای مؤلفه‌های وب، صاف شده‌اند.

صاف کردن خواص

مسائل Chromium: 1076820 ، 1119900

Lighthouse 8.4 در پنل Lighthouse

پنل Lighthouse اکنون Lighthouse 8.4 را اجرا می کند. اکنون Lighthouse تشخیص می دهد که آیا عنصر بزرگترین رنگ محتوی (LCP) یک تصویر با بارگذاری تنبل است یا خیر و توصیه می کند ویژگی loading را از آن حذف کنید.

برای جزئیات بیشتر در مورد به‌روزرسانی‌ها ، موارد جدید در Lighthouse 8.4 را بررسی کنید.

ممیزی LCP تنبل در گزارش Lighthouse

شماره Chromium: 772558

قطعات را در پانل Sources مرتب کنید

تکه‌های موجود در بخش Snippets زیر پانل Sources اکنون بر اساس حروف الفبا مرتب شده‌اند. قبلاً مرتب نشده است.

برای اجرای سریعتر دستورات از ویژگی snippets استفاده کنید. برای یک نکته این ویدیو را تماشا کنید!

قطعات را در پانل Sources مرتب کنید

شماره Chromium: 1243976

پیوندهای جدید به یادداشت های انتشار ترجمه شده و گزارش یک اشکال ترجمه

اکنون می‌توانید برای خواندن یادداشت‌های انتشار DevTools به ۶ زبان دیگر - روسی ، چینی ، اسپانیایی ، ژاپنی ، پرتغالی و کره‌ای از طریق برگه What's new کلیک کنید.

از Chrome 94، می‌توانید زبان دلخواه خود را در DevTools تنظیم کنید . اگر مشکلی در ترجمه‌ها پیدا کردید، با گزارش مشکل ترجمه از طریق گزینه‌های بیشتر > راهنما > گزارش اشکال ترجمه به ما کمک کنید تا آن را بهبود ببخشیم.

پیوندهای جدید به یادداشت های انتشار ترجمه شده و گزارش یک اشکال ترجمه

مشکلات Chromium: 1246245 ، 1245481

رابط کاربری بهبود یافته برای منوی فرمان DevTools

آیا جستجوی یک فایل در منوی فرمان برای شما سخت بود؟ خبر خوب برای شما، رابط کاربری Command Menu اکنون بهبود یافته است!

برای جستجوی فایلی با میانبر صفحه کلید Control + P در ویندوز و لینوکس، یا Command + P در MacOS، منوی Command را باز کنید.

بهبودهای رابط کاربری Command Menu همچنان ادامه دارد، منتظر به‌روزرسانی‌های بیشتر باشید!

منوی فرمان

شماره Chromium: 1201997

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

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

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

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

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

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