موارد جدید در DevTools (Chrome 114)

سوفیا املیانوا
Sofia Emelianova
GitHub
جسلین ین

پشتیبانی از اشکال زدایی WebAssembly

DevTools را فعال می کند تنظیمات. تنظیمات > آزمایش‌ها > چک باکس. WebAssembly Debugging: پشتیبانی از DWARF را به طور پیش فرض فعال کنید . برای اطلاعات بیشتر، اشکال زدایی WebAssembly با ابزارهای مدرن را ببینید.

این آزمایش به شما امکان می‌دهد تا اجرا را متوقف کنید و کدهای C و C++ را در برنامه‌های Wasm با تمام اطلاعات اشکال‌زدایی در دسترس شما، اشکال‌زدایی کنید:

  • کد منبع اصلی شما، با استفاده از اطلاعات اشکال زدایی DWARF نقشه برداری شده است.
  • نام توابع قابل درک در پشته تماس.
  • پشتیبانی از نقاط شکست و موارد دیگر.

یک برنامه Wasm در Debugger متوقف شد.

برای آزمایش اشکال‌زدایی Wasm، پسوند C/C++ DevTools Support (DWARF) را نصب کنید و از کد موجود در نسخه نمایشی Mandelbrot عبور کنید.

شماره Chromium: 1414289 .

بهبود رفتار قدم زدن در برنامه‌های Wasm

قدم بردار اکنون وارد کد اصلی خود شوید و از مکث در جداسازی (فایل .wasm ) جلوگیری کنید. قبلاً در آنجا مکث می کرد.

با این حال، گام به گام زمانی به پایان می رسد که خارج از تابعی که در آن شروع شده است فرود بیاید، برای مثال، پس از بازگشت از تابع.

این رفتار به طور پیش فرض در فعال است تنظیمات. تنظیمات > تنظیمات > منابع .

تنظیمات جدید در Preferences و سپس Sources یافت شد.

شماره Chromium: 1418938 .

با استفاده از پانل عناصر و تب Issues، تکمیل خودکار را اشکال زدایی کنید

تکمیل خودکار Chrome فرم‌ها را به‌طور خودکار با اطلاعات ذخیره‌شده، مانند آدرس‌ها یا اطلاعات پرداخت، پر می‌کند. برای اینکه بتوانید به راحتی مشکلات مربوط به تکمیل خودکار را اشکال زدایی کنید، اکنون پانل Elements می تواند آنها را با خط های فرفری قرمز برجسته کند.

برای بررسی این ویژگی، آن را فعال کنید تنظیمات. تنظیمات > آزمایش‌ها > چک باکس. یک گره یا ویژگی ناقض را در درخت DOM پانل عناصر برجسته می کند و این صفحه نمایشی را بررسی می کند.

مشکلات تکمیل خودکار در پانل عناصر برجسته شده و توسط پانل مشکلات گزارش شده است.

ماوس را روی یک مشکل برجسته در درخت DOM نگه دارید و روی مشاهده مسئله کلیک کنید تا برگه Issues باز شود که همه مشکلات شناسایی شده را فهرست می‌کند و سرنخ‌هایی درباره اشتباه پیش آمده ارائه می‌دهد.

موضوع Chromium: 1399414 .

ادعاها در ضبط

اکنون پنل Recorder به شما امکان می دهد تا در حین ضبط، اظهارات خود را با تمام داده های زمان اجرا در دسترس خود اضافه کنید.

برای افزودن ادعا، ضبط جدیدی را شروع کنید، با صفحه خود تعامل داشته باشید و روی افزودن ادعا کلیک کنید. Recorder مرحله ای را با نوع waitForElement وارد می کند که می توانید در همان لحظه آن را سفارشی کنید. برای مشاهده اظهارات در عمل در دمو سبد قهوه، ویدیو را تماشا کنید.

این ویدیو به شما نشان می دهد که چگونه می توانید ادعا کنید:

  • ویژگی های HTML، به عنوان مثال، class یک عنصر.
  • خواص جاوا اسکریپت در JSON، به عنوان مثال، .innerText .

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

