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

Sofia Emelianova

اشکال‌زدایی بهبود یافته‌ی استایل‌شیت‌های از دست رفته

DevTools تعدادی بهبود یافته است تا به شما در شناسایی و اشکال‌زدایی سریع‌تر مشکلات مربوط به استایل‌شیت‌های از دست رفته کمک کند:

• درختواره‌ی « منابع > صفحات» اکنون فقط استایل‌شیت‌های با موفقیت پیاده‌سازی و بارگذاری‌شده را نشان می‌دهد تا سردرگمی به حداقل برسد.
• منوی Sources > Editor اکنون زیر دستورات @import ، url() و href که با خطا مواجه شده‌اند، خط می‌کشد و نکات خطای درون‌خطی را نمایش می‌دهد.

• کنسول ، علاوه بر لینک‌هایی به درخواست‌های ناموفق، اکنون لینک‌هایی به خط دقیقی که به یک فایل استایل‌شیت ناموفق ارجاع می‌دهد، ارائه می‌دهد.

• پنل شبکه به طور مداوم ستون Initiator را با لینک‌هایی به خط دقیقی که به یک stylesheet که بارگذاری آن با شکست مواجه شده است، ارجاع می‌دهد، پر می‌کند.

• پنل مشکلات (Iss) تمام مشکلات بارگذاری stylesheetها، از جمله URLهای خراب، درخواست‌های ناموفق و دستورات @import که به اشتباه وارد شده‌اند را فهرست می‌کند.

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

پشتیبانی از زمان‌بندی خطی در Elements > Styles > Easing Editor

ویرایشگر Easing در Elements > Styles به شما امکان می‌دهد مقادیر transition-timing-function و animation-timing-function را با یک کلیک تنظیم کنید. در این نسخه، ویرایشگر Easing از تابع زمان‌بندی خطی پشتیبانی می‌کند.

برای پیکربندی زمان‌بندی‌های خطی، روی دکمه‌ی انتخابگر خطی کلیک کنید. برای اضافه کردن یک نقطه کنترل، روی هر جایی از خط کلیک کنید. برای حذف یک نقطه کنترل، روی آن دوبار کلیک کنید. همچنین می‌توانید یکی از حالت‌های از پیش تعیین‌شده را انتخاب کنید: linear ، elastic ، bounce یا emphasized . برای مشاهده‌ی نحوه‌ی تنظیم خطی در عمل، ویدیو را تماشا کنید.

شماره کروم: ۱۴۲۱۲۴

پشتیبانی از مخازن ذخیره‌سازی و نمایش فراداده

بخش Application > Storage از Storage Bucketها پشتیبانی می‌کند. Storage Bucketها مستقل از یکدیگر هستند، بنابراین می‌توانید اولویت‌بندی حذف را برای بخش‌هایی از داده‌ها مشخص کنید و مطمئن شوید که ارزشمندترین داده‌ها حذف نمی‌شوند. هر Storage Bucket می‌تواند داده‌های مرتبط با APIهای ذخیره‌سازی ایجاد شده مانند IndexedDB و CacheStorage را ذخیره کند.

برای آزمایش این ویژگی، این راهنما را بررسی کنید. DevTools را باز کنید، به Application > Storage > Indexed DB بروید و کد را اجرا کنید. DevTools اکنون سطل‌ها و محتوای آنها را به شما نشان می‌دهد. یک سطل را انتخاب کنید تا فراداده‌های آن را مشاهده کنید.

نمای یکپارچه‌ی فراداده اکنون برای بخش‌های ذخیره‌سازی محلی، جلسه و حافظه‌ی نهان نیز در دسترس است.

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

فانوس دریایی ۱۰.۳.۰

پنل Lighthouse اکنون Lighthouse 10.3.0 را اجرا می‌کند. نکته قابل توجه این است که این نسخه چهار ممیزی جدید اضافه کرده است که مشکلات مختلف دسترسی‌پذیری را در مورد سربرگ‌ها و زیرنویس‌های جداول، نام دکمه‌های ورودی و عدم تطابق زبان ثبت می‌کند. به عنوان مثال:

همچنین لیست کامل تغییرات را ببینید. برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

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

قابلیت دسترسی: دستورات صفحه کلید و بهبود خواندن صفحه نمایش

DevTools اکنون از میانبرهای بیشتری پشتیبانی می‌کند و مشکلات مربوط به صفحه‌خوان‌ها را برطرف می‌کند:

