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

جسلین ین

پخش گام به گام در Recorder

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

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

با استفاده از این ویژگی، می توانید به راحتی جریان کاربر خود را به طور کامل تجسم و اشکال زدایی کنید.

برای اطلاعات بیشتر به مرجع ویژگی های ضبط کننده مراجعه کنید.

پخش گام به گام در Recorder

شماره Chromium: 1257499

پشتیبانی از ماوس روی رویداد در پانل ضبط

Recorder اکنون از افزودن یک مرحله ماوس روی (هور) به صورت دستی در یک ضبط پشتیبانی می کند.

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

اگر اکنون جریان کاربر را مجدداً پخش کنید، با شکست مواجه می شود زیرا ضبط کننده ماوس را روی رویدادها به طور خودکار در حین ضبط ضبط نمی کند. برای حل این مشکل، قبل از کلیک بر روی آیتم منو، یک مرحله به صورت دستی اضافه کنید تا روی انتخابگر قرار بگیرید.

پشتیبانی از ماوس روی رویداد در Recorder

شماره Chromium: 1257499

بزرگترین رنگ محتوایی (LCP) در پانل بینش عملکرد

LCP یک معیار مهم و کاربر محور برای اندازه گیری سرعت بار درک شده است. اکنون می توانید مسیرهای حیاتی و علل ریشه ای بزرگترین رنگ محتوایی (LCP) را بیابید.

در یک ضبط عملکرد ، روی نشان LCP در Timeline کلیک کنید. در بخش جزئیات ، می توانید امتیاز LCP را مشاهده کنید، یاد بگیرید که چگونه منابعی را که سرعت LCP را کاهش می دهند، تعمیر کنید و مسیر حیاتی برای منبع LCP را ببینید.

برای یادگیری نحوه دستیابی به بینش عملی و بهبود عملکرد وب سایت خود با پانل، به Performance Insights مراجعه کنید.

LCP در پانل بینش عملکرد

شماره Chromium: 1326481

فلاش های متن (FOIT، FOUT) را به عنوان دلایل ریشه ای بالقوه برای تغییر چیدمان شناسایی کنید

پانل بینش عملکرد اکنون فلاش متن نامرئی (FOIT) و فلش متن بدون استایل (FOUT) را به عنوان دلایل ریشه‌ای احتمالی برای تغییر طرح‌بندی تشخیص می‌دهد.

برای مشاهده دلایل ریشه‌ای بالقوه تغییر طرح، روی تصویر صفحه در مسیر تغییر طرح‌بندی کلیک کنید.

برای یادگیری تکنیک جلوگیری از جابجایی طرح ، به بارگذاری و رندر WebFont بهینه سازی مراجعه کنید.

FOUT در پانل بینش عملکرد

مسائل Chromium: 1334628 ، 1328873

کنترل کننده های پروتکل در پنجره Manifest

اکنون می توانید از DevTools برای آزمایش ثبت نام کنترل کننده پروتکل URL برای برنامه های وب پیشرو (PWA) استفاده کنید.

ثبت نام کنترل کننده پروتکل URL به PWA های نصب شده اجازه می دهد تا پیوندهایی را که از پروتکل خاصی استفاده می کنند (مانند magnet ، web+example ) را برای تجربه یکپارچه تر مدیریت کنند.

از طریق بخش Application > Manifest به بخش Protocol Handlers بروید. در اینجا می توانید تمام پروتکل های موجود را مشاهده و آزمایش کنید.

برای مثال، این دمو PWA را نصب کنید. در بخش Protocol Handlers ، "americano" را تایپ کنید و روی Test protocol کلیک کنید تا صفحه قهوه در PWA باز شود.

کنترل کننده های پروتکل در پنجره Manifest

مسائل Chromium: 1300613

نشان لایه بالایی در پانل عناصر

برای درک مفهوم لایه بالایی و تجسم نحوه تغییر محتوای لایه بالایی از نشان لایه بالایی استفاده کنید.

عنصر <dialog> اخیراً در بین مرورگرها پایدار شده است. وقتی یک دیالوگ را باز می کنید، در یک لایه بالا قرار می گیرد. محتوای سطح بالا در بالای همه مطالب دیگر ارائه می شود.

در این دمو ، روی Open dialog کلیک کنید.

