موارد جدید در DevTools، Chrome 131

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

اشکال زدایی CSS با Gemini

Chrome DevTools پانل کمکی آزمایشی هوش مصنوعی جدید را دریافت می کند که در آن می توانید با Gemini چت کنید و برای اشکال زدایی CSS خود راهنمایی دریافت کنید.

اکنون آن را امتحان کنید! در پنل Elements ، روی یک عنصر کلیک راست کرده و Ask AI را انتخاب کنید یا روی مورد مربوطه کلیک کنیددکمه کنار عنصر DevTools پنل جدید کمک هوش مصنوعی را باز می کند.

گزینه منوی "Ask AI" و دکمه مربوطه.

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

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

برای کسب اطلاعات بیشتر در مورد بهترین روش استفاده از پانل جدید، به 5 کار جالب با DevTools AI Assistance مراجعه کنید و کمک هوش مصنوعی برای استایل را بررسی کنید.

تیم DevTools مشتاقانه منتظر شنیدن نظرات شما هستند. می توانید آن را در crbug.com/364805393 بگذارید.

ویژگی های هوش مصنوعی را در یک تب تنظیمات اختصاصی کنترل کنید

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

تب جدید نوآوری های هوش مصنوعی.

برای اطلاعات بیشتر به تنظیمات > نوآوری‌های هوش مصنوعی مراجعه کنید.

بینش کنسول با یک کلیک فاصله دارد

DevTools دیگر نیازی به همگام‌سازی تنظیمات روشن برای ویژگی‌های هوش مصنوعی ندارد. بنابراین، بینش‌های کنسولی که قبلاً منتشر شده بود، همراه با کمک هوش مصنوعی برای استایل‌سازی ، با یک کلیک فاصله دارند.

اگر به Chrome وارد شده‌اید، این ویژگی‌ها را در تنظیمات > روشن کنیدنوآوری های هوش مصنوعی و شما خوب هستید.

بهبود پانل عملکرد

این نسخه تعدادی بهبود در پنل Performance به ارمغان می آورد.

حاشیه نویسی کنید و یافته های عملکرد را به اشتراک بگذارید

پانل Performance تب جدید Annotations را در یک نوار کناری قابل ارتقا در سمت چپ دریافت می‌کند که فرآیند ایجاد یادداشت‌ها را برای کاوش ردیابی و همکاری در هنگام اشتراک‌گذاری یافته‌های عملکرد ساده می‌کند.

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

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

اطلاعات بینش عملکرد را دقیقاً در پانل عملکرد دریافت کنید

اکنون می‌توانید بینش‌های عملی را در برگه Insights جدید در نوار کناری سمت چپ پانل عملکرد کشف کنید. اطلاعات آماری از گزارش Lighthouse و پانل اطلاعات آماری عملکرد که در شرف منسوخ شدن است، ادغام شده‌اند.

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

تیم DevTools منتظر بازخورد شما در مورد سودمندی اطلاعات بینش، راه‌های بهبود آن و تجربه شما در استفاده از آنها با ابزارهای دیگر، مانند PageSpeed ​​Insights و Lighthouse است. با خیال راحت نظرات خود را در crbug.com/371170842 بگذارید.

جابجایی های بیش از حد طرح را راحت تر ببینید

مسیر تغییر چیدمان ظاهر جدیدی پیدا می کند. تغییرات طرح‌بندی اکنون با الماس‌های بنفش (بیشتر قابل مشاهده) مشخص شده‌اند و بر اساس نزدیکی آنها در جدول زمانی در خوشه‌ها دسته‌بندی می‌شوند. هم شیفت‌ها و هم خوشه‌های آن‌ها یک جدول سازمان‌یافته با زمان‌بندی، امتیازات، عناصر و مقصران احتمالی در برگه Summary دریافت می‌کنند.

قبل و بعد از به‌روزرسانی مسیر «تغییر طرح‌بندی» و برگه «خلاصه» دوباره سازماندهی شده است.

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

گزارش قبل و بعد از افزودن «تغییرهای چیدمان» به نمای معیارهای زنده.

شماره Chromium: 369100729 .

انیمیشن های غیر ترکیبی را ببینید

آهنگ Animations اکنون اطلاعات مفیدی در مورد انیمیشن های غیر ترکیبی به شما نشان می دهد:

  • در صورت وجود، انیمیشن ها را با توجه به ویژگی CSS مربوطه نامگذاری می کند.
  • انیمیشن های غیر ترکیبی را با مثلث های قرمز در مسیر علامت گذاری می کند.
  • دلیل شکست ترکیب بندی را در تب Summary به شما نشان می دهد.

قبل و بعد از نام گذاری انیمیشن ها در آهنگ، علامت گذاری غیر ترکیبی و نشان دادن دلیل شکست.

