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

Kayce Basques

در اینجا به ویژگی‌های جدید DevTools در کروم ۷۳ می‌پردازیم.

نسخه ویدیویی این یادداشت‌های انتشار

نقاط ثبت وقایع

از نقاط ثبت وقایع (Logpoints) برای ثبت پیام‌ها در کنسول استفاده کنید، بدون اینکه کد خود را با فراخوانی‌های console.log() شلوغ کنید.

برای اضافه کردن یک نقطه ثبت وقایع:

1. روی شماره خطی که می‌خواهید نقطه ثبت را به آن اضافه کنید، کلیک راست کنید.

   

   شکل ۱. افزودن یک نقطه ثبت وقایع

2. گزینه Add logpoint را انتخاب کنید. ویرایشگر Breakpoint ظاهر می‌شود.

   

   شکل 2. ویرایشگر نقطه شکست

3. در ویرایشگر Breakpoint ، عبارتی را که می‌خواهید در کنسول ثبت شود، وارد کنید.

   

   شکل ۳. تایپ عبارت Logpoint

   نکته! هنگام خروج از یک متغیر (مثلاً TodoApp )، آن را در یک شیء (مثلاً {TodoApp} ) قرار دهید تا نام و مقدار آن در کنسول ثبت شود. برای کسب اطلاعات بیشتر در مورد این سینتکس، به بخش « همیشه اشیاء را ثبت کنید» و «مقدار ویژگی شیء» مراجعه کنید.

4. برای ذخیره، کلید Enter را فشار دهید یا در خارج از ویرایشگر Breakpoint کلیک کنید. نشان نارنجی بالای شماره خط، نشان دهنده نقطه ثبت (Logpoint) است.

   

   شکل ۴. یک نشان نارنجی Logpoint در خط ۱۷۴

دفعه‌ی بعدی که خط اجرا شود، DevTools نتیجه‌ی عبارت Logpoint را در کنسول ثبت می‌کند.

شکل ۵. نتیجه عبارت Logpoint در کنسول

برای گزارش اشکالات یا پیشنهاد بهبودها، به شماره Chromium #700519 مراجعه کنید.

نکات راهنمای دقیق در حالت بازرسی

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

شکل 6. بررسی یک گره

برای بررسی یک گره:

1. روی بازرسی کلیک کنید .

   نکته! برای دیدن میانبر صفحه‌کلید، نشانگر ماوس را روی Inspect نگه دارید.

2. در نمای دید خود، نشانگر ماوس را روی گره نگه دارید.

داده‌های پوشش کد را صادر کنید

داده‌های پوشش کد اکنون می‌توانند به عنوان یک فایل JSON صادر شوند. JSON به این شکل است:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url آدرس اینترنتی فایل CSS یا جاوا اسکریپتی است که DevTools آن را تجزیه و تحلیل کرده است. ranges بخش‌هایی از کد مورد استفاده را توصیف می‌کند. start نقطه شروع برای محدوده‌ای است که استفاده شده است. end نقطه پایان است. text متن کامل فایل است.

