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

جسلین ین

کروم 100

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

طبق معمول، می توانید با کلیک بر روی تصویر، آخرین ویدیوی What's New in DevTools را تماشا کنید.

@supports را در قوانین موجود در صفحه Styles مشاهده و ویرایش کنید

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

SUPPORTS را در قوانین مشاهده و ویرایش کنید

مشکلات کروم: 1222574 ، 1222573

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

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

When determining an unique selector during recording, the Recorder panel now automatically prefers elements with the following attributes:

  • داده تست شده
  • آزمون داده
  • داده-قا
  • داده-سی
  • data-test-id
  • data-qa-id
  • تست داده

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

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

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

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

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

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

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

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

نتیجه انتخاب انتخاب کننده سفارشی

تغییر نام یک ضبط شده

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

تغییر نام یک ضبط شده

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

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

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

شماره Chromium: 1049947

فریم هایی که تا حدی در پانل عملکرد ارائه شده است

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

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

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

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

فریم هایی که تا حدی در پانل عملکرد ارائه شده است

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

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

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

  • رشته های عامل کاربر آیفون به روز شده برای دستگاه های شبیه سازی شده . تمام نسخه های آیفون بعد از 5 دارای یک رشته user-agent با سیستم عامل iPhone 13_2_3 هستند. ( 1289553 )
  • اکنون می توانید Snippet را به طور مستقیم به عنوان یک فایل JavaScript ذخیره کنید. قبلاً باید پسوند فایل .js را به صورت دستی اضافه می‌کردید. ( 1137218 )
  • پانل Sources اکنون نام متغیرهای محدوده را هنگام اشکال زدایی با نقشه منبع به درستی نمایش می دهد. پیش از این، پانل Sources نام متغیرهای محدوده کوچک شده را با وجود ارائه نقشه منبع نمایش می دهد. ( 1294682 )
  • پانل منابع اکنون موقعیت اسکرول را به درستی در بارگذاری صفحه بازیابی می کند. پیش از این، موقعیت به درستی بازیابی نشده بود و باعث ایجاد ناراحتی در اشکال‌زدایی می‌شد. ( 1294422 )

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

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

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

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

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

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