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

Kayce Basques

سلام! در اینجا به ویژگی‌های جدید Chrome DevTools در کروم ۷۶ می‌پردازیم.

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

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

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

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

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

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

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

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

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

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

پیام‌های WebSocket در خروجی‌های HAR

هنگام خروجی گرفتن از یک فایل HAR از پنل Network برای به اشتراک گذاشتن گزارش‌های شبکه با همکارانتان، فایل 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 #496006 ارسال کنید.

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

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

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

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

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

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

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

همچنین برای ردیابی میزان استفاده از حافظه به صورت بلادرنگ، به Performance Monitor مراجعه کنید.

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

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

بخش Service Workers اکنون شماره پورت‌ها را در عنوان خود قرار می‌دهد تا پیگیری اینکه در حال اشکال‌زدایی کدام Service Worker هستید، آسان‌تر شود.

شکل ۶. پورت‌های سرویس ورکر.

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

بررسی رویدادهای Background Fetch و Background Sync

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

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

شکل ۷. پنجره‌ی واکشی پس‌زمینه. نسخه آزمایشی از ماکسیم سالنیکوف .

شکل ۸. پنجره همگام‌سازی پس‌زمینه.

نظرات خود را در مورد این ویژگی‌های جدید به شماره Chromium #927726 ارسال کنید.

عروسک‌گردان برای فایرفاکس

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

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

برای کسب اطلاعات بیشتر در مورد Puppeteer و Puppeteer برای فایرفاکس، به سخنرانی جوئل و آندری در Google I/O 2019 در مورد Puppeteer نگاهی بیندازید. معرفی فایرفاکس حدود ساعت ۴:۰۵ اتفاق می‌افتد.

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

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

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

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

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

قابلیت‌های جدید در DevTools

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