برای اطلاعات بیشتر، به ویژگی‌های فقط Compositor و مدیریت تعداد لایه‌ها نگاه کنید.

شماره Chromium: 41006273 .

همزمانی سخت افزار به سنسورها منتقل می شود

تنظیمات همزمانی سخت‌افزار از پانل عملکرد به مکان مناسب‌تری - پانل حسگرها - منتقل می‌شود.

قبل و بعد از انتقال تنظیمات «هم‌زمان سخت‌افزار» به پنل حسگرها.

شماره Chromium: 371463665 .

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

اکنون ردیابی‌ها در کنسول به درستی شناسایی، نادیده گرفته می‌شوند، جمع می‌شوند و (در صورت بزرگ شدن) فریم‌هایی که از فایل‌های فهرست‌شده نادیده گرفته می‌شوند، خاکستری می‌شوند. قبلاً، نام تابع را در ردیابی گسترش یافته خاکستری نمی کرد.

همچنین می‌توانید جدید تنظیمات > فهرست نادیده گرفتن > اسکریپت‌های ناشناس را از eval یا کنسول تا DevTools را برای نادیده گرفتن اسکریپت‌های ناشناس بدون URL منبع تنظیم کنید.

قبل و بعد از بهبود فهرست نادیده گرفته شده در ردیابی پشته.

علاوه بر این، وقتی روی گزارش کنسول کلیک راست کرده و Save as... را می‌زنید، نمایش متن بیشتر/کمتر ذخیره نمی‌شود.

مسائل Chromium: 40279542 ، 40945570 ، 345248263 .

عناصر > سبک‌ها: پشتیبانی از حالت‌های نوشتن sideways-* برای پوشش‌های شبکه و کلمات کلیدی در سطح CSS

تب Elements > Styles اکنون موارد زیر را پشتیبانی می کند:

  • هم‌پوشانی شبکه در نما اکنون شبکه‌هایی را برای حالت‌های نوشتن sideways-rl و sideways-lr نشان می‌دهد.
  • کلمات کلیدی در سطح CSS را حل می کند. در عمل به این معناست که مثلاً اگر inherit یک رنگ باشد، تب Styles یک انتخابگر رنگ را در کنار آن نشان می دهد. قبل و بعد از حل کلمات کلیدی در سطح CSS.

مسائل Chromium: 40280717 ، 40706051 ، 40501131 .

ممیزی Lighthouse برای صفحات غیر HTTP در حالت‌های بازه زمانی و عکس فوری

Lighthouse اکنون می‌تواند برای صفحات غیر HTTP در حالت‌های Timesp و Snapshot گزارش تولید کند.

فعال کردن ممیزی قبل و بعد برای صفحه غیر HTTP در حالت‌های بازه زمانی و عکس فوری.

دسترسی

این نسخه دارای بهبودهای دسترسی زیر است:

  • در Sources > Editor ، اکنون می‌توان برگه‌های دارای فایل‌های باز را با تمرکز بر روی دکمه X و فشار دادن Enter یا Space بسته کرد.
  • در Performance ، اکنون می توانید یک ورودی را در ردیابی انتخاب کنید و برای باز کردن منوی زمینه، Space را فشار دهید.
  • در Performance ، برگه Insights در نوار کناری سمت چپ قابل دسترسی با صفحه‌کلید است و می‌توان آن را از طریق برگه مشاهده کرد.

شماره Chromium: 372411090 .

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

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

  • تنظیمات throttling اکنون به درستی بین پانل های عملکرد و شبکه همگام سازی شده است ( 370332090 ).
  • Application > Services Background > Speculative loads > Rules اکنون یک دکمه زیبا چاپی {} شبیه به Sources > Editor ( 40279147 ) دارد.
  • عبارات زنده : با فشار دادن Tab پس از انتخاب گزینه تکمیل خودکار، اکنون به جای تورفتگی متن، از قسمت ویرایش خارج می شود ( 349939551 ).
  • Elements > Styles : anchor() and anchor-size() از نحو جدید پشتیبانی می کند که در آن می توانید آرگومان ها را دوباره مرتب کنید و جهت anchor-size() حذف کنید ( 343516786 ). علاوه بر این، رندر بازگشتی ثابت ( 365802559 ).
  • شبکه : پیش نمایش های GraphQL ثابت ( 369931288 ).
  • عملکرد : اکنون پیشرفت تدریجی بارگیری و پردازش آثار را گزارش می کند.
  • WebAuthn : اکنون اعتبارنامه های اصلاح شده با روش های signal* را به صورت پویا به روز می کند ( 368467199 ).
  • WebAssembly: اکنون یک هشدار در کنسول به شما اطلاع می دهد که آیا چندین نماد اشکال زدایی برای یک ماژول WebAssembly موجود است و کدام یک در حال استفاده است ( 40879198 ، 369515221 ).
  • پوشش Core Web Vitals از برگه Rendering 328487897 حذف شده است.
  • ویژگی‌های مولد هوش مصنوعی اکنون نیازی به همگام‌سازی تنظیمات کروم ندارند.

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

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

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

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

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

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

