این یک ماه پر ویژگی در Chrome Canary بود. برای یادگیری اینکه کدام اسکریپت‌های شخص ثالث با جزئیات جمع‌آوری شده در Timeline باعث ایجاد مشکلات پرف در سایت شما می‌شوند، نحوه انتخاب رنگ‌های سازگار با پالت رنگ جدید ، نحوه شبیه‌سازی WiFi کنفرانس با نمایه‌های شبکه قابل تنظیم و نحوه استفاده بیشتر از DevTools را بخوانید. رابط کاربری با منوی اصلی جدید و نکات ابزار بهتر .
بهتر است مسائل مربوط به سرزنش را سرزنش کنید: جزئیات جمع آوری شده در Timeline
در وب‌سایت‌های امروزی، ما بیشتر و بیشتر از بیکن‌ها، تجزیه و تحلیل، خدمات اجتماعی، بارگذاری فونت و تبلیغات از طرف اشخاص ثالث استفاده می‌کنیم، که گاهی اوقات بسیار زیاد است . برای اطمینان از اینکه این اتفاق نمی‌افتد و برای اینکه مشکل را در معرض دید شما قرار دهیم، جزئیات انبوهی را به Timeline معرفی می‌کنیم.
در برگه جزئیات جمع‌آوری شده ، می‌توانید روی توابع پرهزینه یا کل درخت تماس تمرکز کنید، سپس داده‌های انتخابی را بر اساس دامنه، زیر دامنه یا URLهای متمایز تجزیه کنید. به عنوان مثال، در جدول زمانی بالا برای بارگذاری صفحه، اکنون می‌توانید کاهش سرعت را به راحتی به اسکریپت‌های شخص ثالثی که از دامنه‌هایی مانند facebook.net یا twitter.com می‌آیند نسبت دهید.
منوی اصلی جدید و اختصاصی
برای شلوغ کردن نوار ابزار اصلی، کشو، تنظیمات و نمادهای اتصال را به یک منوی اصلی اختصاصی جدید منتقل کرده‌ایم.
به طور خاص اتصال بسیار ساده تر شد. به جای فشار طولانی روی نماد قبلی، هر موقعیت اتصال نماد خود را دارد.
علاوه بر اتصال، جستجوی فایل دسترسی سریع، میانبرها و راهنما را اضافه کرده ایم (که به صفحه اصلی جدید ما منتهی می شود).
DevTools را از طریق نکات ابزار بهبود یافته کشف کنید
ما دکمه‌های زیادی در DevTools داریم و می‌دانیم که همه آنها به تنهایی قابل توضیح نیستند. ما اکنون با جایگزین کردن راهنمای ابزار بومی سیستم با نکات ابزار سفارشی و سازگار با پلتفرم، کشف کنش‌ها و میانبرهای آنها را آسان‌تر کرده‌ایم.
نکات ابزار جدید بسیار سریعتر ظاهر می شوند و شامل میانبرهای صفحه کلید (در صورت وجود) می شوند.
ایجاد پروفایل های throttling شبکه سفارشی
اگر گزینه‌های پیش‌فرض برای Network Throttler برای موارد استفاده شما بسیار محدود است، و به گزینه "Conference WiFi" نیاز دارید یا، به خاطر نوستالژی، می‌خواهید به مدرسه قدیمی بروید و خط "110 Baud" را شبیه‌سازی کنید، من خوب هستم. خبر برای شما ما یک پانل تنظیمات جدید اضافه کرده ایم که به شما امکان می دهد هر یک از این کارها را انجام دهید.
پالت های رنگی خودکار، مواد و سفارشی
چه بخواهید رنگ های جادویی را بازسازی کنید یا با یک پالت رنگ موجود کار کنید، Colorpicker بهبود یافته به شما کمک می کند تا یک پالت رنگ ثابت برای سایت خود انتخاب کنید.
با کلیک بر روی نماد سوئیچر کوچک در کنار پالت، می توانید یکی از موارد زیر را انتخاب کنید:
- رنگ‌های صفحه - این پالت به‌طور خودکار از رنگ‌هایی که در CSS شما پیدا می‌کنیم تولید می‌شود، و اگر در حال گسترش یک سایت موجود هستید، آن را به گزینه‌ای عالی تبدیل می‌کند.
- طراحی متریال – پالت متریال دیزاین رنگ های زیبایی را ارائه می دهد و انتخاب ایده آلی برای شروع یک پروژه جدید است. در حال حاضر همه رنگ های اصلی را خواهید یافت، اما ما به زودی همه رنگ ها را به آن اضافه می کنیم.
- سفارشی - این زمین بازی خودتان است. با انتخاب یکی در انتخابگر، رنگ های جدید را اضافه کنید، سپس روی نماد "plus" در کنار پالت کلیک کنید. با کشیدن آنها به اطراف مرتب کنید و برای نمایش گزینه‌های بیشتر، مانند حذف، کلیک راست کنید.
به ما بگویید چه فکر می کنید و چگونه می توانیم داستان رنگ را بیشتر گسترش دهیم.
بهترین بقیه
- درخواست‌هایی که با استفاده از fetch() API انجام می‌شوند اکنون در پنل شبکه نشان داده می‌شوند
- چیدمان خودکار پانل تضمین می کند که وقتی ابزار DevTools خود را تغییر اندازه می دهید
پانل ها با محدودیت های فضایی جدید سازگار می شوند. - Inspect Element & Device Mode دارای مجموعه ای از نمادهای جدید است.
- ویژگی ها در پانل DOM اکنون رنگ های متفاوتی دارند حتی زمانی که گره هایلایت شده است. (آنها قبلاً همه سفید بودند.)
- عناصر پنهان (که با فشار دادن "h" روی یک گره DOM انتخاب شده فعال می شوند) اکنون یک نشانگر دایره خاکستری در سمت چپ نشان می دهند و نقاط شکست DOM نیز همین کار را با یک دایره آبی انجام می دهند. (این مشابه با اندیکاتورهای نارنجی رنگی است که از قبل برای تحمیل حالت عنصری مانند :hover داریم).
مثل همیشه، نظر خود را از طریق توییتر یا نظرات زیر به ما اطلاع دهید و اشکالات را به crbug.com/new ارسال کنید.
تا ماه آینده!
پل باکاوس و تیم DevTools