چه چیزی در Devtools جدید ، Chrome 141

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

ابزارهای توسعه کروم (MCP) برای عامل هوش مصنوعی شما

اکنون می‌توانید پیش‌نمایشی از سرور جدید Chrome DevTools Model Context Protocol (MCP) را مشاهده کنید. این سرور، قدرت Chrome DevTools را به دستیاران کدنویسی هوش مصنوعی می‌آورد.

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

خودتان ببینید چطور کار می‌کند:

برای اطلاعات بیشتر به Chrome DevTools (MCP) برای عامل هوش مصنوعی خود مراجعه کنید.

اشکال‌زدایی درخت وابستگی شبکه با Gemini

بخش Performance > Insights > Network dependency tree اکنون دارای دکمه Debug with AI است که شما را به پنل دستیار هوش مصنوعی می‌برد، بنابراین می‌توانید با کمک Gemini در مورد درخت مذکور بحث و آن را اشکال‌زدایی کنید.

قبل و بعد از اضافه شدن دکمه «اشکال‌زدایی با هوش مصنوعی» به بینش «درخت وابستگی شبکه».

چت‌های خود را با Gemini صادر کنید

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

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

پیکربندی مسیر ثابت در پنل عملکرد

وقتی یک قطعه ضبط‌شده را در پنل Performance پیکربندی می‌کنید، DevTools اکنون پیکربندی شما را ذخیره می‌کند و هنگام وارد کردن مجدد آن یا ضبط قطعه جدید، آن را اعمال می‌کند.

درخواست‌های شبکه محافظت‌شده با IP را فیلتر کنید

در پنل شبکه ، اکنون می‌توانید درخواست‌های ارسالی به پروکسی‌های IP Protection را فیلتر کنید.

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

تب عناصر > طرح‌بندی، پشتیبانی از طرح‌بندی بنایی را اضافه می‌کند

اکنون می‌توانید طرح‌بندی بنایی را در برگه عناصر > سبک‌ها بررسی کنید.

طرح‌بندی بنایی (Masonry layout ) یک روش طرح‌بندی است که در آن یک محور از یک طرح‌بندی شبکه‌ای دقیق معمولی، اغلب ستون‌ها، و محور دیگر از یک طرح‌بندی بنایی استفاده می‌کند.

قبل و بعد از اضافه کردن پشتیبانی از طرح‌بندی masonry به Elements - Layout.

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

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

نکته قابل توجه در این نسخه، این است که Lighthouse مشکلات یافت شده در ویژگی‌های سفارشی CSS را در پیام‌های خطای جداگانه‌ای نمایش می‌دهد.

همچنین لیست کامل تغییرات را مشاهده کنید.

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

مشکل کروم: ۴۰۵۴۳۶۵۱

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

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

  • عملکرد : رویدادهای فراخوانی بی‌هدف Request اکنون شامل ویژگی timeout ( crbug.com/441679219 ) می‌شوند.
  • قابلیت دسترسی . صفحه‌خوان‌ها اکنون موارد زیر را با صدای بلند می‌خوانند:
    • «این یک ویژگی جدید است» برای آیتم‌های منوی فرمان ارتقا یافته ( crbug.com/441485154 ).
    • نوار ابزار خلاصه تکمیل کد ( crbug.com/433952045 ).
  • شبکه : کلیک راست روی یک مورد گزارش شبکه، آن را انتخاب می‌کند ( crbug.com/368510578 ).

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

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

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

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

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

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