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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

شماره کروم: ۱۴۱۴۲۸۹ .

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

اکنون با استفاده از Step over در کد اصلی خود، از مکث در فرآیند disassembly (فایل .wasm ) جلوگیری می‌شود. قبلاً، در آنجا مکث می‌کرد.

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

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

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

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

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

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

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

شماره کروم: ۱۳۹۹۴۱۴ .

اظهارات در ضبط کننده

پنل ضبط‌کننده اکنون به شما امکان می‌دهد تا درست هنگام ضبط، با در دسترس بودن تمام داده‌های زمان اجرا، اظهارات (assertions) را اضافه کنید.

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

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

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

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

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

شماره کروم: ۱۴۲۳۶۲۴

فانوس دریایی ۱۰.۱.۱

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

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

مشکل کروم: ۷۷۲۵۵۸

بهبود عملکرد

performance.mark() زمان‌بندی را با قرار دادن ماوس روی ماوس در مسیر Performance > Timings نشان می‌دهد.

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

شماره کروم: ۱۴۲۶۷۶۲

دستور profile() عملکرد > اصلی را پر می‌کند.

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

شماره کروم: ۱۴۲۹۱۹۱ .

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

تعاملات کاربر که بیش از ۲۰۰ میلی‌ثانیه طول بکشند، در تب Performance > Summary با هشدار Interaction to Next Paint (INP) مواجه می‌شوند.

علاوه بر این، شناسه‌ی تعامل از tooltip به Summary منتقل شده است.

مشکلات کروم: ۱۴۳۲۵۱۲ ، ۱۴۳۲۵۰۹ .

مسیر Web Vitals تغییر کرد

پنل اجرا آهنگ‌های زیر را حذف کرده است:

• مسیر Web Vitals . در عوض، زمان‌بندی‌های مربوطه را در مسیر Timings با نگه داشتن ماوس روی آن مشاهده کنید.
• زیرشاخه وظایف طولانی . شما می‌توانید چنین وظایفی را در مسیر اصلی که با رنگ قرمز و یک مثلث قرمز مشخص شده است، پیدا کنید.

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

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

درباره Web Vitals بیشتر بدانید.

منسوخ شدن JavaScript Profiler: مرحله سوم

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

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

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

شماره کروم: ۱۴۲۸۰۲۶ .

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

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

• انتخابگر رنگ اکنون مقادیر HWB را که هنگام برش خارج از محدوده رنگ هستند، تشخیص می‌دهد ( 1429271 ).
• پنل منابع :
  • هایلایت کردن سینتکس JSON برای نقشه‌های منبع فعال شد ( ۱۳۸۵۳۷۴ ).
  • وقتی نقشه‌های منبع را به صورت دستی غیرفعال می‌کردید ( 1423718 )، نمایش پیام‌های «نقشه منبع شناسایی شد» متوقف شد.
• کنسول اکنون به شما امکان می‌دهد عبارات ناقص جاوا اسکریپت را با Ctrl + Enter ارزیابی کنید و خطاهای نحوی ( ۱۳۱۴۷۰۰ ) را نمایش می‌دهد.
• پنجره ویرایش Breakpoint اکنون یک دکمه بستن دارد. قبلاً، باید Enter را فشار می‌دادید یا فوکوس پنجره را از حالت قفل خارج می‌کردید ( 1412980 ).

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

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

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

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

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

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

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