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

Jecelyn Yeen

نکاتی برای ویژگی‌های غیرفعال CSS

DevTools اکنون سبک‌های CSS معتبری را شناسایی می‌کند که هیچ تأثیر قابل مشاهده‌ای ندارند. در پنل Styles ، DevTools ویژگی‌های غیرفعال را محو می‌کند. برای فهمیدن دلیل عدم تأثیر قابل مشاهده‌ی این قانون، نشانگر ماوس را روی آیکون کنار آن نگه دارید.

مشکل کرومیوم: ۱۱۷۸۵۰۸

تشخیص خودکار XPath و انتخابگرهای متن در پنل ضبط‌کننده

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

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

عبارات جدا شده با کاما را قدم به قدم بررسی کنید

اکنون می‌توانید در حین اشکال‌زدایی، عبارات جدا شده با کاما را بررسی کنید. این امر، اشکال‌زدایی کد کوچک‌شده را بهبود می‌بخشد.

پیش از این، DevTools فقط از پیمایش پله‌ای عباراتی که با نقطه ویرگول از هم جدا می‌شدند، پشتیبانی می‌کرد.

با توجه به کد زیر،

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

ترانسپایلرها و مینی‌فایرها ممکن است آنها را به عبارات جدا شده با کاما تبدیل کنند.

function bar(){return foo(),foo(),42}

این امر در هنگام اشکال‌زدایی باعث سردرگمی می‌شود زیرا رفتار گام به گام بین کد کوچک‌شده و کد تألیف‌شده متفاوت است. این موضوع هنگام استفاده از نقشه‌های منبع برای اشکال‌زدایی کد کوچک‌شده بر اساس کد اصلی، حتی گیج‌کننده‌تر نیز می‌شود، زیرا توسعه‌دهنده در آن زمان به نقطه‌ویرگول‌ها (که در پشت صحنه توسط زنجیره ابزار به کاما تبدیل شده‌اند) نگاه می‌کند، اما اشکال‌زدا روی آنها متوقف نمی‌شود.

شماره کروم: ۱۳۷۰۲۰۰

بهبود تنظیمات لیست نادیده گرفته شده

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

مشکل کرومیوم: ۱۳۵۶۵۱۷

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

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

• تکمیل خودکار نام ویژگی CSS در پنل Styles با فشردن کلید فاصله ( 1343316 )
• اسکرول خودکار را در breadcrumb پنل Element حذف کنید. ( 1369734 )

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

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

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

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

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

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

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