این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Sofia Emelianova

Jecelyn Yeen

پشتیبانی از اشکال زدایی 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 .

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

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

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

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

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

تماس با تیم Chrome DevTools

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

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

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

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

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

کروم 118

کروم 117

کروم 116

کروم 115

کروم 114

کروم 113

کروم 112

کروم 111

کروم 110

کروم 109

کروم 108

کروم 107

کروم 106

کروم 105

کروم 104

کروم 103

کروم 102

کروم 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

کروم 90

کروم 89

کروم 88

کروم 87

کروم 86

کروم 85

کروم 84

کروم 83

کروم 82

Chrome 82 لغو شد .

کروم 81

کروم 80

کروم 79

کروم 78

کروم 77

کروم 76

کروم 75

کروم 74

کروم 73

کروم 72

معیارهای عملکرد را در پانل عملکرد تجسم کنید
گره های متنی را در درخت DOM برجسته کنید
مسیر JS را در یک گره DOM کپی کنید
به‌روزرسانی‌های پنل حسابرسی ، از جمله ممیزی جدید که کتابخانه‌های JS و کلمات کلیدی جدید را برای دسترسی به پنل حسابرسی از منوی فرمان شناسایی می‌کند.
نکته امتیاز: از حالت دستگاه برای بررسی درخواست های رسانه استفاده کنید (ویدئو)