• اکنون می‌توانید منوی زمینه را با یک میانبر صفحه‌کلید، مثلاً Shift + F10 در ویندوز و بسیاری از توزیع‌های لینوکس، باز کنید. برای میانبرهای MacOS، به اقدامات جایگزین اشاره‌گر مراجعه کنید.
• کاربردهای صفحه خوان:
  • بی‌جهت برچسب‌های چک‌باکس‌ها را دو بار اعلام نمی‌کند.
  • وقتی میانبر «خواندن سرستون» را فشار دهید، نام سرستون‌ها را برای ستون‌های قابل مرتب‌سازی اعلام می‌کند.

تیم DevTools از یانلینگ وانگ و الورُم کوچ برای ارائه این بهبودها قدردانی می‌کند.

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

نکات برجسته متفرقه

برخی از اصلاحات و بهبودهای قابل توجه در این نسخه عبارتند از:

• پنل شبکه حتی پس از تعامل شما با جدول زمانی ( 1422552 ) به ضبط فعالیت شبکه ادامه می‌دهد.
• پنل Coverage اکنون تشخیص می‌دهد که آیا فعال‌سازی پیش‌رندر یا پیمایش حافظه پنهان به عقب/جلو وجود داشته است یا خیر و از شما می‌خواهد که بارگذاری مجدد را انجام دهید ( ۱۳۹۳۰۵۷ ).
• اکنون می‌توانید با صفحه‌کلید در پنل Sources > Breakpoints حرکت کنید: برای حرکت از کلیدهای جهت‌نمای بالا و پایین و برای انتخاب از کلید فاصله ( 1446150 ) استفاده کنید.
• مشکل آپلود و فیلتر کردن فایل‌های HAR در پنل شبکه ( 1450622 ) برطرف شد.
• نمودار شعله‌ای (Flamechart) در پنل عملکرد (Performance) اکنون فاصله‌های کوچکی بین ردپاها قرار می‌دهد تا آنها را بهتر رندر کند ( 1452150 ).
• مشکل نگاشت خودکار فایل‌های جاسازی‌شده در نگاشت‌های منبع ( 1446383 ) برطرف شد.

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

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

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

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

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

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

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

Sofia Emelianova

اشکال‌زدایی بهبود یافته‌ی استایل‌شیت‌های از دست رفته

DevTools تعدادی بهبود یافته است تا به شما در شناسایی و اشکال‌زدایی سریع‌تر مشکلات مربوط به استایل‌شیت‌های از دست رفته کمک کند:

• درختواره‌ی « منابع > صفحات» اکنون فقط استایل‌شیت‌های با موفقیت پیاده‌سازی و بارگذاری‌شده را نشان می‌دهد تا سردرگمی به حداقل برسد.
• منوی Sources > Editor اکنون زیر دستورات @import ، url() و href که با خطا مواجه شده‌اند، خط می‌کشد و نکات خطای درون‌خطی را نمایش می‌دهد.

• کنسول ، علاوه بر لینک‌هایی به درخواست‌های ناموفق، اکنون لینک‌هایی به خط دقیقی که به یک فایل استایل‌شیت ناموفق ارجاع می‌دهد، ارائه می‌دهد.

• پنل شبکه به طور مداوم ستون Initiator را با لینک‌هایی به خط دقیقی که به یک stylesheet که بارگذاری آن با شکست مواجه شده است، ارجاع می‌دهد، پر می‌کند.

• پنل مشکلات (Iss) تمام مشکلات بارگذاری stylesheetها، از جمله URLهای خراب، درخواست‌های ناموفق و دستورات @import که به اشتباه وارد شده‌اند را فهرست می‌کند.

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

پشتیبانی از زمان‌بندی خطی در Elements > Styles > Easing Editor

ویرایشگر Easing در Elements > Styles به شما امکان می‌دهد مقادیر transition-timing-function و animation-timing-function را با یک کلیک تنظیم کنید. در این نسخه، ویرایشگر Easing از تابع زمان‌بندی خطی پشتیبانی می‌کند.

برای پیکربندی زمان‌بندی‌های خطی، روی دکمه‌ی انتخابگر خطی کلیک کنید. برای اضافه کردن یک نقطه کنترل، روی هر جایی از خط کلیک کنید. برای حذف یک نقطه کنترل، روی آن دوبار کلیک کنید. همچنین می‌توانید یکی از حالت‌های از پیش تعیین‌شده را انتخاب کنید: linear ، elastic ، bounce یا emphasized . برای مشاهده‌ی نحوه‌ی تنظیم خطی در عمل، ویدیو را تماشا کنید.

