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

Sofia Emelianova

پنل جدید تکمیل خودکار

این نسخه، پنل جدید تکمیل خودکار (Autofill) را به DevTools می‌آورد. تکمیل خودکار کروم (Chrome Autofill) روشی آسان برای پر کردن خودکار فرم‌ها در وب‌سایت‌هایی با آدرس‌های ذخیره‌شده ارائه می‌دهد. پنل جدید تکمیل خودکار به شما امکان می‌دهد نگاشت بین فیلدهای فرم، مقادیر پیش‌بینی‌شده تکمیل خودکار و داده‌های ذخیره‌شده را بررسی کنید.

پنل جدید را در این صفحه آزمایشی با داده‌های آزمایشی امتحان کنید:

1. در قسمت تکمیل خودکار پروفایل ، روی هر یک از دکمه‌های «پر کردن فرم ...» کلیک کنید، سپس روی «ارسال» کلیک کنید، سپس در پنجره‌ی «ذخیره آدرس؟» روی «ذخیره» کلیک کنید و به صفحه‌ای که فرم در آن قرار دارد برگردید.
2. DevTools را باز کنید و یک رویداد تکمیل خودکار را فعال کنید: یک فیلد فرم را انتخاب کنید و آدرس را از لیست کشویی انتخاب کنید.

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

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

کنترل پیشرفته شبکه برای WebRTC

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

پارامترهای جدید عبارتند از: درصد از دست رفتن بسته‌ها (Packet Loss)، طول صف بسته‌ها (Packet Queue Length ) (تعداد بسته‌ها) و علامت تیک گزینه‌ی «مرتب‌سازی مجدد بسته‌ها» (Packet Reordering flag).

برای محدود کردن اتصال WebRTC، پارامترهای مربوط به بسته را در یک پروفایل سفارشی در تنظیمات Settings > Throttling مشخص کنید و آن را در پنل Network انتخاب کنید.

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

مشکل کروم: ۴۱۱۷۵۹۲۵

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

پنل انیمیشن‌ها اکنون به شما امکان می‌دهد انیمیشن‌های اسکرول‌محور را بررسی کنید.

این ویژگی را در این صفحه آزمایشی امتحان کنید. پنل انیمیشن‌ها را باز کنید و صفحه را مجدداً بارگذاری کنید تا انیمیشن‌های اسکرول-محور را ضبط کنید.

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

پشتیبانی از CSS تودرتو در بخش عناصر > سبک‌ها بهبود یافته است.

تب Elements > Styles پشتیبانی از CSS nesting را بهبود می‌بخشد و اکنون استایل‌های تو در تو را با تورفتگی و داخل پرانتز نشان می‌دهد. CSS nesting راهی برای گروه‌بندی قوانین CSS با هم و کاهش طولانی شدن و ساختارمندتر شدن کدها است.

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

پنل عملکرد پیشرفته

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

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

برای فیلتر کردن نویز از نمودار شعله‌ای در Performance > Main ، اکنون می‌توانید توابع نامربوط و فرزندان آنها را پنهان کنید. در نمودار شعله‌ای، روی یک تابع کلیک راست کرده و از منوی زمینه، گزینه‌ای را انتخاب کنید.

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

فلش‌هایی از آغازگران انتخاب‌شده به رویدادهایی که آنها آغاز کرده‌اند

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

علاوه بر این، اکنون همه آغازگرها در برگه خلاصه (Summary) دارای فیلدهای Initiator for هستند و هر دو فیلد Initiator for و Initiated by به جای Reveal دارای لینک‌های نامگذاری شده هستند.

مشکلات کرومیوم: ۳۲۵۶۰۴۲۵ ، ۳۲۵۰۲۴۸۱۹ ، ۳۲۶۰۵۵۲۸۹ .

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

پنل Lighthouse اکنون Lighthouse 11.6.0 را اجرا می‌کند. لیست کامل تغییرات را ببینید.

از جمله تغییرات قابل توجه، گزینه جدید انتخاب گزینه check_box_outline_blank برای فعال کردن نمونه‌برداری JS است. این تنظیم به طور پیش‌فرض غیرفعال است.

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