،

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

اشکال زدایی CSS با Gemini

Chrome DevTools پانل کمکی آزمایشی هوش مصنوعی جدید را دریافت می کند که در آن می توانید با Gemini چت کنید و برای اشکال زدایی CSS خود راهنمایی دریافت کنید.

اکنون آن را امتحان کنید! در پنل Elements ، روی یک عنصر کلیک راست کرده و Ask AI را انتخاب کنید یا روی مورد مربوطه کلیک کنیددکمه کنار عنصر DevTools پنل جدید کمک هوش مصنوعی را باز می کند.

گزینه منوی "Ask AI" و دکمه مربوطه.

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

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

برای کسب اطلاعات بیشتر در مورد بهترین روش استفاده از پانل جدید، به 5 کار جالب با DevTools AI Assistance مراجعه کنید و کمک هوش مصنوعی برای استایل را بررسی کنید.

تیم DevTools مشتاقانه منتظر شنیدن نظرات شما هستند. می توانید آن را در crbug.com/364805393 بگذارید.

ویژگی های هوش مصنوعی را در یک تب تنظیمات اختصاصی کنترل کنید

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

تب جدید نوآوری های هوش مصنوعی.

برای اطلاعات بیشتر به تنظیمات > نوآوری‌های هوش مصنوعی مراجعه کنید.

بینش کنسول با یک کلیک فاصله دارد

DevTools دیگر نیازی به همگام‌سازی تنظیمات روشن برای ویژگی‌های هوش مصنوعی ندارد. بنابراین، بینش‌های کنسولی که قبلاً منتشر شده بود، همراه با کمک هوش مصنوعی برای استایل‌سازی ، با یک کلیک فاصله دارند.

اگر به Chrome وارد شده‌اید، این ویژگی‌ها را در تنظیمات > روشن کنیدنوآوری های هوش مصنوعی و شما خوب هستید.

بهبود پانل عملکرد

این نسخه تعدادی بهبود در پنل Performance به ارمغان می آورد.

حاشیه نویسی کنید و یافته های عملکرد را به اشتراک بگذارید

پانل Performance تب جدید Annotations را در یک نوار کناری قابل ارتقا در سمت چپ دریافت می‌کند که فرآیند ایجاد یادداشت‌ها را برای کاوش ردیابی و همکاری در هنگام اشتراک‌گذاری یافته‌های عملکرد ساده می‌کند.

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

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

اطلاعات بینش عملکرد را دقیقاً در پانل عملکرد دریافت کنید

اکنون می‌توانید بینش‌های عملی را در برگه Insights جدید در نوار کناری سمت چپ پانل عملکرد کشف کنید. اطلاعات آماری از گزارش Lighthouse و پانل اطلاعات آماری عملکرد که در شرف منسوخ شدن است، ادغام شده‌اند.

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

تیم DevTools منتظر بازخورد شما در مورد سودمندی اطلاعات بینش، راه‌های بهبود آن و تجربه شما در استفاده از آنها با ابزارهای دیگر، مانند PageSpeed ​​Insights و Lighthouse است. با خیال راحت نظرات خود را در crbug.com/371170842 بگذارید.

جابجایی های بیش از حد طرح را راحت تر ببینید

مسیر تغییر چیدمان ظاهر جدیدی پیدا می کند. تغییرات طرح‌بندی اکنون با الماس‌های بنفش (بیشتر قابل مشاهده) مشخص شده‌اند و بر اساس نزدیکی آنها در جدول زمانی در خوشه‌ها دسته‌بندی می‌شوند. هم شیفت‌ها و هم خوشه‌های آن‌ها یک جدول سازمان‌یافته با زمان‌بندی، امتیازات، عناصر و مقصران احتمالی در برگه Summary دریافت می‌کنند.

قبل و بعد از به‌روزرسانی مسیر «تغییر طرح‌بندی» و برگه «خلاصه» دوباره سازماندهی شده است.

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

گزارش قبل و بعد از افزودن «تغییرهای چیدمان» به نمای معیارهای زنده.

شماره Chromium: 369100729 .

انیمیشن های غیر ترکیبی را ببینید

آهنگ Animations اکنون اطلاعات مفیدی در مورد انیمیشن های غیر ترکیبی به شما نشان می دهد:

  • در صورت وجود، انیمیشن ها را با توجه به ویژگی CSS مربوطه نامگذاری می کند.
  • انیمیشن های غیر ترکیبی را با مثلث های قرمز در مسیر علامت گذاری می کند.
  • دلیل شکست ترکیب بندی را در تب Summary به شما نشان می دهد.

