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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

شماره Chromium: 1414289 .

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

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

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

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

شماره 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 شروع و متوقف می کنند.

شماره Chromium: 1429191 .

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

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

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

مسائل Chromium: 1432512 ، 1432509 .

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

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

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

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

علاوه بر این، مسیر 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 .

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

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

• انتخابگر رنگ اکنون مقادیر HWB را تشخیص می دهد که هنگام برش از محدوده خارج هستند ( 1429271 ).
• پنل منابع :
  • برجسته‌سازی نحو JSON برای نقشه‌های منبع فعال شد ( 1385374 ).
  • با غیرفعال کردن دستی نقشه های منبع ( 1423718 ) پیام های "نقشه منبع شناسایی شد" نشان داده نمی شود.
• کنسول اکنون به شما امکان می دهد عبارات جاوا اسکریپت ناقص را با Ctrl + Enter ارزیابی کنید و خطاهای نحوی را خروجی بگیرید ( 1314700 ).
• گفتگوی ویرایش نقطه انفصال اکنون دارای یک دکمه بستن است. قبلاً، باید Enter را فشار دهید یا کادر گفتگو را از حالت فوکوس خارج کنید ( 1412980 ).

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

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

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

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

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

شماره Chromium: 1414289 .

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

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

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

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

شماره 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 شروع و متوقف می کنند.

شماره Chromium: 1429191 .

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

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

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

مسائل Chromium: 1432512 ، 1432509 .

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

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

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

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

علاوه بر این، مسیر 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 .

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

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

• انتخابگر رنگ اکنون مقادیر HWB را تشخیص می دهد که هنگام برش از محدوده خارج هستند ( 1429271 ).
• پنل منابع :
  • برجسته‌سازی نحو JSON برای نقشه‌های منبع فعال شد ( 1385374 ).
  • با غیرفعال کردن دستی نقشه های منبع ( 1423718 ) پیام های "نقشه منبع شناسایی شد" نشان داده نمی شود.
• کنسول اکنون به شما امکان می دهد عبارات جاوا اسکریپت ناقص را با Ctrl + Enter ارزیابی کنید و خطاهای نحوی را خروجی بگیرید ( 1314700 ).
• گفتگوی ویرایش نقطه انفصال اکنون دارای یک دکمه بستن است. قبلاً، باید Enter را فشار دهید یا کادر گفتگو را از حالت فوکوس خارج کنید ( 1412980 ).

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

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

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

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

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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