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

Sofia Emelianova

ضبط کننده از خروجی گرفتن به Puppeteer برای فایرفاکس پشتیبانی می‌کند

به عنوان بخشی از پشتیبانی WebDriver BiDi ، پنل Recorder اکنون می‌تواند ضبط‌ها را به Puppeteer برای فایرفاکس صادر کند. با پشتیبانی Puppeteer از فایرفاکس ، اکنون می‌توانید جریان‌های کاربری را با استفاده از پنل Chrome DevTools Recorder ضبط کنید، آنها را صادر کنید و آنها را هم در فایرفاکس و هم در کروم اجرا کنید.

برای اطلاعات بیشتر، به WebDriver BiDi - آینده اتوماسیون بین مرورگری مراجعه کنید.

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

این نسخه بهبودهای زیادی را در پنل عملکرد (Performance) به همراه دارد.

مشاهدات زنده معیارها

پنل Performance اکنون مشاهدات زنده در مورد Core Web Vitals را هم در دستگاه محلی شما و هم بر اساس داده‌های میدانی از Chrome UX Report به شما نشان می‌دهد. این به شما امکان می‌دهد بدون نیاز به ثبت ردپاهای عملکرد، مشکلات عملکرد را تشخیص داده و درک کنید که تجربه شما در مقایسه با تجربه کاربرانتان چقدر نماینده است.

برای مشاهده مشاهدات زنده در LCP و CLS، پنل Performance را باز کنید. برای مشاهده INP، تعاملی را در یک صفحه انجام دهید. برای مقایسه معیارهای محلی خود با تجربه کاربری تجمیع‌شده از گزارش UX Chrome، داده‌های فیلد را اضافه کنید: در بخش داده‌های فیلد در سمت راست، روی Set up کلیک کنید و در پنجره محاوره‌ای، روی Ok کلیک کنید. ماوس را روی یک مقدار معیار نگه دارید تا یک راهنمای ابزار با اطلاعات بیشتر مشاهده کنید.

پنل عملکرد ، معیارهایی را که می‌توانند بهبود یابند، برجسته می‌کند و بینش‌ها و پیشنهادهایی در مورد چگونگی تطبیق تجربه محلی شما با تجربه کاربرانتان ارائه می‌دهد. به عنوان مثال، ممکن است بخواهید CPU یا شبکه را کنترل کنید، که می‌توانید این کار را در همان صفحه در بخش تنظیمات ضبط در سمت راست انجام دهید.

درخواست‌های جستجو در مسیر شبکه

کادر جستجو در پنل Performance اکنون در سراسر مسیر Network نیز کار می‌کند، بنابراین می‌توانید درخواست‌ها را با میانبر Ctrl / Cmd + F پیدا کنید.

ردپای پشته فراخوانی‌های performance.mark و performance.measure را ببینید

در تب Summary ، پنل Performance اکنون ردپاهای فراخوانی‌های performance.mark و performance.measure را به صورت پشته‌ای نشان می‌دهد. می‌توانید از این فراخوانی‌ها برای گسترش ردپاهای Performance با داده‌های سفارشی خود استفاده کنید.

برای اطلاعات بیشتر، به «سفارشی‌سازی داده‌های عملکرد خود با API توسعه‌پذیری» مراجعه کنید.

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

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

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

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

این نسخه چندین بهبود در پنل Elements ایجاد کرده است.

اعمال حالت‌های بیشتر برای عناصر خاص

بخش :hov در Elements > Styles اکنون شبه کلاس‌های بیشتری را در اختیار شما قرار می‌دهد که می‌توانید به اجبار فعال کنید. مجموعه جدید گزینه‌ها در زیر منوی کشویی Force specific element state قرار دارد و مختص عناصر خاصی است که انتخاب می‌کنید. به عنوان مثال، <label> و <input> مجموعه گزینه‌های متفاوتی دارند.

مشکل کرومیوم: ۴۰۲۸۰۰۱۲

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

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

برای اطلاعات بیشتر، به بخش Inspect CSS grid layouts و به طور خاص به بخش Show line names مراجعه کنید.

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

پنل Lighthouse اکنون Lighthouse 12.2.0 را اجرا می‌کند.

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

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

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

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

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

• عناصر :
  • اشکالی که باعث رندر نادرست ویژگی‌های طول بیش از حد مجاز می‌شد، برطرف شد ۳۵۷۰۲۰۶۱۳ .
  • طبق مشخصات position-try-options به position-try-fallbacks تغییر نام داده شده است.
  • اکنون با یک رفرش صفحه، گره انتخاب شده حتی درون یک iframe با کد 40719145 بازیابی می‌شود.
  • قابلیت دسترسی : صفحه‌خوان‌ها اکنون دکمه نمایش عنصر ۳۵۷۳۸۲۵۳۶ را اعلام می‌کنند.
• عملکرد > شبکه : گزینه منوی « آشکارسازی در شبکه» اکنون برگه سربرگ‌های درخواست شبکه مربوطه را باز می‌کند.
• کنسول :
  • خطاهای ناشی از افزونه‌ی C/C++ اکنون کنسول 356320158 را به زور باز نمی‌کنند.
  • اشکالی که در import.meta در یک ماژول JS وجود داشت و باعث می‌شد هنگام مکث، ارزیابی نشود، برطرف شد. ۴۰۷۴۳۷۹۳
• حافظه : اشکالی که باعث می‌شد نگهدارنده‌های نادیده گرفته شده‌ی Restore پس از نادیده گرفتن نگهدارنده‌ی ۳۲۷۳۳۷۵۲۷ نمایش داده نشوند، برطرف شد.

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

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

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

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

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

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

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