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

Jecelyn Yeen

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

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

شماره کرومیوم: 1178508

شناسایی خودکار XPath و انتخابگرهای متن در پانل Recorder

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

مسائل Chromium: 1327206 ، 1327209

از عبارات جدا شده با کاما عبور کنید

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

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

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

function foo() {}

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

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

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

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

موضوع کرومیوم: 1370200

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

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

شماره کرومیوم: 1356517

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

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

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

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

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

تماس با تیم Chrome DevTools

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

• پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.

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

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

Jecelyn Yeen

نکات مربوط به خواص CSS غیرفعال

DevTools اکنون سبک های CSS را که معتبر هستند اما هیچ اثر قابل مشاهده ای ندارند ، مشخص می کند. در صفحه سبک ها ، Devtools خصوصیات غیرفعال را محو می کند. برای درک اینکه چرا این قانون هیچ تأثیر قابل توجهی ندارد ، روی نماد کنار آن حرکت کنید.

شماره کروم: 1178508

تنظیم خودکار XPath و انتخاب کننده متن در صفحه ضبط

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

مشکلات کروم: 1327206 ، 1327209

از طریق عبارات جدا از کاما قدم بردارید

اکنون می توانید در هنگام اشکال زدایی از عبارات جدا از کاما قدم بردارید. این باعث ایجاد اشکال زدایی کد کوچک شده می شود.

پیش از این ، Devtools فقط از قدم های جدا شده از همبستگی پشتیبانی می کرد.

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

function foo() {}

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

انتقال دهنده ها و مینی فرها ممکن است آنها را به عبارات جدا از کاما تبدیل کنند.

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

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

شماره کروم: 1370200

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

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

شماره کروم: 1356517

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

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

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

کانال های پیش نمایش را بارگیری کنید

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

در تماس با تیم Chrome Devtools

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

• یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهید > راهنما > گزارش مسائل DevTools در DevTools.
• توییت در chromedevtools .
• در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.

Jecelyn Yeen

Hints for inactive CSS properties

DevTools now identifies CSS styles that are valid but have no visible effect. In the Styles pane, DevTools fades out the inactive properties. Hover over the icon next to it to understand why the rule has no visible effect.

Chromium issue: 1178508

Auto-detect XPath and text selectors in the Recorder panel

The Recorder panel now supports XPath and text selectors. Start recording a user flow and the recorder automatically picks the XPath and shortest unique text of an element as selector if available.

Chromium issues: 1327206 , 1327209

Step through comma-separated expressions

You can now step through comma-separated expressions during debugging. This improves the debuggability of minified code.

Previously, DevTools only supported stepping through semicolon-separated expressions.

Given the code below,

function foo() {}

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

Transpilers and minifiers may turn them into comma-separated expressions.

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

This creates confusion during debugging because the stepping behavior is different between minified and authored code. It is even more confusing when using source maps to debug the minified code in terms of the original code, as the developer is then looking at semicolons (which were under the hood turned into commas by the toolchain) but the debugger doesn't stop on آنها

Chromium issue: 1370200

Improved Ignore list setting

Go to Settings > Ignore List . DevTools improves the design to help you configure the rules to ignore a single script or pattern of scripts .

Chromium issue: 1356517

Miscellaneous highlights

These are some noteworthy fixes in this release:

• Autocomplete CSS property name in the Styles pane on pressing space. ( 1343316 )
• Remove auto scroll in the Element panel's breadcrumb. ( 1369734 )

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.