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

جسلین ین

کاهش درخواست های WebSocket

اکنون پانل شبکه از درخواست‌های سوکت وب پشتیبانی می‌کند. قبلاً، throttling شبکه روی درخواست‌های سوکت وب کار نمی‌کرد.

پانل شبکه را باز کنید، روی درخواست سوکت وب کلیک کنید و برگه پیام ها را باز کنید تا انتقال پیام را مشاهده کنید. برای کاهش سرعت، Slow 3G را انتخاب کنید.

کاهش درخواست های WebSocket

شماره کرومیوم: 423246

پنجره API گزارش جدید در پانل برنامه

برای نظارت بر گزارش های تولید شده در صفحه خود و وضعیت آن ها از پنل Reporting API جدید استفاده کنید.

Reporting API برای کمک به نظارت بر نقض‌های امنیتی صفحه خود، تماس‌های API منسوخ شده و موارد دیگر طراحی شده است.

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

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

بخش Endpoints یک نمای کلی از تمام نقاط پایانی پیکربندی شده در سرصفحه Reporting-Endpoints به شما ارائه می دهد.

گزارش صفحه API

شماره Chromium: 1205856

پشتیبانی صبر کنید تا عنصر در پانل ضبط قابل مشاهده/کلیک باشد

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

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

شماره Chromium: 1257499

یک ظاهر طراحی، قالب بندی و فیلتر کردن کنسول بهتر است

پیام های گزارش را با کد فرار ANSI به درستی استایل کنید

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

برای توسعه دهندگان Node.js معمول است که پیام های گزارش را از طریق دنباله های فرار ANSI، اغلب با کمک برخی از کتابخانه های سبک مانند گچ ، رنگ ها ، ansi-colors ، kleur و غیره رنگ آمیزی کنند.

با این تغییرات، اکنون می‌توانید برنامه‌های Node.js خود را با استفاده از DevTools، با پیام‌های کنسول رنگی مناسب، اشکال زدایی کنید. این نسخه ی نمایشی را باز کنید تا خودتان آن را ببینید!

برای کسب اطلاعات بیشتر در مورد قالب‌بندی و استایل کردن پیام‌های کنسول با DevTools، به قالب‌بندی و استایل کردن پیام‌ها در مستندات کنسول بروید.

استایل کنسول

مسائل Chromium: 1282837 ، 1282076

مشخص کننده های قالب %s ، %d ، %i و %f را به درستی پشتیبانی کنید

کنسول اکنون به درستی تبدیل‌های %s ، %d ، %i ، و %f را همانطور که در استاندارد کنسول مشخص شده است انجام می‌دهد. پیش از این، نتیجه گفتگو متناقض بود.

پشتیبانی از مشخص کننده های فرمت در پیام کنسول

مسائل Chromium: 1277944 ، 1282076

فیلتر گروه کنسول بصری تر

هنگام فیلتر کردن پیام کنسول، اگر محتوای پیام آن با فیلتر مطابقت داشته باشد یا عنوان گروه (یا گروه اجداد) با فیلتر مطابقت داشته باشد، اکنون یک پیام کنسول نشان داده می شود. قبلاً، عنوان گروه کنسول با وجود فیلتر نشان داده می شد.

علاوه بر این، اگر یک پیام کنسول نشان داده شود، گروه (یا گروه اجدادی) که به آن تعلق دارد نیز اکنون نشان داده می شود.

فیلتر گروه کنسول

شماره Chromium: 1068788

بهبود نقشه های منبع

افزونه کروم را با فایل های نقشه منبع اشکال زدایی کنید

اکنون می توانید افزونه کروم را با فایل های نقشه منبع اشکال زدایی کنید . پیش از این، DevTools فقط از نقشه منبع داخلی برای اشکال زدایی برنامه افزودنی کروم پشتیبانی می کرد.

افزونه کروم را با فایل های نقشه منبع اشکال زدایی کنید

شماره Chromium: 212374

درخت پوشه منبع بهبود یافته در پانل Sources

درخت پوشه منبع در پانل Sources اکنون با درهم ریختگی کمتری در ساختار پوشه و نامگذاری بهبود یافته است (به عنوان مثال "../"، "./"، و غیره). در زیر هود، این نتیجه عادی سازی URL های منبع مطلق در نقشه های منبع است.

درخت پوشه منبع بهبود یافته در پانل Sources

شماره Chromium: 1284737

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

فایل‌های منبع Worker (به عنوان مثال وب‌کار، کارگر خدمات) با SourceURL نسبی اکنون در پانل منبع نمایش داده می‌شوند. قبلاً فایل‌های منبع کارگر به درستی مدیریت نمی‌شدند.

ALT_TEXT_HERE

شماره کرومیوم: 1277002

به‌روزرسانی‌های تم تاریک خودکار Chrome

رابط کاربری شبیه‌سازی تم تاریک خودکار اکنون ساده شده است. اکنون یک چک باکس است، قبلاً یک کشویی بود.

جدا از آن، زمانی که تم تاریک خودکار فعال باشد، منوی کشویی Emulate prefers-color-scheme غیرفعال می شود و به طور خودکار روی prefers-color-scheme: dark تنظیم می شود.

کروم 96 نسخه آزمایشی اولیه را برای تم تاریک خودکار در اندروید معرفی می کند. با استفاده از این ویژگی، زمانی که کاربر تم‌های تیره را در سیستم‌عامل انتخاب کرده باشد، مرورگر یک تم تیره به‌طور خودکار برای سایت‌های با مضمون روشن اعمال می‌کند.

شبیه سازی خودکار تم تاریک

شماره Chromium: 1243309

انتخابگر رنگ و جداکننده لمسی

اکنون می توانید رنگ را انتخاب کنید و اندازه کشو را در DevTools با انگشتان یا قلم در دستگاه های صفحه لمسی تغییر دهید.

در اینجا نمونه ای است که با صفحه لمسی دستگاه Google Pixelbook گرفته شده است.

مسائل Chromium: 1284245 ، 1284995

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

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

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

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

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

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

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

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