در مثال بالا، محدوده ۰ تا ۲۱ مربوط به body { margin: 1em; } و محدوده ۴۵ تا ۶۷ مربوط به h1 { color: #317EFB; } است. به عبارت دیگر، از اولین و آخرین مجموعه قوانین استفاده شده و از مجموعه قوانین وسطی استفاده نشده است.

برای تجزیه و تحلیل میزان کد استفاده شده در بارگذاری صفحه و خروجی گرفتن از داده‌ها:

1. برای باز کردن منوی Command ، کلیدهای Control + Shift + P یا Command + Shift + P (در مک) را فشار دهید.

   

   شکل 7. منوی فرمان

2. شروع به تایپ coverage کنید، نمایش پوشش (Show Coverage) را انتخاب کنید و سپس Enter را بزنید.

   

   شکل 8. نمایش پوشش

   برگه پوشش باز می‌شود.

   

   شکل 9. برگه پوشش

3. روی بارگیری مجدد کلیک کنید DevTools صفحه را مجدداً بارگذاری می‌کند و میزان کد استفاده شده را در مقایسه با میزان کد ارسال شده ثبت می‌کند.

4. روی خروجی کلیک کنید برای خروجی گرفتن از داده‌ها به صورت فایل JSON.

پوشش کد همچنین در Puppeteer، یک ابزار اتوماسیون مرورگر که توسط تیم DevTools نگهداری می‌شود، موجود است. به Coverage مراجعه کنید.

برای گزارش اشکالات یا پیشنهاد بهبودها، به شماره Chromium #717195 مراجعه کنید.

با صفحه کلید در کنسول حرکت کنید

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

فشردن Shift + Tab آخرین پیام (یا نتیجه یک عبارت ارزیابی شده) را در مرکز توجه قرار می‌دهد. اگر پیام حاوی لینک باشد، آخرین لینک ابتدا هایلایت می‌شود. فشردن Enter لینک را در یک تب جدید باز می‌کند. فشردن کلید جهت چپ کل پیام را هایلایت می‌کند ( شکل ۱۳ را ببینید).

شکل ۱۱. متمرکز کردن یک لینک

فشردن کلید جهت‌نمای بالا ، لینک بعدی را در فوکوس قرار می‌دهد.

شکل ۱۲. تمرکز روی یک لینک دیگر

فشار دادن مجدد کلید جهت‌نمای بالا، کل پیام را در مرکز توجه قرار می‌دهد.

شکل ۱۳. تمرکز بر کل یک پیام

فشردن کلید جهت‌نمای راست ، یک رد پشته (یا شیء، آرایه و غیره) را که به صورت فشرده نمایش داده شده است، باز می‌کند.

شکل ۱۴. گسترش یک رد پشته جمع‌شده

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

برای گزارش اشکالات یا پیشنهاد بهبودها، به شماره Chromium #865674 مراجعه کنید.

خط نسبت کنتراست AAA در انتخابگر رنگ

انتخابگر رنگ اکنون یک خط دوم نشان می‌دهد تا مشخص کند کدام رنگ‌ها با توصیه نسبت کنتراست AAA مطابقت دارند. خط AA از زمان کروم ۶۵ وجود داشته است.

شکل ۱۵. خط AA (بالا) و خط AAA (پایین)

رنگ‌های بین دو خط، رنگ‌هایی را نشان می‌دهند که با توصیه AA مطابقت دارند اما با توصیه AAA مطابقت ندارند. وقتی رنگی با توصیه AAA مطابقت دارد، هر چیزی که در همان سمت آن رنگ باشد نیز با توصیه مطابقت دارد. برای مثال، در شکل ۱۵ هر چیزی که زیر خط پایینی باشد AAA است و هر چیزی که بالای خط بالایی باشد حتی با توصیه AA مطابقت ندارد.

نکته! به طور کلی، می‌توانید با افزایش مقدار متنی که مطابق با توصیه AAA است، خوانایی صفحات خود را بهبود بخشید. اگر به هر دلیلی رعایت توصیه AAA امکان‌پذیر نیست، سعی کنید حداقل توصیه AA را رعایت کنید.

برای آشنایی با نحوه‌ی دسترسی به این ویژگی، به بخش نسبت کنتراست در انتخابگر رنگ مراجعه کنید.

برای گزارش اشکالات یا پیشنهاد بهبودها، به شماره Chromium #879856 مراجعه کنید.

لغو موقعیت جغرافیایی سفارشی را ذخیره کنید

تب سنسورها اکنون به شما امکان می‌دهد تا لغوهای موقعیت جغرافیایی سفارشی را ذخیره کنید.

1. برای باز کردن منوی Command ، کلیدهای Control + Shift + P یا Command + Shift + P (در مک) را فشار دهید.

   

   شکل ۱۶. منوی فرمان

2. عبارت sensors را تایپ کنید، گزینه Show Sensors را انتخاب کنید و Enter را بزنید. تب Sensors باز می‌شود.

   

   شکل ۱۷. تب حسگرها

3. در بخش موقعیت جغرافیایی، روی مدیریت کلیک کنید. تنظیمات > موقعیت‌های جغرافیایی باز می‌شود.

   

   شکل ۱۸. تب موقعیت‌های جغرافیایی در تنظیمات

4. روی افزودن مکان کلیک کنید.

5. نام مکان، عرض جغرافیایی و طول جغرافیایی را وارد کنید، سپس روی افزودن کلیک کنید.

   

   شکل ۱۹. افزودن موقعیت جغرافیایی سفارشی

برای گزارش اشکالات یا پیشنهاد بهبودها، به شماره Chromium #649657 مراجعه کنید.

کد تاشو

پنل‌های منابع و شبکه اکنون از قابلیت تا کردن کد پشتیبانی می‌کنند.

شکل ۲۰. خطوط ۵۴ تا ۶۵ تا شده‌اند

برای فعال کردن قابلیت تا کردن کد:

1. برای باز کردن تنظیمات، F1 را فشار دهید.
2. در تنظیمات > تنظیمات برگزیده > منابع ، قابلیت تا کردن کد (Code folding) را فعال کنید.

برای تا کردن یک بلوک کد:

1. ماوس خود را روی شماره خطی که بلوک از آن شروع می‌شود، قرار دهید.
2. کلیک کنید تا شود .

برای گزارش اشکالات یا پیشنهاد بهبودها، به شماره Chromium #328431 مراجعه کنید.

تب پیام‌ها

تب Frames به تب Messages تغییر نام داده است. این تب فقط در پنل Network و هنگام بررسی اتصال وب سوکت در دسترس است.

شکل ۲۱. برگه پیام‌ها

برای گزارش اشکالات یا پیشنهاد بهبودها، به شماره Chromium #802182 مراجعه کنید.

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

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

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

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

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

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

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