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

جسلین یین

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

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

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

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

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

پنل ضبط‌کننده اکنون از 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 است، استفاده کنید.

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

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