قبل و بعد از نام گذاری انیمیشن ها در آهنگ، علامت گذاری غیر ترکیبی و نشان دادن دلیل شکست.

برای اطلاعات بیشتر، به ویژگی‌های فقط Compositor و مدیریت تعداد لایه‌ها نگاه کنید.

شماره Chromium: 41006273 .

همزمانی سخت افزار به سنسورها منتقل می شود

تنظیمات همزمانی سخت‌افزار از پانل عملکرد به مکان مناسب‌تری - پانل حسگرها - منتقل می‌شود.

قبل و بعد از انتقال تنظیمات «هم‌زمان سخت‌افزار» به پنل حسگرها.

شماره Chromium: 371463665 .

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

اکنون ردیابی‌ها در کنسول به درستی شناسایی، نادیده گرفته می‌شوند، جمع می‌شوند و (در صورت بزرگ شدن) فریم‌هایی که از فایل‌های فهرست‌شده نادیده گرفته می‌شوند، خاکستری می‌شوند. قبلاً، نام تابع را در ردیابی گسترش یافته خاکستری نمی کرد.

همچنین می‌توانید جدید تنظیمات > فهرست نادیده گرفتن > اسکریپت‌های ناشناس را از eval یا کنسول تا DevTools را برای نادیده گرفتن اسکریپت‌های ناشناس بدون URL منبع تنظیم کنید.

قبل و بعد از بهبود فهرست نادیده گرفته شده در ردیابی پشته.

علاوه بر این، وقتی روی گزارش کنسول کلیک راست کرده و Save as... را می‌زنید، نمایش متن بیشتر/کمتر ذخیره نمی‌شود.

مسائل Chromium: 40279542 ، 40945570 ، 345248263 .

عناصر > سبک‌ها: پشتیبانی از حالت‌های نوشتن sideways-* برای پوشش‌های شبکه و کلمات کلیدی در سطح CSS

تب Elements > Styles اکنون موارد زیر را پشتیبانی می کند:

  • هم‌پوشانی شبکه در نما اکنون شبکه‌هایی را برای حالت‌های نوشتن sideways-rl و sideways-lr نشان می‌دهد.
  • کلمات کلیدی در سطح CSS را حل می کند. در عمل به این معناست که مثلاً اگر inherit یک رنگ باشد، تب Styles یک انتخابگر رنگ را در کنار آن نشان می دهد. قبل و بعد از حل کلمات کلیدی در سطح CSS.

مسائل Chromium: 40280717 ، 40706051 ، 40501131 .

ممیزی Lighthouse برای صفحات غیر HTTP در حالت‌های بازه زمانی و عکس فوری

Lighthouse اکنون می‌تواند برای صفحات غیر HTTP در حالت‌های Timesp و Snapshot گزارش تولید کند.

فعال کردن ممیزی قبل و بعد برای صفحه غیر HTTP در حالت‌های بازه زمانی و عکس فوری.

دسترسی

این نسخه دارای بهبودهای دسترسی زیر است:

  • در Sources > Editor ، اکنون می‌توان برگه‌های دارای فایل‌های باز را با تمرکز بر روی دکمه X و فشار دادن Enter یا Space بسته کرد.
  • در Performance ، اکنون می توانید یک ورودی را در ردیابی انتخاب کنید و برای باز کردن منوی زمینه، Space را فشار دهید.
  • در Performance ، برگه Insights در نوار کناری سمت چپ قابل دسترسی با صفحه‌کلید است و می‌توان آن را از طریق برگه مشاهده کرد.

شماره Chromium: 372411090 .

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

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

  • تنظیمات throttling اکنون به درستی بین پانل های عملکرد و شبکه همگام سازی شده است ( 370332090 ).
  • Application > Services Background > Speculative loads > Rules اکنون یک دکمه زیبا چاپی {} شبیه به Sources > Editor ( 40279147 ) دارد.
  • عبارات زنده : با فشار دادن Tab پس از انتخاب گزینه تکمیل خودکار، اکنون به جای تورفتگی متن، از قسمت ویرایش خارج می شود ( 349939551 ).
  • Elements > Styles : anchor() and anchor-size() از نحو جدید پشتیبانی می کند که در آن می توانید آرگومان ها را دوباره مرتب کنید و جهت anchor-size() حذف کنید ( 343516786 ). علاوه بر این، رندر بازگشتی ثابت ( 365802559 ).
  • شبکه : پیش نمایش های GraphQL ثابت ( 369931288 ).
  • عملکرد : اکنون پیشرفت تدریجی بارگیری و پردازش آثار را گزارش می کند.
  • WebAuthn : اکنون اعتبارنامه های اصلاح شده با روش های signal* را به صورت پویا به روز می کند ( 368467199 ).
  • WebAssembly: اکنون یک هشدار در کنسول به شما اطلاع می دهد که آیا چندین نماد اشکال زدایی برای یک ماژول WebAssembly موجود است و کدام یک در حال استفاده است ( 40879198 ، 369515221 ).
  • پوشش Core Web Vitals از برگه Rendering 328487897 حذف شده است.
  • ویژگی‌های مولد هوش مصنوعی اکنون نیازی به همگام‌سازی تنظیمات کروم ندارند.

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

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

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

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

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

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

