اخبار DevTools، به همان اندازه که تازه می شود
اولین مورد خبری در این پست کمی متا است – این خود این به روز رسانی است! هرازگاهی، اما حداقل یک بار در ماه، آنچه را که در دنیای Chrome DevTools اتفاق می‌افتد، خلاصه می‌کنم.
و وقتی می‌گویم تازه، منظورم این است: در مورد ویژگی‌های جدیدی صحبت خواهم کرد که به تازگی در Chrome Canary وارد شده‌اند، بنابراین اگر ترجیح می‌دهید در سرزمین پایدار بمانید، این نیز جالب است. اما اگر اهل ماجراجویی هستید و می خواهید در اوج بمانید، این پست ها برای شما مناسب هستند. علاوه بر جدیدترین ویژگی‌ها و رفع اشکال‌ها، در پایان هر پست، بخش ضربان قلب انجمن را خواهید دید که بیشترین مشارکت شما، کاربران عزیزمان را نشان می‌دهد.
بدون مقدمه، بیایید به اخبار واقعی بپردازیم.
جدید در DevTools
اسکرین شات های نوار مانند فیلم در شبکه و تایم لاین
همین یک هفته پیش، ما یک ویژگی جدید مهم را از آزمایش خارج کردیم: توانایی گرفتن اسکرین شات از صفحه در هر دو زبانه Network و Timeline.
در پانل شبکه ، روی نماد دوربین کوچک کلیک کنید تا ضبط فریم‌ها فعال شود، سپس صفحه را دوباره بارگیری کنید تا عکس‌برداری آغاز شود. به غیر از اسکرین شات های گرفته شده با ابزارهای دیگر مانند WebPageTest ، ما در حال حاضر فقط فریم هایی را نشان می دهیم که در واقع از رنگ گرفته شده اند.
در حالی که دوبار کلیک کردن بر روی یکی از فریم ها نمای بزرگنمایی شده را نشان می دهد (سپس از فلش های چپ/راست برای پیمایش استفاده کنید)، با نگه داشتن ماوس روی آنها خطوطی در سراسر پانل و جدول زمانی نمایش داده می شود تا دقیقاً چه زمانی فریم گرفته شده است، به شما امکان می دهد با بارگذاری مرتبط شوید. توالی. این باعث می‌شود اشکال‌زدایی مشکلات بارگذاری رایج مانند رندر کردن فونت‌های وب بسیار ساده‌تر شود.
در پانل تایم لاین ، می‌توانید با جابه‌جایی کادر انتخاب «عکس‌های صفحه» در نوار ابزار بالا، گرفتن عکس از صفحه را فعال کنید. در اینجا کارها در مقایسه با پانل شبکه کمی متفاوت است: در این مورد، ما سعی می‌کنیم تا جایی که می‌توانیم - بدون توجه به رنگ‌های واقعی - عکس‌برداری کنیم تا بتوانیم اسکرین‌شات‌های گفته شده را در یک مقیاس زمانی خطی که با ردیف‌های دیگر در ارتباط است رها کنیم. جدول زمانی. به جای نیاز به دوبار کلیک کردن برای نمایش پیش‌نمایش، فریم‌های بزرگنمایی شده در شناور ظاهر می‌شوند.
از آنجایی که این دو از نظر عملکرد و UX کمی ناهماهنگ هستند، می‌خواهیم شما را تشویق کنیم که ویژگی(های) را امتحان کنید و هر گونه بازخوردی را از طریق بلیط در crbug.com/new یا از طریق توییت به @ ارائه دهید. ChromeDevTools .
Throttling شبکه در پنل شبکه
throttling شبکه ، قابلیتی که ما هنگام معرفی حالت دستگاه خود اضافه کردیم، دومین خانه خود را در نوار ابزار پنل شبکه پیدا کرد تا بتوانید روی بهینه سازی شبکه در یک مکان تمرکز کنید.
اگرچه این خانه جدید فقط یک آینه است: هنوز در حالت خارج از دستگاه در دسترس است، زیرا شبیه سازی اتصال بد در هنگام کار بر روی پاسخگو کردن سایت شما بسیار مهم است.
در نهایت، آیا شما یکی از این افراد بیچاره هستید که تعجب کرده اید که چرا اتصال اینترنت شما پس از یک روز طولانی کار قطع شده است، اما متوجه می شوید که فراموش کرده اید که throttling شبکه را غیرفعال کنید؟ تب پانل شبکه اکنون یک نماد هشدار را در صورت فعال بودن throttling شبکه نشان می دهد .
نکته های مختلف
- از آن حلقه های عجیب و غریب در جدول زمانی شبکه متنفر بودید؟ ما هم همینطور. اینها نقاط زمانی هستند که یک فریم (در نوار فیلم جدید) گرفته شده است . اکنون هنگامی که ماوس را نگه می‌دارید به صورت خطوط ظاهر می‌شوند .
- حالت دستگاه اکنون هنگام جابجایی بین دستگاه ها جهت گیری را حفظ می کند
ضربان قلب جامعه
خراب و کثیف با Chrome DevTools
Bret Little این دوره آموزشی زیبا را منتشر کرد که شما را با عملکرد اصلی DevTools آشنا می کند، اما نکات و ترفندهای عمیق زیادی را نیز ارائه می دهد. مطمئناً اطلاعات مفیدی در آن وجود دارد، و اسناد DevTools بیشتر هرگز آسیبی نمی بینند!
یک IDE DevTools…؟!
Kenneth Auchenberg، توسعه‌دهنده وب و علاقه‌مند به DevTools، چند ماه پیش یک برنامه DevTools مستقل و اثبات مفهوم توسعه داد، و به‌نوعی پست وبلاگ او این هفته دوباره اخبار (هکرها) را منتشر کرد.
تبدیل DevTools به یک IDE کامل ایده‌ای سرگرم‌کننده است، ایده‌ای که بسیاری از اعضای تیم ما قبلاً رویای آن را داشته‌اند، اما همچنین می‌تواند پروژه‌ای با ابعاد حماسی باشد.
شما چی فکر میکنید؟ آیا DevTools IDE یک رویا است یا می توانید آن را ببینید؟ چگونه باید به نظر برسد؟ در نظرات به ما اطلاع دهید!
به زودی میبینمت!
پل باکاوس و تیم DevTools