علاوه بر این، Recorder اکنون فرمت اسکریپت دلخواه شما را در نمای کد کنار هم و منوی مرحله کلیک راست به خاطر می آورد.

شماره Chromium: 1423624 .

فانوس دریایی 10.1.1

پنل Lighthouse اکنون Lighthouse 10.1.1 را اجرا می کند، با یک تغییر قابل توجه در نسخه 10.1.0 . همه ممیزی هایی که با URL ها سر و کار دارند اکنون بر اساس نهاد و آمارهای عددی انبوهی مانند اندازه یا مدت زمان گروه بندی می شوند. اشخاص ثالث محبوب نیز با دسته بندی خود برچسب گذاری می شوند، بنابراین شناسایی هدف آنها در صفحه آسان تر است.

حسابرسی گروه بندی شده بر اساس نهاد

برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

شماره Chromium: 772558 .

بهبود عملکرد

performance.mark() زمان بندی را در حالت شناور در Performance > Timings نشان می دهد

متد performance.mark() اکنون زمان خود را هنگامی که ماوس را روی علامت مربوطه در Performance > Timings نگه دارید نشان می دهد. زمان در اینجا یک مهر زمانی نسبت به رویداد ناوبری قبلی است.

پاپ‌آپ با زمان‌بندی روشن در بخش زمان‌بندی شناور شوید.

شماره Chromium: 1426762 .

دستور profile() Performance > Main را پر می کند

دستورات profile() و profileEnd() در کنسول اکنون نمایه سازی CPU را در رشته اصلی پنل Performance شروع و متوقف می کنند.

دستور console() یک نمایه در پنل Performance ایجاد می کند.

شماره Chromium: 1429191 .

هشدار برای تعامل کند کاربر

تعاملات کاربر بیش از 200 میلی ثانیه در برگه Performance > Summary اخطار Interaction to Next Paint (INP) دریافت می کند.

هشدار INP

علاوه بر این، شناسه تعامل از راهنمای ابزار به خلاصه منتقل شده است.

مسائل Chromium: 1432512 ، 1432509 .

مسیر Web Vitals منتقل شد

پانل عملکرد تراک های زیر را حذف کرده است:

  • مسیر Web Vitals . در عوض، زمان‌بندی مربوطه را در مسیر زمان‌بندی در شناور ببینید.
  • زیرنویس The Long Tasks . در حال حاضر می توانید چنین کارهایی را در مسیر اصلی با رنگ قرمز و با مثلث قرمز پیدا کنید.

هر دو مسیر Web Vitals و Long Tasks حاوی اطلاعات تکراری در جاهای دیگر بودند. آنها همچنین غیرتعاملی در مقایسه با گزینه های کاملاً برجسته آنها بودند که هنگام کلیک کردن اطلاعات دقیق تری ارائه می دهند.

قبل و بعد از انتقال Web Vitals به مسیر Timeings.

علاوه بر این، مسیر Experiences به Layout Shifts تغییر نام داد تا کاربرد آن را با دقت بیشتری منعکس کند.

درباره Web Vitals بیشتر بیاموزید.

حذف پروفایل جاوا اسکریپت: فاز سوم

در اوایل Chrome 58 ، تیم DevTools قصد داشت در نهایت JavaScript Profiler را منسوخ کند و توسعه دهندگان Node.js و Deno از پنل Performance برای پروفایل عملکرد CPU جاوا اسکریپت استفاده کنند.

DevTools نسخه 114 مرحله سوم از چهار فاز منسوخ شدن JavaScript Profiler را شروع می کند. در طی این مرحله، پانل JavaScript Profiler از DevTools حذف می‌شود، اما همچنان می‌توانید به‌طور موقت آن را از طریق فعال کنید. تنظیمات. Settings > Experiments و آن را از قسمت باز کنید منوی سه نقطه منوی سه نقطه

چک باکس نمایه‌ساز جاوا اسکریپت در تنظیمات و سپس آزمایش‌ها.

برای مشخصات عملکرد CPU، از پنل Performance استفاده کنید.

شماره Chromium: 1428026 .

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

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

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

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

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

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

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

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