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

کیسی باسکی

در اینجا موارد جدید در DevTools در Chrome 73 آمده است.

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

نقاط ورود

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

برای افزودن نقطه ورود:

  1. روی شماره خطی که می‌خواهید Logpoint را اضافه کنید کلیک راست کنید.

    اضافه کردن Logpoint

    شکل 1 . اضافه کردن Logpoint

  2. افزودن نقطه ورود را انتخاب کنید. ویرایشگر نقطه شکست ظاهر می شود.

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

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

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

    تایپ عبارت Logpoint

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

    نکته هنگام خروج از یک متغیر (مثلا TodoApp )، متغیر را در یک شی (مثلا {TodoApp} ) بپیچید تا نام و مقدار آن در کنسول خارج شود. برای کسب اطلاعات بیشتر در مورد این نحو، به خلاصه نویسی Always Log Objects and Object Property Value مراجعه کنید.

  4. Enter را فشار دهید یا در خارج از Breakpoint Editor کلیک کنید تا ذخیره شود. نشان نارنجی در بالای شماره خط نشان دهنده Logpoint است.

    نشان نارنجی Logpoint در خط 174

    شکل 4 . نشان نارنجی Logpoint در خط 174

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

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

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

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

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

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

بازرسی یک گره

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

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

  1. Inspect را کلیک کنید بازرسی یک گره .

    نکته ماوس را روی 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 متن کامل فایل است.

در مثال بالا، محدوده 0 تا 21 با body { margin: 1em; } و محدوده 45 تا 67 مربوط به h1 { color: #317EFB; } . به عبارت دیگر، اولین و آخرین قوانین مورد استفاده قرار گرفت و از وسط استفاده نشد.

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

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

    منوی فرمان

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

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

    نمایش پوشش

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

    تب Coverage باز می شود.

    برگه پوشش

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

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

  4. روی صادرات کلیک کنید صادرات برای صادر کردن داده ها به عنوان یک فایل JSON.

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

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

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

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

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

تمرکز بر یک پیوند

شکل 11 . تمرکز بر یک پیوند

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

تمرکز یک لینک دیگر

شکل 12 . تمرکز یک لینک دیگر

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

تمرکز یک پیام کامل

شکل 13 . تمرکز یک پیام کامل

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

گسترش یک رد پشته جمع شده

شکل 14 . گسترش یک رد پشته جمع شده

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

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

خط نسبت کنتراست AAA در Color Picker

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

خط AA (بالا) و خط AAA (پایین)

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

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

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

برای یادگیری نحوه دسترسی به این ویژگی ، نسبت کنتراست را در انتخابگر رنگ ببینید.

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

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

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

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

    منوی فرمان

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

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

    تب Sensors

    شکل 17 . تب Sensors

  3. در بخش موقعیت جغرافیایی روی Manage کلیک کنید. Settings > Geolocations باز می شود.

    برگه مکان‌های جغرافیایی در تنظیمات

    شکل 18 . برگه مکان‌های جغرافیایی در تنظیمات

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

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

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

    شکل 19 . اضافه کردن یک موقعیت جغرافیایی سفارشی

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

تاشو کد

پنل های Sources و Network اکنون از تاشو کد پشتیبانی می کنند.

خطوط 54 تا 65 تا شده است

شکل 20 . خطوط 54 تا 65 تا شده است

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

  1. F1 را فشار دهید تا تنظیمات باز شود.
  2. در تنظیمات > تنظیمات > منابع ، تاشو کد را فعال می کند.

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

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

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

برگه پیام ها

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

تب پیام ها

شکل 21 . تب پیام ها

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

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

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

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

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

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

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