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

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

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

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

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

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

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

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

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

افزایش فشار شبکه برای WebRTC

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

پارامترهای جدید عبارتند از: Packet Loss (درصد)، Packet Queue Length (تعداد بسته ها)، و پرچم Packet Reordering پرچم.

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

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

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

شماره Chromium: 41175925 .

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

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

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

گروهی از انیمیشن های اسکرول که با نماد ماوس مشخص شده اند.

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

پشتیبانی از تودرتوی CSS در Elements > Styles بهبود یافته است

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

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

شماره Chromium: 40166888 .

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

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

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

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

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

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

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

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

فلش های قبل و بعد از رویدادهای انتخاب شده تا شروع شده و پیوندهای نامگذاری شده به جای Reveal نشان داده می شود.

علاوه بر این، همه آغازگرها اکنون Initiator برای فیلدها را در برگه Summary دارند و هر دو فیلد Initiator for و Initiated by پیوندها را به جای Reveal نامگذاری کرده اند.

مسائل Chromium: 325604258 , 325024819 , 326055289 .

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

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

در میان تغییرات قابل توجه، انتخاب جدید Enable JS sampling تنظیمات است. این تنظیم به طور پیش فرض غیرفعال است.

قبل و بعد از افزودن تنظیمات نمونه‌گیری JS انتخاب کردن.

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

ردیابی عملکرد بدون (چپ) و با (راست) نمونه برداری JS.

ردیابی در منوی Tools > View Unthrottled Trace پس از تولید گزارش Lighthouse در دسترس است.

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

شماره Chromium: 772558 .

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

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

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

شماره Chromium: 41490331 .

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

این نسخه چند به روز رسانی را برای Application > Storage به ارمغان می آورد.

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

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

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

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

شماره Chromium: 324464353 .

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

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

به تبع آن، DevTools بخش Web SQL را از پنل Application حذف کرد.

شماره Chromium: 327254049 .

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

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

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

قبل و بعد از محاسبه صحیح آمار تطبیق کودکان.

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

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

شماره Chromium: 41494198 ، 329253687 .

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

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

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

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

منسوخ شدن پروفایلر جاوا اسکریپت: فاز چهارم، نهایی

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

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

شماره Chromium: 40262073 .

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

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

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

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

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

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

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

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

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