این ردیابی پس از تولید گزارش Lighthouse ، از طریق منوی ابزارهای more_vert > View Unthrottled Trace در دسترس است.

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

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

نکات راهنما برای دسته‌های خاص در Memory > Heap snapshots

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

مشکل کروم: ۴۱۴۹۰۳۳۱

برنامه > به‌روزرسانی‌های ذخیره‌سازی

این نسخه چندین به‌روزرسانی در بخش Application > Storage ارائه می‌دهد.

بایت‌های استفاده شده برای فضای ذخیره‌سازی مشترک

بخش Application > Storage > Shared storage اکنون تعداد بایت‌های استفاده شده توسط یک مبدا را به شما نشان می‌دهد.

فضای ذخیره‌سازی اشتراکی به شما امکان می‌دهد دسترسی نامحدود به ذخیره‌سازی بین‌سایتی برای نوشتن و دسترسی خواندن با حفظ حریم خصوصی داشته باشید.

مشکل کروم: ۳۲۴۴۶۴۳۵۳

SQL وب کاملاً منسوخ شده است

کروم در نسخه ۱۱۹، Web SQL را منسوخ کرد و توکن آزمایشی منسوخ‌شده را در این نسخه حذف کرد، بنابراین دیگر نمی‌توانید از Web SQL استفاده کنید.

به دنبال این اقدام، DevTools بخش Web SQL را از پنل Application حذف کرد.

مشکل کروم: ۳۲۷۲۵۴۰۴۹

بهبود پنل پوشش

این نسخه چندین به‌روزرسانی برای پنل Coverage به ارمغان می‌آورد:

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

• رنگ کد مورد استفاده اکنون به جای سبز، خاکستری است تا دید بهبود یابد، به خصوص برای نقص بینایی بدون رنگ سبز.

شماره کرومیوم: ۴۱۴۹۴۱۹۸ ، ۳۲۹۲۵۳۶۸۷ .

پنل لایه‌ها ممکن است منسوخ شده باشد

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

قبل از اینکه تیم تصمیم نهایی را برای کنار گذاشتن پنل بگیرد، می‌توانید نظرات و نگرانی‌های خود را با ما در میان بگذارید .

منسوخ شدن JavaScript Profiler: مرحله چهارم، نهایی

در این نسخه، پنل JS Profiler کاملاً منسوخ شده است و دیگر نمی‌توان آن را دوباره فعال کرد.

برای نمایش عملکرد CPU، از پنل Performance استفاده کنید .

مشکل کروم: ۴۰۲۶۲۰۷۳

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

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

• شبکه :
  • اشکالی که باعث تجزیه نادرست کوکی‌های چندخطی می‌شد ( 325410304 ) برطرف شد.
  • پیش‌نمایش پشته فراخوانی در ستون آغازگر ( 327665602 ) برطرف شد.
• مانیتور عملکرد : کادرهای انتخاب مسیر اکنون مانند بقیه رابط کاربری ( 1467464 ) هستند.
• منابع : هایلایت کردن سینتکس برای اسناد XHTML اضافه شد ( 327940244 ).
• تنظیمات > دستگاه‌ها : گلکسی فولد قدیمی با گلکسی زد فولد ۵ جدیدتر ( ۴۰۱۱۳۴۳۹ ) جایگزین شده است.
• عملکرد : اکنون هنگام جستجو با Ctrl / Cmd + F ( 1523279 )، تمام نتایج جستجوی منطبق برجسته می‌شوند.
• منابع توسعه‌دهندگان : اکنون منابع بارگذاری‌شده از طریق افزونه‌های زبان، مانند افزونه کروم C/C++ DevTools Support (DWARF) ( 40746829 ) را نیز نشان می‌دهد.
• عملکرد : مشکل پشته فراخوانی بریده‌شده و طرح‌بندی نامناسب آن در برگه خلاصه ( 325314708 ) برطرف شد.
• کشو : بستن دکمه‌های بستن اکنون قابل تنظیم فوکوس هستند، بنابراین می‌توان پنل‌ها را با استفاده از صفحه‌کلید بست.

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

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

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

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

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

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

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