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

Jecelyn Yeen

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

پنل Performance اکنون وقتی روی دکمه‌ی Start profiling and reload page کلیک می‌کنید، هم اسکرین‌شات و هم ردپا را پاک می‌کند.

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

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

به‌روزرسانی‌های ضبط‌کننده

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

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

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

مشکل کرومیوم: ۱۳۸۵۴۸۹

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

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

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

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

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

شماره کروم: ۱۳۸۱۹۷۱

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

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

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

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

هایلایت بهتر سینتکس و پیش‌نمایش درون‌خطی برای Vue، SCSS و موارد دیگر

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

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

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

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

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

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

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

برای مثال، وقتی cons در کنسول تایپ می‌کنید، این اتفاق می‌افتد:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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