،

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

اشکال زدایی CSS با Gemini

Chrome DevTools پانل کمکی آزمایشی هوش مصنوعی جدید را دریافت می کند که در آن می توانید با Gemini چت کنید و برای اشکال زدایی CSS خود راهنمایی دریافت کنید.

اکنون آن را امتحان کنید! در پنل Elements ، روی یک عنصر کلیک راست کرده و Ask AI را انتخاب کنید یا روی مورد مربوطه کلیک کنیددکمه کنار عنصر DevTools پنل جدید کمک هوش مصنوعی را باز می کند.

گزینه منوی "Ask AI" و دکمه مربوطه.

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

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

برای کسب اطلاعات بیشتر در مورد بهترین روش استفاده از پانل جدید، به 5 کار جالب با DevTools AI Assistance مراجعه کنید و کمک هوش مصنوعی برای استایل را بررسی کنید.

تیم DevTools مشتاقانه منتظر شنیدن نظرات شما هستند. می توانید آن را در crbug.com/364805393 بگذارید.

ویژگی های هوش مصنوعی را در یک تب تنظیمات اختصاصی کنترل کنید

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

تب جدید نوآوری های هوش مصنوعی.

برای اطلاعات بیشتر به تنظیمات > نوآوری‌های هوش مصنوعی مراجعه کنید.

بینش کنسول با یک کلیک فاصله دارد

DevTools دیگر نیازی به همگام‌سازی تنظیمات روشن برای ویژگی‌های هوش مصنوعی ندارد. بنابراین، بینش‌های کنسولی که قبلاً منتشر شده بود، همراه با کمک هوش مصنوعی برای استایل‌سازی ، با یک کلیک فاصله دارند.

اگر به Chrome وارد شده‌اید، این ویژگی‌ها را در تنظیمات > روشن کنیدنوآوری های هوش مصنوعی و شما خوب هستید.

بهبود پانل عملکرد

این نسخه تعدادی بهبود در پنل Performance به ارمغان می آورد.

حاشیه نویسی کنید و یافته های عملکرد را به اشتراک بگذارید

پانل Performance تب جدید Annotations را در یک نوار کناری قابل ارتقا در سمت چپ دریافت می‌کند که فرآیند ایجاد یادداشت‌ها را برای کاوش ردیابی و همکاری در هنگام اشتراک‌گذاری یافته‌های عملکرد ساده می‌کند.

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

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

اطلاعات بینش عملکرد را دقیقاً در پانل عملکرد دریافت کنید

اکنون می‌توانید بینش‌های عملی را در برگه Insights جدید در نوار کناری سمت چپ پانل عملکرد کشف کنید. اطلاعات آماری از گزارش Lighthouse و پانل اطلاعات آماری عملکرد که در شرف منسوخ شدن است، ادغام شده‌اند.

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

تیم DevTools منتظر بازخورد شما در مورد سودمندی اطلاعات بینش، راه‌های بهبود آن و تجربه شما در استفاده از آنها با ابزارهای دیگر، مانند PageSpeed ​​Insights و Lighthouse است. با خیال راحت نظرات خود را در crbug.com/371170842 بگذارید.

جابجایی های بیش از حد طرح را راحت تر ببینید

مسیر تغییر چیدمان ظاهر جدیدی پیدا می کند. تغییرات طرح‌بندی اکنون با الماس‌های بنفش (بیشتر قابل مشاهده) مشخص شده‌اند و بر اساس نزدیکی آنها در جدول زمانی در خوشه‌ها دسته‌بندی می‌شوند. هم شیفت‌ها و هم خوشه‌های آن‌ها یک جدول سازمان‌یافته با زمان‌بندی، امتیازات، عناصر و مقصران احتمالی در برگه Summary دریافت می‌کنند.

قبل و بعد از به‌روزرسانی مسیر «تغییر طرح‌بندی» و برگه «خلاصه» دوباره سازماندهی شده است.

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

گزارش قبل و بعد از افزودن «تغییرهای چیدمان» به نمای معیارهای زنده.

شماره Chromium: 369100729 .

انیمیشن های غیر ترکیبی را ببینید

آهنگ Animations اکنون اطلاعات مفیدی در مورد انیمیشن های غیر ترکیبی به شما نشان می دهد:

  • در صورت وجود، انیمیشن ها را با توجه به ویژگی CSS مربوطه نامگذاری می کند.
  • انیمیشن های غیر ترکیبی را با مثلث های قرمز در مسیر علامت گذاری می کند.
  • دلیل شکست ترکیب بندی را در تب Summary به شما نشان می دهد.

