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

Jecelyn Yeen

کروم ۱۰۰

به مناسبت صدمین نسخه کروم! Chrome DevTools به ارائه ابزارهای قابل اعتماد برای توسعه‌دهندگان جهت ساخت و ساز در وب ادامه خواهد داد. لحظه‌ای را به کلیک کردن در تب «چه خبر» اختصاص دهید تا این دستاوردهای مهم را جشن بگیرید.

طبق معمول، می‌توانید با کلیک روی تصویر، آخرین ویدیوی «چه خبر در DevTools» را تماشا کنید.

مشاهده و ویرایش @supports در قوانین موجود در پنل Styles

اکنون می‌توانید @supports at-rules در CSS را در پنل Styles مشاهده و ویرایش کنید. این تغییرات، آزمایش at-rules را در زمان واقعی آسان‌تر می‌کند. این صفحه آزمایشی را باز کنید، عنصر <div class=”box”> را بررسی کنید ، @supports at-rules را در پنل Styles مشاهده کنید. برای ویرایش، روی اعلان قانون کلیک کنید.

مشکلات کرومیوم: ۱۲۲۲۵۷۴ ، ۱۲۲۲۵۷۳

بهبود پنل ضبط کننده

به طور پیش‌فرض از انتخابگرهای رایج پشتیبانی کنید

هنگام تعیین یک انتخابگر منحصر به فرد در حین ضبط، پنل ضبط اکنون به طور خودکار عناصری با ویژگی‌های زیر را ترجیح می‌دهد:

• داده-آزمون
• آزمون داده
• داده-qa
• داده-سی
• شناسه-آزمون-داده
• شناسه-داده-qa
• آزمایش داده‌ها

ویژگی‌های بالا، انتخابگرهای رایجی هستند که در اتوماسیون تست استفاده می‌شوند.

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

از آنجایی که عنصر ایمیل دارای data-testid تعریف شده است، به طور خودکار به جای ویژگی‌های id یا class به عنوان انتخابگر استفاده می‌شود.

انتخابگر ضبط را سفارشی کنید

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

برای مثال، این صفحه آزمایشی از ویژگی data-automate به عنوان انتخابگر استفاده می‌کند. یک ضبط جدید را شروع کنید و data-automate را به عنوان ویژگی انتخابگر وارد کنید. یک آدرس ایمیل وارد کنید و مقدار انتخابگر ( [data-automate=email-address] ) را مشاهده کنید.

تغییر نام یک ضبط

اکنون می‌توانید نام یک فایل ضبط‌شده را در پنل ضبط‌کننده با دکمه ویرایش (آیکون مداد) در کنار عنوان فایل ضبط‌شده تغییر دهید.

پیش‌نمایش ویژگی‌های کلاس/تابع با نگه داشتن ماوس روی آن

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

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

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

ضبط اجرا اکنون یک دسته فریم جدید "فریم‌های نیمه‌ارائه‌شده" را در جدول زمانی فریم‌ها نمایش می‌دهد.

پیش از این، جدول زمانی Frames هر فریمی را که کار نخ اصلی با تأخیر انجام می‌داد، به عنوان "فریم‌های حذف‌شده" نمایش می‌داد. با این حال، مواردی وجود دارد که برخی از فریم‌ها ممکن است هنوز به‌روزرسانی‌های بصری (مثلاً پیمایش) را که توسط نخ کامپوزیتور هدایت می‌شود، تولید کنند.

این امر منجر به سردرگمی کاربر می‌شود زیرا اسکرین‌شات‌های این «فریم‌های حذف‌شده» هنوز به‌روزرسانی‌های بصری را منعکس می‌کنند.

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

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

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

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

• رشته‌های عامل کاربر آیفون برای دستگاه‌های شبیه‌سازی‌شده به‌روزرسانی شد. تمام نسخه‌های آیفون بعد از ۵ دارای رشته عامل کاربر با سیستم عامل آیفون ۱۳_۲_۳ هستند. ( ۱۲۸۹۵۵۳ )
• اکنون می‌توانید قطعه کد را مستقیماً به عنوان یک فایل جاوا اسکریپت ذخیره کنید. قبلاً، باید پسوند فایل .js را به صورت دستی اضافه می‌کردید. ( 1137218 )
• پنل منابع اکنون نام متغیرهای محدوده را هنگام اشکال‌زدایی با نقشه منبع به درستی نمایش می‌دهد. پیش از این، پنل منابع، نام متغیرهای محدوده را با وجود ارائه نقشه منبع، کوچک‌سازی شده نمایش می‌داد. ( 1294682 )
• پنل منابع (Sources ) اکنون موقعیت اسکرول را در هنگام بارگذاری صفحه به درستی بازیابی می‌کند. پیش از این، این موقعیت به درستی بازیابی نمی‌شد و باعث ایجاد مشکل در اشکال‌زدایی می‌شد. ( 1294422 )

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

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

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

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

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

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

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