چیزهای جدید در 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 استفاده کنید.

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.
چیزهای جدید در DevTools

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59