برای کمک به تجسم عناصر لایه بالایی، DevTools یک ظرف لایه بالایی ( #top-layer ) به درخت DOM اضافه می کند. بعد از بستن تگ </html> باقی می ماند.

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

در کنار عنصر درخت لایه بالایی (به عنوان مثال، عنصر گفتگو)، روی نشان لایه بالایی کلیک کنید تا به ظرف لایه بالایی بروید.

نشان لایه بالایی در پانل عناصر

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

اطلاعات اشکال زدایی Wasm را در زمان اجرا پیوست کنید

اکنون می توانید اطلاعات اشکال زدایی DWARF را برای wasm در طول زمان اجرا پیوست کنید. قبلاً پانل Sources فقط از پیوست کردن نقشه های منبع به فایل های جاوا اسکریپت و Wasm پشتیبانی می کرد.

یک فایل Wasm را در پنل Sources باز کنید. در ویرایشگر کلیک راست کرده و Add DWARF debugging info… را انتخاب کنید تا اطلاعات اشکال زدایی را در صورت درخواست پیوست کنید.

ALT_TEXT_HERE

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

پشتیبانی از ویرایش زنده در حین اشکال زدایی

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

در Chrome 104، DevTools قابلیت راه اندازی مجدد قاب را برمی گرداند. با این حال، نمی‌توانید تابعی را که در حال حاضر در آن موقتاً متوقف شده‌اید ویرایش کنید. معمولاً توسعه‌دهندگان یک تابع را شکسته و سپس آن تابع را در حالت توقف ویرایش می‌کنند.

با این به روز رسانی، دیباگر به طور خودکار عملکرد را با محدودیت های زیر راه اندازی مجدد می کند:

  • فقط بالاترین عملکرد را می توان در حالت توقف ویرایش کرد
  • هیچ فراخوانی بازگشتی روی همان تابع در پایین‌تر پشته وجود ندارد

ویرایش زنده در حین اشکال زدایی

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

مشاهده و ویرایش @scope در قوانین موجود در صفحه Styles

اکنون می توانید CSS @scope at-rules را در صفحه Styles مشاهده و ویرایش کنید.

@scope در قوانین بخشی از مشخصات CSS Cascading و Inheritance Level 6 است. این قوانین به توسعه دهندگان اجازه می دهد تا قوانین سبک را در CSS محدوده بندی کنند.

این صفحه نمایشی را باز کنید و لینک موجود در عنصر <div class=”dark-theme”> را بررسی کنید. در قسمت Styles ، @scope at-rules را مشاهده کنید. روی بیانیه قانون کلیک کنید تا آن را ویرایش کنید.

@scope در قوانین در پنجره Styles

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

بهبود نقشه منبع

در اینجا چند اصلاح در نقشه های منبع برای بهبود تجربه کلی اشکال زدایی وجود دارد:

  • DevTools اکنون به درستی شناسه های نقشه منبع را با علائم نگارشی حل می کند. برخی از minifier های مدرن (به عنوان مثال، esbuild ) نقشه های منبعی را تولید می کنند که شناسه ها را با علائم نگارشی بعدی (کاما، پرانتز، نقطه ویرگول) ادغام می کنند.
  • DevTools اکنون نام نقشه منبع را برای سازنده ها با یک فراخوانی super حل می کند. ALT_TEXT_HERE
  • نمایه سازی URL نقشه منبع ثابت برای URL های متعارف تکراری. قبلاً به دلیل تکرار URL های متعارف، نقاط شکست در برخی فایل ها فعال نمی شد.

شماره Chromium: 1335338 ، 1333411

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

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

  • یک جفت مقدار کلید ذخیره سازی محلی را به درستی از جدول در پنجره Application > Local Storage حذف کنید. ( 1339280 )
  • اکنون هنگام مشاهده فایل‌های CSS در پانل منابع ، پیش‌نمایش‌های رنگی به درستی نمایش داده می‌شوند. قبلاً مواضع آنها نادرست بود. ( 1340062 )
  • موارد منعطف CSS و گرید را به طور مداوم در صفحه Layout نمایش دهید و همچنین آنها را به عنوان نشان در پانل Elements نمایش دهید. قبلاً موارد فلکس و گرید به طور تصادفی در هر دو مکان وجود نداشتند. ( 1340441 , 1273992 )
  • اگر DevTools اسکریپتی را پیدا کند که باعث شده قاب به عنوان آگهی برچسب‌گذاری شود، پیوند جدید Creator Ad Script برای فریم‌های تبلیغات در دسترس است. می توانید یک فریم را از طریق Application > Frames باز کنید. ( 1217041 )

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

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

تماس با تیم Chrome DevTools

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

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

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

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

کروم 126

کروم 125

کروم 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

کروم 71

Chrome 70

کروم 68

کروم 67

کروم 66

کروم 65

کروم 64

کروم 63

کروم 62

کروم 61

کروم 60

کروم 59

،

jecelyn ین

پخش گام به گام در ضبط

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

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

با استفاده از این ویژگی ، می توانید جریان کاربر خود را با سهولت به طور کامل تجسم و اشکال زدایی کنید.

برای اطلاعات بیشتر به مرجع ویژگی های ضبط مراجعه کنید.

پخش گام به گام در ضبط

شماره کروم: 1257499

از ماوس از رویداد در صفحه ضبط پشتیبانی کنید

ضبط کننده اکنون از اضافه کردن یک ماوس روی گام (شناور) به صورت دستی در یک ضبط پشتیبانی می کند.

این نسخه ی نمایشی منوی پاپ آپ را در شناور نشان می دهد. سعی کنید یک جریان کاربر را ضبط کنید و روی یک مورد منو کلیک کنید.

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

از ماوس از رویداد در ضبط پشتیبانی کنید

شماره کروم: 1257499

بزرگترین رنگ محتوا (LCP) در پانل عملکرد بینش

LCP یک معیار مهم و محور کاربر برای اندازه گیری سرعت بار درک شده است. اکنون می توانید مسیرهای بحرانی و دلایل اصلی بزرگترین رنگ محتوا (LCP) را پیدا کنید.

در یک ضبط عملکرد ، در جدول زمانی روی نشان LCP کلیک کنید. در صفحه جزئیات ، می توانید نمره LCP را مشاهده کنید ، بیاموزید که چگونه منابع را که LCP را کند می کنند ، برطرف کنید و مسیر بحرانی را برای منبع LCP مشاهده کنید.

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

LCP در پانل عملکرد بینش

شماره کروم: 1326481

فلاش های متن (foit ، fout) را به عنوان علل ریشه بالقوه برای تغییر طرح شناسایی کنید

پانل Performance Insights اکنون فلاش متن نامرئی (FOIT) و فلاش متن بدون حالت (FOUT) را به عنوان علل ریشه بالقوه برای تغییر طرح تشخیص می دهد.

برای مشاهده علل ریشه بالقوه تغییر چیدمان ، روی یک تصویر در مسیر Shows Shifts کلیک کنید.

برای یادگیری تکنیک برای جلوگیری از تغییر طرح ، به Optimize WebFont بارگذاری و ارائه مراجعه کنید.

در پانل عملکرد بینش

مشکلات کروم: 1334628 ، 1328873

دستگیرندگان پروتکل در صفحه مانیفست

اکنون می توانید از DevTools برای آزمایش ثبت نام کنترل کننده پروتکل URL برای برنامه های وب پیشرو (PWA) استفاده کنید.

ثبت نام Handler Protocol URL اجازه می دهد تا پیوندهای دسته PWA را نصب کنید که از یک پروتکل خاص (به عنوان مثال magnet ، web+example ) برای یک تجربه یکپارچه تر استفاده می کنند.

از طریق Application > Pane Manifect به بخش Protocol Handlers بروید. می توانید تمام پروتکل های موجود را در اینجا مشاهده و آزمایش کنید.

به عنوان مثال ، این نسخه آزمایشی PWA را نصب کنید. در بخش پروتکل Handlers ، "Americano" را تایپ کرده و برای باز کردن صفحه قهوه در PWA ، روی پروتکل تست کلیک کنید.

دستگیرندگان پروتکل در صفحه مانیفست

مشکلات کروم: 1300613

نشان لایه بالا در پانل عناصر

برای درک مفهوم لایه بالا و تجسم چگونگی تغییر محتوای لایه بالا ، از نشان لایه بالا استفاده کنید.

عنصر <dialog> اخیراً در مرورگرها پایدار شده است. وقتی یک گفتگو را باز می کنید ، آن را در یک لایه بالا قرار می دهد. محتوای سطح بالا در بالای تمام محتوای دیگر ارائه می شود.

در این نسخه ی نمایشی ، روی گفتگوی باز کلیک کنید.

برای کمک به تجسم عناصر لایه بالا ، DevTools یک ظرف لایه بالایی ( #top-layer ) را به درخت DOM اضافه می کند. پس از برچسب بسته شدن </html> ساکن است.

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

در کنار عنصر درخت لایه بالا (به عنوان مثال ، عنصر گفتگو) ، روی نشان لایه بالا کلیک کنید تا به ظرف لایه بالا پرش کنید.

نشان لایه بالا در پانل عناصر

شماره کروم: 1313690

ضمیمه اطلاعات اشکال زدایی WASM در زمان اجرا

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

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

alt_text_here

شماره کروم: 1341255

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

اکنون می توانید بدون شروع مجدد اشکال زدایی ، عملکرد برتر را در پشته ویرایش کنید.

در Chrome 104 ، Devtools ویژگی قاب راه اندازی مجدد را به ارمغان می آورد. با این حال ، شما نتوانستید عملکردی را که در حال حاضر در آن متوقف شده اید ویرایش کنید. این معمول است که توسعه دهندگان در یک عملکرد شکسته شوند و سپس در حالی که مکث می کنند ، آن عملکرد را ویرایش کنید.

با این بروزرسانی ، اشکال زدایی به طور خودکار عملکرد را با محدودیت های زیر مجدداً راه اندازی می کند:

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

ویرایش زنده هنگام اشکال زدایی

شماره کروم: 1334484

مشاهده و ویرایش Scope در قوانین در صفحه سبک

اکنون می توانید @scope را در صفحه سبک مشاهده و ویرایش کنید.

@scope at Rules بخشی از مشخصات CSS آبشار و وراثت سطح 6 است. این قوانین به توسعه دهندگان این امکان را می دهد تا قوانین سبک را در CSS محدود کنند.

این صفحه نسخه ی نمایشی را باز کرده و لینک را در عنصر <div class=”dark-theme”> بازرسی کنید. در صفحه سبک ها ، @scope مشاهده کنید. برای ویرایش آن روی اعلامیه قانون کلیک کنید.

Scope در قوانین در صفحه سبک

شماره کروم: 1337777

بهبود نقشه منبع

در اینجا چند اصلاح در نقشه های منبع برای بهبود تجربه کلی اشکال زدایی آورده شده است:

  • DevTools اکنون به درستی شناسه های نقشه منبع را با نگارشی برطرف می کند. برخی از مینی فایرهای مدرن (به عنوان مثال ، Esbuild ) نقشه های منبع تولید می کنند که شناسه ها را با نگارشی بعدی (کاما ، پرانتز ، نیمه رنگ) ادغام می کنند.
  • DevTools اکنون نام نقشه منبع را برای سازندگان با تماس super حل می کند. alt_text_here
  • نمایه سازی URL منبع منبع ثابت برای URL های متعارف تکراری. پیش از این ، نقاط شکست در برخی از پرونده ها به دلیل URL های متعارف تکراری فعال نشده بود.

شماره کروم: 1335338 ، 1333411

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

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

  • هنگام حذف ، یک جفت مقدار کلید ذخیره سازی محلی را از جدول در برنامه > صفحه ذخیره سازی محلی حذف کنید. ( 1339280 )
  • پیش نمایش های رنگی اکنون هنگام مشاهده پرونده های CSS در پانل منابع به درستی نمایش داده می شوند. پیش از این ، مواضع آنها نادرست بود. ( 1340062 )
  • به طور مداوم موارد CSS Flex و Grid را در صفحه طرح بندی نمایش دهید ، و همچنین آنها را به عنوان نشان در صفحه عناصر نمایش دهید. پیش از این ، موارد فلکس و شبکه به طور تصادفی در هر دو مکان از دست رفته بودند. ( 1340441 ، 1273992 )
  • اگر DevTools اسکریپتی را پیدا کند که باعث شده این قاب به عنوان یک آگهی شناخته شود ، یک لینک اسکریپت آگهی جدید برای قاب های تبلیغاتی در دسترس است. می توانید یک قاب را از طریق برنامه > فریم باز کنید. ( 1217041 )

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

استفاده از 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 پوشش داده شده است.

کروم 126

کروم 125

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

کروم 114

کروم 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

کروم 108

Chrome 107

کروم 106

کروم 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

Chrome 90

کروم 89

کروم 88

کروم 87

کروم 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled .

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59