این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Kayce Basques

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

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

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

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

شکل 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 وجود داشته است. دکمه های قابل کشف بیشتر تغییر جدید هستند.

دکمه های جدید HAR

شکل 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 را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
توییت در @ChromeDevTools .
نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.