قبل و بعد از نام گذاری انیمیشن ها در آهنگ، علامت گذاری غیر ترکیبی و نشان دادن دلیل شکست.

برای اطلاعات بیشتر، به ویژگی‌های فقط Compositor و مدیریت تعداد لایه‌ها نگاه کنید.

شماره Chromium: 41006273 .

همزمانی سخت افزار به سنسورها منتقل می شود

تنظیمات همزمانی سخت‌افزار از پانل عملکرد به مکان مناسب‌تری - پانل حسگرها - منتقل می‌شود.

قبل و بعد از انتقال تنظیمات «هم‌زمان سخت‌افزار» به پنل حسگرها.

شماره Chromium: 371463665 .

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

اکنون ردیابی‌ها در کنسول به درستی شناسایی، نادیده گرفته می‌شوند، جمع می‌شوند و (در صورت بزرگ شدن) فریم‌هایی که از فایل‌های فهرست‌شده نادیده گرفته می‌شوند، خاکستری می‌شوند. قبلاً، نام تابع را در ردیابی گسترش یافته خاکستری نمی کرد.

همچنین می‌توانید جدید تنظیمات > فهرست نادیده گرفتن > اسکریپت‌های ناشناس را از eval یا کنسول تا DevTools را برای نادیده گرفتن اسکریپت‌های ناشناس بدون URL منبع تنظیم کنید.

قبل و بعد از بهبود فهرست نادیده گرفته شده در ردیابی پشته.

علاوه بر این، وقتی روی گزارش کنسول کلیک راست کرده و Save as... را می‌زنید، نمایش متن بیشتر/کمتر ذخیره نمی‌شود.

مسائل Chromium: 40279542 ، 40945570 ، 345248263 .

عناصر > سبک‌ها: پشتیبانی از حالت‌های نوشتن sideways-* برای پوشش‌های شبکه و کلمات کلیدی در سطح CSS

تب Elements > Styles اکنون موارد زیر را پشتیبانی می کند:

  • هم‌پوشانی شبکه در نما اکنون شبکه‌هایی را برای حالت‌های نوشتن sideways-rl و sideways-lr نشان می‌دهد.
  • کلمات کلیدی در سطح CSS را حل می کند. در عمل به این معناست که مثلاً اگر inherit یک رنگ باشد، تب Styles یک انتخابگر رنگ را در کنار آن نشان می دهد. قبل و بعد از حل کلمات کلیدی در سطح CSS.

مسائل Chromium: 40280717 ، 40706051 ، 40501131 .

ممیزی Lighthouse برای صفحات غیر HTTP در حالت‌های بازه زمانی و عکس فوری

Lighthouse اکنون می‌تواند برای صفحات غیر HTTP در حالت‌های Timesp و Snapshot گزارش تولید کند.

فعال کردن ممیزی قبل و بعد برای صفحه غیر HTTP در حالت‌های بازه زمانی و عکس فوری.

دسترسی

این نسخه دارای بهبودهای دسترسی زیر است:

  • در Sources > Editor ، اکنون می‌توان برگه‌های دارای فایل‌های باز را با تمرکز بر روی دکمه X و فشار دادن Enter یا Space بسته کرد.
  • در Performance ، اکنون می توانید یک ورودی را در ردیابی انتخاب کنید و برای باز کردن منوی زمینه، Space را فشار دهید.
  • در Performance ، برگه Insights در نوار کناری سمت چپ قابل دسترسی با صفحه‌کلید است و می‌توان آن را از طریق برگه مشاهده کرد.

شماره Chromium: 372411090 .

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

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

  • تنظیمات throttling اکنون به درستی بین پانل های عملکرد و شبکه همگام سازی شده است ( 370332090 ).
  • Application > Services Background > Speculative loads > Rules اکنون یک دکمه زیبا چاپی {} شبیه به Sources > Editor ( 40279147 ) دارد.
  • عبارات زنده : با فشار دادن Tab پس از انتخاب گزینه تکمیل خودکار، اکنون به جای تورفتگی متن، از قسمت ویرایش خارج می شود ( 349939551 ).
  • Elements > Styles : anchor() and anchor-size() از نحو جدید پشتیبانی می کند که در آن می توانید آرگومان ها را دوباره مرتب کنید و جهت anchor-size() حذف کنید ( 343516786 ). علاوه بر این، رندر بازگشتی ثابت ( 365802559 ).
  • شبکه : پیش نمایش های GraphQL ثابت ( 369931288 ).
  • عملکرد : اکنون پیشرفت تدریجی بارگیری و پردازش آثار را گزارش می کند.
  • WebAuthn : اکنون اعتبارنامه های اصلاح شده با روش های signal* را به صورت پویا به روز می کند ( 368467199 ).
  • WebAssembly: اکنون یک هشدار در کنسول به شما اطلاع می دهد که آیا چندین نماد اشکال زدایی برای یک ماژول WebAssembly موجود است و کدام یک در حال استفاده است ( 40879198 ، 369515221 ).
  • پوشش Core Web Vitals از برگه Rendering 328487897 حذف شده است.
  • ویژگی‌های مولد هوش مصنوعی اکنون نیازی به همگام‌سازی تنظیمات کروم ندارند.

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

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

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

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

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

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

