ویژگی‌های جدید در DevTools (نسخه ۷۶ Chrome)

Kayce Basques

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

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

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

.شکل ۱ پس‌از تایپ کردن bold، صفحه «سبک‌ها» به‌طور خودکار به font-weight: bold تکمیل می‌شود.

بازخوردتان را درباره این ویژگی جدید به مشکل Chromium شماره ۹۳۱۱۴۵ ارسال کنید.

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

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

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

گزینه‌های زیر به تنظیمات شبکه منتقل شده‌اند: استفاده از ردیف‌های درخواست بزرگ، گروه‌بندی براساس قاب، نمایش نمای کلی، ضبط نماگرفت. شکل ۳ مکان‌های قدیمی را به مکان‌های جدید نگاشت می‌کند.

شکل ۳.‏ درحال نگاشت مکان‌های قدیمی به مکان‌های جدید.

بازخوردتان را درباره این تغییر واسط کاربر به مشکل 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!"
  }
]
...

بازخوردتان را درباره این ویژگی جدید به مشکل Chromium شماره ۴۹۶۰۰۶ ارسال کنید.

دکمه‌های وارد کردن و صادر کردن HAR

با دکمه‌های جدید صادر کردن همه به‌عنوان HAR با محتوا و وارد کردن فایل HAR ، گزارش‌های شبکه را راحت‌تر با همکاران هم‌رسانی کنید. وارد کردن و صادر کردن HAR مدتی است که در DevTools وجود دارد. دکمه‌های قابل‌شناسایی‌تر تغییر جدیدی هستند.

شکل ۴.‏ دکمه‌های جدید HAR.

بازخوردتان را درباره این تغییر واسط کاربر به مشکل Chromium شماره ۹۰۴۵۸۵ ارسال کنید.

استفاده از حافظه کل هم‌زمان

پانل «حافظه» اکنون کل استفاده از حافظه را به‌طور هم‌زمان نشان می‌دهد.

شکل ۵.‏ پایین پانل «حافظه» نشان می‌دهد که صفحه درمجموع از ۴۳٫۴ مگابایت حافظه استفاده می‌کند. ‫۲۰۹ کیلوبایت/ثانیه نشان می‌دهد که کل استفاده از حافظه ۲۰۹ کیلوبایت در ثانیه افزایش می‌یابد.

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

بازخوردتان را درباره این ویژگی جدید به مشکل Chromium شماره ۹۵۸۱۷۷ ارسال کنید.

شماره‌های درگاه ثبت کارگر خدماتی

اکنون پانل Service Workers شماره‌های درگاه را در عنوان‌هایش لحاظ می‌کند تا راحت‌تر بتوانید تشخیص دهید کدام service worker را اشکال‌زدایی می‌کنید.

شکل ۶.‏ درگاه‌های عامل خدماتی.

بازخوردتان را درباره این تغییر میانای کاربر به مشکل Chromium شماره ۶۰۱۲۸۶ ارسال کنید.

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

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

به پانل برنامه بروید، برگه واکشی پس‌زمینه یا همگام‌سازی پس‌زمینه را باز کنید، سپس روی ضبط کلیک کنید تا ثبت رویدادها شروع شود. روی رویدادی کلیک کنید تا اطلاعات بیشتری درباره آن ببینید.

شکل ۷.‏ The Background Fetch pane. نسخه نمایشی از ماکسیم سالنیکوف.

شکل ۸.‏ The Background Sync pane.

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

Puppeteer برای Firefox

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

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

برای کسب اطلاعات بیشتر درباره Puppeteer و Puppeteer برای Firefox، به سخنرانی Puppeteer توسط Joel و Andrey در Google I/O 2019 مراجعه کنید. اعلامیه Firefox حدود ساعت ۴:۰۵ پخش می‌شود.

بارگیری کانال‌های پیش‌نمایش

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

تماس با تیم Chrome DevTools

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

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

تازه‌های DevTools

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