شماره کروم: ۱۴۲۱۲۴

پشتیبانی از مخازن ذخیره‌سازی و نمایش فراداده

بخش Application > Storage از Storage Bucketها پشتیبانی می‌کند. Storage Bucketها مستقل از یکدیگر هستند، بنابراین می‌توانید اولویت‌بندی حذف را برای بخش‌هایی از داده‌ها مشخص کنید و مطمئن شوید که ارزشمندترین داده‌ها حذف نمی‌شوند. هر Storage Bucket می‌تواند داده‌های مرتبط با APIهای ذخیره‌سازی ایجاد شده مانند IndexedDB و CacheStorage را ذخیره کند.

برای آزمایش این ویژگی، این راهنما را بررسی کنید. DevTools را باز کنید، به Application > Storage > Indexed DB بروید و کد را اجرا کنید. DevTools اکنون سطل‌ها و محتوای آنها را به شما نشان می‌دهد. یک سطل را انتخاب کنید تا فراداده‌های آن را مشاهده کنید.

نمای یکپارچه‌ی فراداده اکنون برای بخش‌های ذخیره‌سازی محلی، جلسه و حافظه‌ی نهان نیز در دسترس است.

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

فانوس دریایی ۱۰.۳.۰

پنل Lighthouse اکنون Lighthouse 10.3.0 را اجرا می‌کند. نکته قابل توجه این است که این نسخه چهار ممیزی جدید اضافه کرده است که مشکلات مختلف دسترسی‌پذیری را در مورد سربرگ‌ها و زیرنویس‌های جداول، نام دکمه‌های ورودی و عدم تطابق زبان ثبت می‌کند. به عنوان مثال:

همچنین لیست کامل تغییرات را ببینید. برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

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

قابلیت دسترسی: دستورات صفحه کلید و بهبود خواندن صفحه نمایش

DevTools اکنون از میانبرهای بیشتری پشتیبانی می‌کند و مشکلات مربوط به صفحه‌خوان‌ها را برطرف می‌کند:

• اکنون می‌توانید منوی زمینه را با یک میانبر صفحه‌کلید، مثلاً Shift + F10 در ویندوز و بسیاری از توزیع‌های لینوکس، باز کنید. برای میانبرهای MacOS، به اقدامات جایگزین اشاره‌گر مراجعه کنید.
• کاربردهای صفحه خوان:
  • بی‌جهت برچسب‌های چک‌باکس‌ها را دو بار اعلام نمی‌کند.
  • وقتی میانبر «خواندن سرستون» را فشار دهید، نام سرستون‌ها را برای ستون‌های قابل مرتب‌سازی اعلام می‌کند.

تیم DevTools از یانلینگ وانگ و الورُم کوچ برای ارائه این بهبودها قدردانی می‌کند.

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

نکات برجسته متفرقه

برخی از اصلاحات و بهبودهای قابل توجه در این نسخه عبارتند از:

• پنل شبکه حتی پس از تعامل شما با جدول زمانی ( 1422552 ) به ضبط فعالیت شبکه ادامه می‌دهد.
• پنل Coverage اکنون تشخیص می‌دهد که آیا فعال‌سازی پیش‌رندر یا پیمایش حافظه پنهان به عقب/جلو وجود داشته است یا خیر و از شما می‌خواهد که بارگذاری مجدد را انجام دهید ( ۱۳۹۳۰۵۷ ).
• اکنون می‌توانید با صفحه‌کلید در پنل Sources > Breakpoints حرکت کنید: برای حرکت از کلیدهای جهت‌نمای بالا و پایین و برای انتخاب از کلید فاصله ( 1446150 ) استفاده کنید.
• مشکل آپلود و فیلتر کردن فایل‌های HAR در پنل شبکه ( 1450622 ) برطرف شد.
• نمودار شعله‌ای (Flamechart) در پنل عملکرد (Performance) اکنون فاصله‌های کوچکی بین ردپاها قرار می‌دهد تا آنها را بهتر رندر کند ( 1452150 ).
• مشکل نگاشت خودکار فایل‌های جاسازی‌شده در نگاشت‌های منبع ( 1446383 ) برطرف شد.

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

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

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

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

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

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

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