،

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

اشکال زدایی CSS با Gemini

Chrome Devtools پانل جدید AI AII Experimental Ai را دریافت می کند که می توانید با جمینی گپ بزنید و به اشکال زدایی در CSS خود کمک کنید.

اکنون آن را امتحان کنید! در پانل عناصر ، بر روی یک عنصر راست کلیک کرده و Ask AI را انتخاب کنید یا روی مربوطه کلیک کنیددکمه کنار عنصر. DevTools پانل کمک جدید AI را باز خواهد کرد.

گزینه منوی "Ask AII" و دکمه مربوطه.

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

پانل کمک جدید AI که به سریع پاسخ می دهد.

برای کسب اطلاعات بیشتر در مورد چگونگی استفاده بهتر از پانل جدید ، به 5 مورد جالب توجه با Devtools AI AI مراجعه کرده و از AI کمک برای یک ظاهر طراحی شده دیدن کنید.

تیم DevTools مشتاقانه منتظر شنیدن بازخورد شما است. احساس راحتی کنید که آن را در crbug.com/364805393 بگذارید.

ویژگی های هوش مصنوعی را در یک تب تنظیمات اختصاصی کنترل کنید

اکنون می توانید تمام ویژگی های AI را در یک مکان مدیریت کنید: تنظیمات جدید>برگه نوآوری AI . این ملاحظات مهم را لیست می کند ، ویژگی های هوش مصنوعی را توصیف می کند و به شما امکان می دهد آنها را به صورت جداگانه روشن و خاموش کنید.

برگه جدید نوآوری هوش مصنوعی.

برای اطلاعات بیشتر ، تنظیمات> نوآوری های AI .

بینش کنسول یک کلیک فاصله دارد

DevTools دیگر نیازی به همگام سازی تنظیمات برای ویژگی های AI ندارد. بنابراین ، Console Insights که قبلاً منتشر شد ، همراه با کمک هوش مصنوعی برای یک ظاهر طراحی شده ، یک کلیک فاصله دارند.

اگر به Chrome وارد شده اید ، این ویژگی ها را در تنظیمات روشن کنید>نوآوری های هوش مصنوعی و شما خوب هستید که بروید.

بهبود پانل عملکرد

این نسخه چندین پیشرفت را در پانل عملکرد به ارمغان می آورد.

حاشیه نویسی کنید و یافته های عملکرد را به اشتراک بگذارید

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

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

برگه New Annotations در نوار کناری در سمت چپ و رویداد ، دامنه و اتصال حاشیه ای.

اطلاعات بینش عملکرد را دقیقاً در پانل عملکرد دریافت کنید

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

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

تیم DevTools مشتاقانه منتظر بازخورد شما در مورد سودمندی بینش ، راه های بهبود آن و تجربه شما با استفاده از آنها با ابزار دیگر ، مانند بینش های Pagespeed و فانوس دریایی است. در صورت تمایل می توانید نظرات خود را در crbug.com/371170842 بگذارید.

جابجایی های بیش از حد طرح را راحت تر ببینید

آهنگ تغییر طرح ظاهری جدید دارد. تغییر چیدمان اکنون با الماس بنفش (قابل مشاهده تر) مشخص شده و بر اساس نزدیکی آنها در جدول زمانی در خوشه ها گروه بندی می شوند. هر دو شیفت و خوشه های آنها یک جدول سازمان یافته با زمان بندی ، نمرات ، عناصر و مقصر بالقوه در برگه خلاصه دریافت می کنند.

قبل و بعد از بروزرسانی در برگه "SHIFTS LAYOUT SHIFTS" و سازماندهی مجدد "Summary".

علاوه بر این ، نمای زنده معیارهای زنده ، تغییر طرح های طرح را با نمرات و عناصر در کنار برگه تعامل وارد می کند.

قبل و بعد از افزودن ورود به سیستم "تغییر چیدمان" به نمای معیارهای زنده.

شماره کروم: 369100729 .

انیمیشن های غیر ترکیبی را ببینید

آهنگ انیمیشن ها اکنون اطلاعات مفیدی را در مورد انیمیشن های غیرقابل ترکیب به شما نشان می دهد:

  • در صورت وجود انیمیشن ها را با توجه به خاصیت CSS مربوطه نامگذاری می کند.
  • انیمیشن های غیرقابل ترکیب را با مثلث های قرمز در آهنگ نشان می دهد.
  • دلیل ترکیبی از عدم موفقیت در برگه خلاصه را به شما نشان می دهد.

