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

جسلین ین

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

گزینه های کپی جدید در پانل ضبط.

یک جریان کاربر موجود را در Recorder باز کنید. قبلاً، وقتی جریان کاربر را دوباره پخش می‌کردید، DevTools همیشه با پیمایش یا بارگذاری مجدد صفحه، پخش مجدد را شروع می‌کرد.

با آخرین به روز رسانی ها، Recorder مرحله ناوبری را به طور جداگانه نشان می دهد. می توانید برای اجرای مجدد در صفحه، کلیک راست کرده و آن را حذف کنید!

جدا از آن، می‌توانید روی یک مرحله کلیک راست کرده و به جای اینکه کل جریان کاربر را صادر کنید، آن را در کلیپ بورد در پانل ضبط * کپی کنید. با افزونه ها هم کار می کند. به عنوان مثال، سعی کنید یک مرحله را به عنوان اسکریپت تست Nightwatch کپی کنید. با استفاده از این ویژگی، می توانید هر اسکریپت موجود را به راحتی به روز کنید.

قبلاً فقط از طریق دکمه 3 نقطه می توانستید به منوی مرحله دسترسی داشته باشید. اکنون می توانید در هر نقطه از مرحله کلیک راست کنید تا به منو دسترسی پیدا کنید.

مسائل Chromium: 1322313 , 1351649 , 1322313 , 1339767

نمایش نام عملکردهای واقعی در ضبط های عملکرد

اگر نقشه منبع وجود داشته باشد، پانل عملکرد اکنون نام عملکردها و منابع آنها را در ردیابی نشان می دهد.

نمایش قبل و بعد از مقایسه نام عملکردها در پانل عملکرد.

در این مثال، یک فایل منبع در حین تولید کوچک می شود. برای مثال، تابع sayHi به صورت n و تابع takeABreak به صورت o در این نسخه نمایشی کوچک می‌شود.

نمایش فایل ها قبل و بعد از minfication.

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

با آخرین تغییرات، DevTools اکنون نقشه منبع را می خواند و نام عملکردها و مکان منبع واقعی را نشان می دهد.

مسائل Chromium: 1364601 ، 1364601

میانبرهای صفحه کلید جدید در پنل Console & Sources

با استفاده از: در MacOS، Function + Command + Arrow بالا و پایین در Windows و Linux، Control + Page up یا down، می‌توانید بین برگه‌ها در پانل Sources جابجا شوید.

علاوه بر این، می‌توانید پیشنهادات تکمیل خودکار را با Ctrl + N و Ctrl + P در MacOS، مشابه Emacs ، پیمایش کنید. برای مثال می توانید window. در Console و از این میانبرها برای پیمایش استفاده کنید.

علاوه بر این، DevTools اکنون Arrow Right را برای تکمیل خودکار فقط در انتهای خط می پذیرد. به عنوان مثال، یک گفتگوی تکمیل خودکار زمانی را نشان می دهد که شما در حال ویرایش چیزی در وسط کد هستید. هنگامی که کلید فلش راست را فشار می دهید، به احتمال زیاد، می خواهید مکان نما را به جای تکمیل خودکار در موقعیت بعدی قرار دهید. این تغییر UX بهتر با گردش کار نویسندگی شما هماهنگ می شود.

شماره Chromium: 1167965 , 1172535 , 1371585 . 1369503

اشکال زدایی جاوا اسکریپت بهبود یافته است

اینها برخی از بهبودهای اشکال زدایی جاوا اسکریپت در این نسخه هستند:

  • new.target یک متا خاصیت است که به شما امکان می دهد تشخیص دهید که آیا یک تابع یا سازنده با استفاده از عملگر جدید فراخوانی شده است یا خیر. اکنون می توانید new.target در کنسول وارد کنید تا مقدار آن را در حین اشکال زدایی بررسی کنید. قبلاً هنگام وارد کردن new.target خطاها را برمی‌گرداند. نمایش قبل و بعد از مقایسه اشکال زدایی ارزیابی new.target.
  • یک شی WeakRef به شما امکان می دهد یک مرجع ضعیف به یک شی دیگر نگه دارید، بدون اینکه مانع از جمع آوری زباله آن شی شوید. DevTools اکنون یک پیش‌نمایش درون خطی برای مقدار نشان می‌دهد و مرجع ضعیف را مستقیماً در کنسول هنگام اشکال‌زدایی ارزیابی می‌کند. قبلاً برای حل آن باید صریحاً "deref" را روی آنها صدا می زدید. نمایش قبل و بعد از مقایسه ارزیابی WeakRef در حین اشکال زدایی.
  • پیش نمایش درون خطی برای متغیر سایه دار ثابت شد. قبلاً مقدار نمایش نادرست بود. نمایش پیش نمایش درون خطی قبل و بعد از مقایسه برای متغیر سایه دار.
  • نام متغیرها را در Generator و توابع async را در قسمت Scope در پانل Sources حذف کنید.

مسائل Chromium: 1267690 , 1246863 1371322 , 1311637

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

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

  • از نکات بیشتر برای ویژگی‌های غیرفعال CSS در صفحه Styles - ارتفاع و عرض درونی، ویژگی‌های انعطاف‌پذیر و شبکه‌ای پشتیبانی کنید. ( 1373597 , 1178508 , 1178508 , 1178508 )
  • برجسته سازی نحو ثابت. از زمان ارتقاء ویرایشگر کد اخیر در DevTools، به درستی کار نمی کرد. ( 1290182 )
  • رویدادهای تغییر ورودی را به درستی پس از رویداد تاری در ضبط ضبط کنید. ( 1378488 )
  • برای تجربه بهتر اشکال زدایی در ضبط، اسکریپت پخش مجدد Puppeteer را در صادرات به روز کنید. ( 1351649 )
  • پشتیبانی از ضبط و پخش مجدد در Recorder برای اشکال زدایی از راه دور. ( 1185727 )
  • تجزیه نام متغیرهای ویژه CSS در var() ثابت شد. قبلاً، DevTools از متغیرهای تجزیه با کاراکترهای فرار مانند var(--fo\ o) پشتیبانی نمی کرد. , ( 1378992 )

[تجربی] UX پیشرفته در مدیریت نقاط شکست

پنجره نقاط شکست فعلی کمک بصری کمی در نظارت بر تمام نقاط شکست ارائه می دهد. علاوه بر این، اقدامات پر استفاده در پشت منوی زمینه پنهان می شوند.

این طراحی آزمایشی UX ساختار را به بخش Breakpoints می آورد و به توسعه دهندگان اجازه می دهد تا به ویژگی های رایج مانند ویرایش و حذف نقاط شکست دسترسی سریع داشته باشند.

اینها برخی از نکات برجسته هستند:

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

تغییرات کامل در RFC ما (بسته) را بخوانید و بازخورد خود را اینجا بگذارید.

نمایش پنجره Breakpoint قبل و بعد از طراحی مجدد.

مسائل Chromium: 1346231 ، 1324904

[تجربی] چاپ زیبای خودکار در محل

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

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

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

شماره Chromium: 1164184

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

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

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

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

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

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