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

جسلین ین

پاک کردن پنل عملکرد در بارگذاری مجدد

وقتی روی دکمه Start Profiles and Reload صفحه کلیک می کنید، پانل Performance هم اسکرین شات و هم ردیابی را پاک می کند.

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

پاک کردن پنل عملکرد در بارگذاری مجدد.

مسائل Chromium: 1101268 ، 1382044

به روز رسانی ضبط

کد جریان کاربر خود را در Recorder مشاهده و برجسته کنید

Recorder اکنون نمای کد تقسیم شده را ارائه می دهد و مشاهده کد جریان کاربر را آسان تر می کند. برای دسترسی به نمای کد، یک جریان کاربر را باز کنید و روی نمایش کد کلیک کنید.

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

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

موضوع Chromium: 1385489

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

می‌توانید ضبط‌هایی ایجاد کنید که فقط انواع انتخاب‌کننده‌هایی را که برای شما مهم هستند ضبط می‌کنند. با گزینه جدید برای سفارشی کردن انواع انتخابگر هنگام ایجاد یک ضبط جدید، می توانید انتخابگرهایی مانند XPath را اضافه یا حذف کنید و مطمئن شوید که فقط انتخابگرهایی را که می خواهید در جریان کاربر خود ثبت کنید.

گزینه جدید برای سفارشی کردن انواع انتخابگر.

موضوع Chromium: 1384431

جریان کاربر را هنگام ضبط ویرایش کنید

Recorder اکنون امکان ویرایش در حین ضبط را فراهم می کند و انعطاف پذیری برای ایجاد تغییرات در زمان واقعی را در اختیار شما قرار می دهد. برای انجام تنظیمات دیگر نیازی به پایان ضبط ندارید.

ویرایش در حین ضبط جریان کاربر.

شماره Chromium: 1381971

خودکار چاپ زیبا در محل

پانل منابع اکنون به طور خودکار فایل های منبع کوچک شده را در جای خود به زیبایی چاپ می کند. برای لغو آن می توانید روی دکمه چاپ زیبا { } کلیک کنید.

پیش از این، پنل منابع به طور پیش فرض محتوای کوچک شده را نشان می داد. برای قالب بندی محتوا، باید به صورت دستی روی دکمه زیبای چاپ کلیک کنید. علاوه بر این، محتوای زیبای چاپ شده در همان برگه نمایش داده نمی‌شود، بلکه در برگه دیگری ::formatted .

نمایش یک فایل کوچک‌سازی شده قبل و بعد از چاپ زیبای خودکار در محل.

مسائل Chromium: 1383453 , 1382752 , 1382397

برجسته سازی بهتر نحو و پیش نمایش درون خطی برای Vue، SCSS و موارد دیگر

پنل Sources برجسته‌سازی نحو را برای چندین فرمت فایل پرکاربرد تقویت کرد و به شما امکان می‌دهد کد را راحت‌تر بخوانید و ساختار آن را بشناسید، از جمله Vue، JSX، Dart، LESS، SCSS، SASS، و CSS درون خطی.

برجسته سازی نحو در Vue.

علاوه بر این، DevTools پیش نمایش درون خطی Vue، inline HTML و TSX را نیز بهبود بخشید. ماوس را روی یک متغیر نگه دارید تا مقدار آن را پیش نمایش کنید.

پیش نمایش درون خطی برای Vue.

جدا از آن، DevTools اکنون نقشه منبع یک شیوه نامه را در پنل Sources نشان می دهد. به عنوان مثال، هنگامی که یک فایل SCSS را باز می کنید، می توانید با کلیک بر روی پیوند منبع نقشه به فایل CSS مربوطه دسترسی پیدا کنید.

لینک نقشه منبع برای SASS.

مسائل Chromium: 1385374 , 1385632 , 1385281 , 1385269 , 1383892 , 1361862 , 1383451 , 1392106 , 1149734

تکمیل خودکار ارگونومیک و ثابت در کنسول

DevTools تجربه تکمیل خودکار را با اعمال تغییرات زیر بهبود می بخشد:

  • Tab همیشه برای تکمیل خودکار استفاده می شود.
  • رفتار Arrow right و Enter بر اساس زمینه متفاوت است.
  • تجربه تکمیل خودکار در ویرایشگرهای متن، در پانل‌های کنسول ، منابع و عناصر سازگار است.

برای مثال، در اینجا چیزی است که هنگام تایپ cons در کنسول اتفاق می افتد:

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

  • وقتی Enter فشار دهید، کنسول خط را اجرا می کند. قبلاً، به طور خودکار خط را با پیشنهاد برتر تکمیل می کرد. برای تکمیل خودکار، Tab یا Arrow Right را فشار دهید. خط را در Enter اجرا می کند.

  • هنگامی که شما در لیست پیشنهادات با استفاده از میانبرهای Arrow up و Arrow down پیمایش می کنید، کنسول گزینه انتخاب شده را برجسته می کند. نکات برجسته در حین پیمایش پیشنهادها.

  • برای تکمیل خودکار با گزینه انتخاب شده در حین پیمایش، از کلیدهای صفحه کلید Tab ، Enter یا Arrow Right استفاده کنید. تکمیل خودکار با گزینه انتخاب شده در حین پیمایش.

  • هنگام ویرایش در وسط کد، به عنوان مثال، زمانی که مکان نما بین n و s است، از Tab برای تکمیل خودکار، Enter برای اجرای خط و Arrow Right برای حرکت مکان نما به جلو استفاده کنید. ویرایش در وسط کد.

مسائل Chromium: 1399436 ، 1276960

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

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

  • یک مشکل رگرسیون در DevTools، که در آن در دستور debugger در اسکریپت های درون خطی متوقف نشد، حل شده است. ( 1385374 )
  • یک تنظیم کنسول جدید که به شما امکان می دهد پیام های console.trace() را به طور پیش فرض بزرگ یا کوچک کنید. تنظیمات را از طریق Settings > Preferences > Expand console.trace()پیام ها به طور پیش فرض تغییر دهید. ( 1139616 )
  • صفحه Snippets در پانل Sources از تکمیل خودکار پیشرفته، مشابه کنسول پشتیبانی می کند. ( 772949 ) تکمیل خودکار در Snippets.

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

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

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

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

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

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