چیزهای جدید در DevTools (Chrome 76)

Kayce Basques

سلام! در اینجا موارد جدید در Chrome DevTools در Chrome 76 آمده است.

تکمیل خودکار با مقادیر CSS

هنگام اضافه کردن اعلان های سبک به گره DOM، گاهی اوقات مقدار اعلان راحت تر از نام اعلان به خاطر سپردن است. به عنوان مثال، هنگام ایجاد یک گره <p> پررنگ، ممکن است به خاطر سپردن مقدار bold راحت تر از نام font-weight باشد. رابط کاربری تکمیل خودکار پنجره Style اکنون از مقادیر CSS پشتیبانی می کند. اگر ارزش کلمه کلیدی مورد نظر خود را به خاطر می آورید، اما نمی توانید نام ویژگی را به خاطر بسپارید، مقدار را تایپ کنید و تکمیل خودکار به شما کمک می کند نام مورد نظر خود را پیدا کنید.

شکل 1. پس از تایپ bold پنجره Styles به صورت خودکار به font-weight: bold .

بازخورد خود را درباره این ویژگی جدید به شماره 931145 Chromium ارسال کنید.

یک رابط کاربری جدید برای تنظیمات شبکه

پنل Network قبلاً با مشکل قابلیت استفاده مواجه بود که در آن گزینه‌هایی مانند منوی throttling زمانی که پنجره DevTools باریک بود غیرقابل دسترسی بود. برای رفع این مشکل و شلوغ کردن پنل شبکه، چند گزینه کمتر استفاده شده در پشت تنظیمات شبکه جدید منتقل شده اند. پنجره

شکل 2. تنظیمات شبکه.

گزینه های زیر به تنظیمات شبکه منتقل شده اند: از ردیف های درخواست بزرگ ، گروه بر اساس فریم ، نمایش نمای کلی ، گرفتن عکس از صفحه استفاده کنید. شکل 3 مکان های قدیمی را به مکان های جدید ترسیم می کند.

شکل 3. نگاشت مکان های قدیمی به مکان های جدید.

درباره این تغییر رابط کاربری به شماره 892969 Chromium بازخورد ارسال کنید.

پیام های WebSocket در صادرات HAR

هنگام صادرات یک فایل HAR از پانل شبکه برای اشتراک‌گذاری گزارش‌های شبکه با همکارانتان، فایل HAR شما اکنون شامل پیام‌های WebSocket است. ویژگی _webSocketMessages با زیرخط شروع می شود تا نشان دهد که یک فیلد سفارشی است.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

بازخورد خود را درباره این ویژگی جدید به شماره 496006 Chromium ارسال کنید.

دکمه های واردات و صادرات HAR

با Export All As HAR With Content جدید، گزارش های شبکه را با سهولت بیشتری با همکاران به اشتراک بگذارید و فایل HAR را وارد کنید دکمه ها واردات و صادرات HAR برای مدتی در DevTools وجود داشته است. دکمه های قابل کشف بیشتر تغییر جدید هستند.

شکل 4. دکمه های HAR جدید.

درباره این تغییر رابط کاربری به Chromium شماره 904585 بازخورد ارسال کنید.

مصرف کل حافظه در زمان واقعی

پانل حافظه اکنون کل میزان مصرف حافظه را در زمان واقعی نشان می دهد.

شکل 5. پایین پنل Memory نشان می دهد که صفحه در کل از 43.4 مگابایت حافظه استفاده می کند. 209 کیلوبایت بر ثانیه نشان می دهد که کل مصرف حافظه 209 کیلوبایت در ثانیه افزایش می یابد.

همچنین برای ردیابی میزان مصرف حافظه در زمان واقعی به نمایشگر عملکرد مراجعه کنید.

بازخورد خود را درباره این ویژگی جدید به شماره 958177 Chromium ارسال کنید.

شماره پورت ثبت نام کارگر خدمات

بخش Service Workers اکنون شامل شماره پورت ها در عناوین خود می شود تا ردیابی اینکه کدام سرویس دهنده را در حال رفع اشکال هستید آسان تر می کند.

شکل 6. پورت های کارگر سرویس.

درباره این تغییر رابط کاربری به Chromium شماره 601286 بازخورد ارسال کنید.

رویدادهای واکشی پس‌زمینه و همگام‌سازی پس‌زمینه را بررسی کنید

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

به پنل برنامه بروید، برگه Background Fetch یا Background Sync را باز کنید، سپس روی Record کلیک کنید برای شروع ثبت رویدادها برای مشاهده اطلاعات بیشتر در مورد یک رویداد کلیک کنید.

شکل 7. صفحه واکشی پس زمینه. نسخه ی نمایشی ماکسیم سالنیکوف .

شکل 8. صفحه همگام سازی پس زمینه.

بازخورد خود را درباره این ویژگی‌های جدید به شماره ۹۲۷۷۲۶ Chromium ارسال کنید.

بازی عروسکی برای فایرفاکس

Puppeteer برای فایرفاکس یک پروژه آزمایشی جدید است که به شما امکان می دهد فایرفاکس را با API Puppeteer خودکار کنید. به عبارت دیگر، اکنون می توانید فایرفاکس و کرومیوم را با همان Node API که در ویدیوی زیر نشان داده شده است، خودکار کنید.

پس از اجرای node example.js ، فایرفاکس باز می شود و page متن در کادر جستجو در سایت مستندات Puppeteer درج می شود. سپس همان کار در Chromium تکرار می شود.

برای کسب اطلاعات بیشتر در مورد Puppeteer و Puppeteer برای فایرفاکس، سخنرانی Joel and Andrey از Google I/O 2019 توسط Puppeteer را بررسی کنید. اعلام فایرفاکس حدود ساعت 4:05 رخ می دهد.

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

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

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

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

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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