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

Jecelyn Yeen

ابزارهای جدید نوشتن 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 را بررسی کنید.

شماره Chromium: 772558

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

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

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

شماره 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 استفاده کنید.

• پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
• با استفاده از گزینه های بیشتر، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.

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

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

Jecelyn Yeen

ابزارهای جدید نویسندگی CSS

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

در صفحه سبک ها ، به دنبال هرگونه خاصیت CSS با طول (به عنوان مثال height ، padding ) باشید.

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

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

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

مشکلات کروم: 1126178 ، 1172993

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

اکنون می توانید موضوعات خاص را در برگه موضوعات مخفی کنید تا فقط روی موضوعاتی که برای شما مهم است تمرکز کنید.

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

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

شماره کروم: 1175722

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

DevTools نمایش خواص را توسط:

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

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

مشکلات کروم: 1076820 ، 1119900

فانوس دریایی 8.4 در صفحه فانوس دریایی

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

برای اطلاعات بیشتر در مورد به روزرسانی ها ، موارد جدید در Lighthouse 8.4 را بررسی کنید.

شماره کروم: 772558

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

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

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

شماره کروم: 1243976

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

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

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

مشکلات کروم: 1246245 ، 1245481

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

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

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

پیشرفت های UI منوی فرمان هنوز در حال انجام است ، برای به روزرسانی های بیشتر با ما در ارتباط باشید!

شماره کروم: 1201997

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

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

در تماس با تیم Chrome Devtools

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

• یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهید > راهنما > گزارش مسائل DevTools در DevTools.
• توییت در chromedevtools .
• در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.