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

جسلین یین

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

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

در پنل Styles ، به دنبال هر ویژگی CSS با طول (مثلاً height ، padding ) بگردید.

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

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

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

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

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

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

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

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

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

پنجره مشکلات پنهان

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

بهبود نمایش املاک

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

  • همیشه ویژگی‌های خودتان را در پنل Console ، Sources و Properties ابتدا پررنگ و مرتب کنید.
  • نمایش ویژگی‌ها را در پنجره‌ی ویژگی‌ها (Properties pane) مسطح کنید.

برای مثال، قطعه کد زیر یک link شیء URL با دو ویژگی شخصی ایجاد می‌کند: user و 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، به ویژه برای کامپوننت‌های وب ، بهبود یابد.

خواص مسطح

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

فانوس دریایی ۸.۴ در پنل فانوس دریایی

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

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

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

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

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

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

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

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

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

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

اکنون می‌توانید با کلیک روی «یادداشت‌های انتشار DevTools» در برگه «چه خبر؟»، یادداشت‌های انتشار را به ۶ زبان دیگر - روسی ، چینی ، اسپانیایی ، ژاپنی ، پرتغالی و کره‌ای - بخوانید.

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

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

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

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

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

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

بهبود رابط کاربری منوی فرمان هنوز ادامه دارد، برای به‌روزرسانی‌های بیشتر با ما همراه باشید!

منوی فرمان

شماره کروم: ۱۲۰۱۹۹۷

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

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

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

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

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

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