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

Kayce Basques

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

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

نقاط ورود

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

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

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

   

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

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

   

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

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

   

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

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

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

   

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

دفعه بعد که خط اجرا می شود، DevTools نتیجه عبارت 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 وجود داشته است.

شکل 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 باز می شود.

   

   شکل 17 . تب Sensors

3. در قسمت Geolocation روی Manage کلیک کنید. Settings > Geolocations باز می شود.

   

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

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

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

   

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

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

تاشو کد

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

شکل 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 استفاده کنید.

• پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.

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

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