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

Jecelyn Yeen

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

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

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

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

قبلاً فقط از طریق دکمه ۳ نقطه می‌توانستید به منوی پله دسترسی داشته باشید. اکنون می‌توانید برای دسترسی به منو، در هر جایی از پله کلیک راست کنید.

مشکلات کرومیوم: ۱۳۲۲۳۱۳ ، ۱۳۵۱۶۴۹ ، ۱۳۲۲۳۱۳ ، ۱۳۳۹۷۶۷

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

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

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

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

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

مشکلات کرومیوم: ۱۳۶۴۶۰۱ ، ۱۳۶۴۶۰۱

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

شما می‌توانید با استفاده از موارد زیر بین تب‌های پنل منابع جابجا شوید: در مک‌او‌اس، Function + Command + Arrow up and down در ویندوز و لینوکس، Control + Page up or down

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

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

شماره کروم: ۱۱۶۷۹۶۵ ، ۱۱۷۲۵۳۵ ، ۱۳۷۱۵۸۵. ۱۳۶۹۵۰۳

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

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

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

مشکلات کرومیوم: ۱۲۶۷۶۹۰ ، ۱۲۴۶۸۶۳، ۱۳۷۱۳۲۲ ، ۱۳۱۱۶۳۷

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

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

• پشتیبانی از نکات بیشتر برای ویژگی‌های غیرفعال CSS در پنل Styles - ویژگی‌های ارتفاع و عرض درون‌خطی، flex و grid. ( 1373597 ، 1178508 ، 1178508 ، 1178508 )
• هایلایت کردن سینتکس برطرف شد. از زمان به‌روزرسانی اخیر ویرایشگر کد در DevTools، این قابلیت به درستی کار نمی‌کرد. ( 1290182 )
• رویدادهای تغییر ورودی را پس از رویداد blur در ضبط‌کننده ، به درستی ضبط کنید. ( ۱۳۷۸۴۸۸ )
• برای تجربه بهتر اشکال‌زدایی در ضبط‌کننده، اسکریپت بازپخش Puppeteer را هنگام خروجی به‌روزرسانی کنید. ( 1351649 )
• پشتیبانی از ضبط و پخش مجدد در ضبط‌کننده برای اشکال‌زدایی از راه دور. ( 1185727 )
• مشکل تجزیه نام متغیرهای خاص CSS در var() برطرف شد. پیش از این، DevTools از تجزیه متغیرهایی با کاراکترهای escape شده مانند var(--fo\ o) پشتیبانی نمی‌کرد. ( 1378992 )

[آزمایشی] بهبود تجربه کاربری در مدیریت نقاط توقف

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

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

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

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

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

مشکلات کرومیوم: ۱۳۴۶۲۳۱ ، ۱۳۲۴۹۰۴

[آزمایشی] چاپ خودکار و درجا

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

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

مشکل کرومیوم: ۱۱۶۴۱۸۴

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

قابلیت‌های جدید در DevTools

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