قبل و بعد از نامگذاری انیمیشن ها در مسیر ، علامت گذاری به موارد غیر مصرفی و نشان دادن دلیل عدم موفقیت.

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

شماره کروم: 41006273 .

همزمانی سخت افزار به سنسورها منتقل می شود

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

قبل و بعد از انتقال تنظیمات "همزمانی سخت افزار" به پانل سنسورها.

شماره کروم: 371463665 .

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

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

همچنین می توانید جدید تنظیمات > لیست نادیده گرفتن > اسکریپت های ناشناس را از Eval یا Console کنید تا DevTools را تنظیم کنید تا اسکریپت های ناشناس را بدون URL منبع نادیده بگیرید.

قبل و بعد از بهبود لیست نادیده گرفتن در آثار پشته.

علاوه بر این ، هنگامی که شما کلیک راست کرده و به عنوان ذخیره می کنید ... ورود به سیستم کنسول ، متن را بیشتر/کمتر ذخیره نمی کند.

مشکلات کروم: 40279542 ، 40945570 ، 345248263 .

عناصر > سبک‌ها: پشتیبانی از حالت‌های نوشتن sideways-* برای پوشش‌های شبکه و کلمات کلیدی در سطح CSS

برگه عناصر > Styles اکنون از موارد زیر پشتیبانی می کند:

  • پوشش شبکه در Viewport اکنون شبکه هایی را برای حالت های نوشتن sideways-rl و sideways-lr نشان می دهد.
  • کلمات کلیدی گسترده CSS را برطرف می کند. از نظر عملی ، به این معنی است که ، به عنوان مثال ، اگر inherit رنگی باشد ، برگه Styles یک انتخاب کننده رنگ را در کنار آن نشان می دهد. قبل و بعد از حل کلمات کلیدی گسترده CSS.

مشکلات کروم: 40280717 ، 40706051 ، 40501131 .

ممیزی Lighthouse برای صفحات غیر HTTP در حالت‌های بازه زمانی و عکس فوری

Lighthouse هم اکنون می تواند گزارش هایی را برای صفحات غیر HTTP در حالت های Timespan و Snapshot تولید کند.

قبل و بعد از فعال کردن حسابرسی برای صفحه غیر HTTP در حالت های Timespan و Snapshot.

دسترسی

این نسخه پیشرفت های دسترسی زیر را دارد:

  • در منابع > ویرایشگر ، زبانه ها با پرونده های باز می توانند با تمرکز روی دکمه X و فشار دادن Enter یا Face بسته شوند.
  • در عملکرد ، اکنون می توانید یک ورودی را در ردیابی انتخاب کرده و برای باز کردن منوی زمینه ، فضا را فشار دهید.
  • در عملکرد ، برگه بینش در نوار کناری در سمت چپ قابل دسترسی به صفحه کلید است و می تواند "از طریق آن" قرار بگیرد.

شماره کروم: 372411090 .

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

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

  • تنظیمات پرتاب در حال حاضر به درستی بین پانل های عملکرد و شبکه ( 370332090 ) همگام سازی شده است.
  • برنامه > خدمات پس زمینه > بارهای سوداگرانه > قوانین اکنون دارای یک دکمه چاپ {} زیبا شبیه به منابع > ویرایشگر ( 40279147 ) است.
  • عبارات زنده : فشار دادن برگه پس از انتخاب گزینه خودکار در حال حاضر به جای اینکه متن را وارد کنید ، از قسمت ویرایش خارج می شود ( 349939551 ).
  • عناصر > سبک ها : anchor() و anchor-size() از نحو جدید پشتیبانی می کند که در آن می توانید آرگومان ها را دوباره سفارش داده و جهت anchor-size() حذف کنید ( 343516786 ). علاوه بر این ، ارائه خطای ثابت ( 365802559 ).
  • شبکه : پیش نمایش های ثابت GraphQL ( 369931288 ).
  • عملکرد : اکنون پیشرفت افزایشی آثار بارگذاری و پردازش را گزارش می کند.
  • WebAuthn : اکنون به صورت پویا اعتبارنامه اصلاح شده با روش های signal* ( 368467199 ) را به روز می کند.
  • WebAssembly: هشدار در کنسول اکنون به شما اطلاع می دهد که آیا چندین نماد اشکال زدایی برای یک ماژول WebAnsembly در دسترس است و کدام یک در حال استفاده است ( 40879198 ، 369515221 ).
  • پوشش اصلی وب ویتامان از برگه رندر 328487897 حذف می شود.
  • ویژگی های تولید AI اکنون به همگام سازی تنظیمات Chrome احتیاج ندارند.

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

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

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

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

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

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