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

Jecelyn Yeen

محدود کردن درخواست‌های WebSocket

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

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

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

صفحه جدید گزارش‌دهی API در پنل برنامه‌ها

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

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

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

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

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

مشکل کرومیوم: ۱۲۰۵۸۵۶

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

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

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

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

استایل‌دهی، قالب‌بندی و فیلترینگ بهتر کنسول

پیام‌های لاگ را به درستی با کد escape مربوط به ANSI استایل‌بندی کنید

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

برای توسعه‌دهندگان Node.js رایج است که پیام‌های لاگ را از طریق توالی‌های escape مربوط به ANSI، اغلب با کمک برخی کتابخانه‌های استایل‌بندی مانند chalk ، colors ، ansi-colors ، kleur و غیره، رنگی کنند.

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

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

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

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

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

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

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

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

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

مشکل کرومیوم: ۱۰۶۸۷۸۸

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

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

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

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

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

درخت پوشه منبع در پنل منابع اکنون با درهم‌ریختگی کمتر در ساختار پوشه‌ها و نامگذاری (مثلاً “../”، “./” و غیره) بهبود یافته است. در باطن، این نتیجه نرمال‌سازی آدرس‌های اینترنتی منبع مطلق در نقشه‌های منبع است.

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

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

فایل‌های منبع Worker (مثلاً Web Worker، Service Worker) با SourceURL نسبی اکنون در پنل Source نمایش داده می‌شوند. پیش از این، فایل‌های منبع Worker به درستی مدیریت نمی‌شدند.

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

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

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

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

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

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

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

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

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

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

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

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

• مشکل ویرایش کوکی‌ها در پنل کوکی‌ها برطرف شد. ( 1290196 )
• برای انتخاب دستور قبلی در منوی Command Shift + Tab استفاده کنید. ( 1278743 )
• مشکلات درخواست پیش از پرواز CORS را در برگه مشکلات گزارش دهید. ( 1272445 ).
• مشکلات مربوط به User-Agent Client Hints را در برگه مشکلات گزارش دهید. ( 1219359 ).
• رفتارهای Shift + Delete و Page up / Page down در پنل Sources و Console برطرف شد. ( 1278461 ، 1285662 )
• هنگام حذف نقطه توقف در پنل منابع ، پنجره ویرایش نقطه توقف را ببندید. (922513)
• هنگام تغییر تم روشن/تیره در DevTools، نیازی به بارگذاری مجدد نیست. ( 1278738 )

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

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

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

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

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

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

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