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

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

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

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

قبل و بعد از افزودن گزینه "Puppeteer for Firefox" به منوی صادرات Recorder.

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

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

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

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

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

برای مشاهده مشاهدات زنده در LCP و CLS، پانل عملکرد را باز کنید. برای مشاهده INP، یک تعامل در یک صفحه انجام دهید. برای مقایسه معیارهای محلی خود با تجربه کاربر جمع‌آوری شده از گزارش Chrome UX، داده‌های فیلد را اضافه کنید: در بخش داده‌های فیلد در سمت راست، روی «تنظیم» کلیک کنید و در یک پنجره گفتگو، روی «تأیید» کلیک کنید. ماوس را روی یک مقدار متریک نگه دارید تا راهنمایی ابزار با اطلاعات بیشتر را ببینید.

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

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

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

یک درخواست شبکه با جستجو پیدا شد.

ردپای پشته‌ای از تماس‌های performance.mark و performance.measure را ببینید

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

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

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

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

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

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

گزینه های قبل و بعد از افزودن خودکار داده های آزمایشی به منوی کشویی فیلد فرم آدرس.

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

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

حالت های بیشتری را برای عناصر خاص اجباری کنید

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

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

شماره Chromium: 40280012 .

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

تب Elements > Styles اکنون گزینه های تکمیل خودکار را هنگام ویرایش نام ناحیه شبکه و خطوط ارائه می دهد.

قبل و بعد از افزودن گزینه های تکمیل خودکار هنگام ویرایش نام خطوط شبکه.

برای اطلاعات بیشتر، به طور خاص به بررسی طرح‌بندی‌های شبکه CSS و بخش Show line names آن مراجعه کنید.

فانوس دریایی 12.2.0

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

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

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

شماره Chromium: 772558 .

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

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

  • عناصر :
    • رفع اشکال با ارائه نادرست ویژگی های طول بیش از حد 357020613 .
    • position-try-options طبق مشخصات به position-try-fallbacks تغییر نام دادند.
    • یک بازخوانی صفحه اکنون گره انتخاب شده را حتی در داخل iframe 40719145 بازیابی می کند.
    • قابلیت دسترسی : خوانندگان صفحه اکنون دکمه Show element 357382536 را اعلام می کنند.
  • عملکرد > شبکه : گزینه منوی Reveal in Network اکنون برگه Headers درخواست شبکه مربوطه را باز می کند.
  • کنسول :
    • خطاهای پسوند C/C++ اکنون به اجبار کنسول 356320158 را باز نمی‌کنند.
    • رفع اشکال با import.meta در یک ماژول JS در عدم ارزیابی در هنگام توقف 40743793 .
  • حافظه : رفع اشکال با بازگرداندن نگهدارنده های نادیده گرفته شده پس از نادیده گرفتن نگهدارنده 327337527 نشان داده نمی شود.

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

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

تماس با تیم Chrome DevTools

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

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

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

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