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

کیسی باسکی

خوش آمدید! ویژگی‌های جدیدی که در Chrome 63 به DevTools می‌آیند عبارتند از:

برای کسب اطلاعات بیشتر، ویدیوی زیر را بخوانید یا تماشا کنید!

پشتیبانی از اشکال زدایی از راه دور چند مشتری

اگر تا به حال سعی کرده اید یک برنامه را از یک IDE مانند VS Code یا WebStorm اشکال زدایی کنید، احتمالاً متوجه شده اید که باز کردن DevTools جلسه اشکال زدایی شما را به هم می زند. این مشکل همچنین استفاده از DevTools را برای اشکال زدایی تست های WebDriver غیرممکن کرد.

از Chrome 63، DevTools اکنون از چندین کلاینت اشکال زدایی راه دور به صورت پیش فرض پشتیبانی می کند، بدون نیاز به پیکربندی.

اشکال‌زدایی از راه دور چند مشتری شماره 1 محبوب‌ترین مشکل DevTools در crbug.com و شماره 3 در کل پروژه Chromium بود. پشتیبانی چند مشتری نیز فرصت‌های جالبی را برای ادغام ابزارهای دیگر با DevTools یا استفاده از آن ابزارها به روش‌های جدید باز می‌کند. به عنوان مثال:

  • کلاینت‌های پروتکل مانند ChromeDriver یا افزونه‌های اشکال‌زدایی کروم برای VS Code و Webstorm، و کلاینت‌های WebSocket مانند Puppeteer، اکنون می‌توانند همزمان با DevTools اجرا شوند.
  • دو کلاینت مجزای پروتکل WebSocket، مانند Puppeteer یا chrome-remote-interface ، اکنون می توانند به طور همزمان به یک برگه متصل شوند.
  • برنامه‌های افزودنی Chrome با استفاده از chrome.debugger API اکنون می‌توانند همزمان با DevTools اجرا شوند.
  • اکنون چندین برنامه افزودنی Chrome مختلف می توانند از API chrome.debugger در یک برگه به ​​طور همزمان استفاده کنند.

فضاهای کاری 2.0

فضاهای کاری برای مدتی در DevTools وجود داشته است. این ویژگی به شما امکان می دهد از DevTools به عنوان IDE خود استفاده کنید. شما تغییراتی را در کد منبع خود در DevTools ایجاد می کنید و تغییرات در نسخه محلی پروژه شما در سیستم فایل شما باقی می ماند.

Workspace 2.0 از 1.0 ساخته شده است، UX مفیدتری را اضافه می کند و نقشه برداری خودکار کدهای ترجمه شده را بهبود می بخشد. این ویژگی در ابتدا قرار بود کمی پس از اجلاس توسعه دهندگان کروم (CDS) 2016 منتشر شود، اما تیم برای حل برخی از مشکلات آن را به تعویق انداخت.

بخش «نویسندگی» (حدود ساعت 14:28) بحث DevTools از CDS 2016 را بررسی کنید تا Workspaces 2.0 را در عمل ببینید.

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

در Chrome 63، پانل حسابرسی دارای 4 ممیزی جدید است:

  • ارائه تصاویر به عنوان WebP.
  • از تصاویر با نسبت ابعاد مناسب استفاده کنید.
  • از کتابخانه های جاوا اسکریپت frontend با آسیب پذیری های امنیتی شناخته شده خودداری کنید.
  • خطاهای مرورگر ثبت شده در کنسول.

برای یادگیری نحوه استفاده از پنل حسابرسی برای بهبود کیفیت صفحات خود، Run Lighthouse را در Chrome DevTools ببینید.

برای کسب اطلاعات بیشتر در مورد پروژه ای که پنل حسابرسی را تقویت می کند، به Lighthouse مراجعه کنید.

اعلان‌های فشاری را با داده‌های سفارشی شبیه‌سازی کنید

شبیه سازی اعلان های فشار برای مدتی در DevTools وجود داشته است، با یک محدودیت: شما نمی توانید داده های سفارشی ارسال کنید. اما با آمدن جعبه متن Push جدید به بخش Service Worker در Chrome 63، اکنون می توانید. اکنون آن را امتحان کنید:

  1. به Simple Push Demo بروید.
  2. روی Enable Push Notifications کلیک کنید.
  3. هنگامی که Chrome از شما می خواهد اعلان ها را مجاز کنید، روی Allow کلیک کنید.
  4. DevTools را باز کنید.
  5. به بخش Service Workers بروید.

  6. در کادر متن Push چیزی بنویسید.

    شبیه سازی اعلان فشار با داده های سفارشی.

    شکل 1 . شبیه سازی یک اعلان فشار با داده های سفارشی از طریق کادر متنی Push در بخش Service Worker

  7. برای ارسال اعلان روی Push کلیک کنید.

    اعلان فشار شبیه سازی شده

    شکل 2 . اعلان فشار شبیه سازی شده

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

راه‌اندازی رویدادهای همگام‌سازی پس‌زمینه نیز مدتی است که در بخش Service Workers وجود دارد، اما اکنون می‌توانید برچسب‌های سفارشی ارسال کنید:

  1. DevTools را باز کنید.
  2. به بخش Service Workers بروید.
  3. مقداری متن را در کادر متن Sync وارد کنید.
  4. روی همگام سازی کلیک کنید.

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

شکل 3 . پس از کلیک بر روی همگام‌سازی ، DevTools یک رویداد همگام‌سازی پس‌زمینه را با update-content برچسب سفارشی برای سرویس‌کار ارسال می‌کند.

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

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

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

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

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

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