چیزهای جدید در 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 در قوانین

مشکلات Chromium: 1222574 ، 1222573

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

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

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

  • داده تست شده
  • آزمون داده
  • داده-قا
  • داده-سی
  • 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 )
  • اکنون می توانید اسنیپت را مستقیماً به عنوان یک فایل جاوا اسکریپت ذخیره کنید. قبلاً باید پسوند فایل .js را به صورت دستی اضافه می‌کردید. ( 1137218 )
  • پانل Sources اکنون نام متغیرهای محدوده را هنگام اشکال زدایی با نقشه منبع به درستی نمایش می دهد. پیش از این، پانل Sources نام متغیرهای محدوده کوچک شده را با وجود ارائه نقشه منبع نمایش می دهد. ( 1294682 )
  • پانل منابع اکنون موقعیت اسکرول را به درستی در بارگذاری صفحه بازیابی می کند. پیش از این، موقعیت به درستی بازیابی نشده بود و باعث ایجاد ناراحتی در اشکال‌زدایی می‌شد. ( 1294422 )

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

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

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

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

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

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

،

جسلین ین

کروم 100

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

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

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

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

مشاهده و ویرایش @supports در قوانین

مشکلات Chromium: 1222574 ، 1222573

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

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

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

  • داده تست شده
  • آزمون داده
  • داده-قا
  • داده-سی
  • 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 )
  • اکنون می توانید اسنیپت را مستقیماً به عنوان یک فایل جاوا اسکریپت ذخیره کنید. قبلاً باید پسوند فایل .js را به صورت دستی اضافه می‌کردید. ( 1137218 )
  • پانل Sources اکنون نام متغیرهای محدوده را هنگام اشکال زدایی با نقشه منبع به درستی نمایش می دهد. پیش از این، پانل Sources نام متغیرهای محدوده کوچک شده را با وجود ارائه نقشه منبع نمایش می دهد. ( 1294682 )
  • پانل منابع اکنون موقعیت اسکرول را به درستی در بارگذاری صفحه بازیابی می کند. پیش از این، موقعیت به درستی بازیابی نشده بود و باعث ایجاد ناراحتی در اشکال‌زدایی می‌شد. ( 1294422 )

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

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

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

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

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

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