دستورات پروتکل ابزار توسعه دهنده کروم (CDP) خود را با ویرایشگر دستور جدید به طور کارآمد بسازید

هادرین ژوبرت

Chrome DevTools Protocol (CDP) یک پروتکل اشکال زدایی از راه دور (API) است که به توسعه دهندگان اجازه می دهد با مرورگر Chrome در حال اجرا ارتباط برقرار کنند. Chrome DevTools از CDP برای کمک به بررسی وضعیت مرورگر، کنترل رفتار آن و جمع‌آوری اطلاعات اشکال‌زدایی استفاده می‌کند. همچنین می‌توانید افزونه‌های Chrome را بسازید که از CDP استفاده می‌کنند.

به عنوان مثال، این یک دستور CDP است که یک قانون جدید را با ruleText داده شده در یک stylesheet با styleSheetId داده شده، در موقعیتی که توسط location مشخص شده است، درج می کند.

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

برگه کشوی مانیتور پروتکل راهی برای ارسال درخواست‌های CDP و مشاهده تمام درخواست‌ها و پاسخ‌های CDP که DevTools ارسال و دریافت می‌کند، در اختیار شما قرار می‌دهد.

نوار خط فرمان در پایین مانیتور پروتکل.

قبلاً ساختن فرمان با دست دشوار بود، به خصوص فرمانی با پارامترهای زیادی. نه تنها باید حواستان به باز کردن و بستن پرانتزها و علامت های نقل قول بود، بلکه باید پارامترهای فرمان را نیز به خاطر بسپارید که به نوبه خود باعث می شود اسناد CDP را جستجو کنید.

برای حل این مشکل، DevTools یک ویرایشگر CDP جدید معرفی کرد که اهداف اصلی آن عبارتند از:

  • تکمیل خودکار دستورات با ارائه لیستی از دستورات موجود از طریق ویژگی تکمیل خودکار، ورودی دستور CDP خود را ساده کنید.
  • پر کردن خودکار پارامترهای فرمان نیاز به بررسی اسناد CDP برای لیست پارامترهای فرمان موجود را کاهش دهید.
  • تایپ پارامتر را ساده کنید . فقط باید مقادیر پارامترهایی را که می خواهید ارسال کنید پر کنید.
  • ویرایش و ارسال مجدد . با سرعت بخشیدن به تغییر یک دستور CDP، سرعت نمونه سازی را بهبود بخشید.

حال، بیایید نگاهی بیندازیم به آنچه این ویرایشگر جدید ارائه می دهد، و چگونه می توانید از آن استفاده کنید!

ویژگی تکمیل خودکار

منوی کشویی تکمیل خودکار

یک ویژگی تکمیل خودکار اکنون نوار ورودی فرمان را نیرو می دهد. این به شما کمک می کند تا نام دستورات CDP را که به آنها دسترسی دارید بنویسید. این می تواند برای دستوراتی که پارامترها را قبول نمی کنند بسیار مفید باشد.

پارامترهای رشته و عدد

با این ویرایشگر جدید، اکنون می توانید به راحتی مقادیر پارامترهای اولیه را ویرایش کنید. برای باز کردن ویرایشگر، روی آن کلیک کنید پنل سمت چپ را باز کنید. نماد کنار ورودی فرمان

پس از وارد کردن نام فرمان، ویرایشگر به طور خودکار پارامترهای مربوطه را به شما نشان می دهد. برای اینکه بدانید چه پارامترهایی با چه دستوراتی مطابقت دارند، نیازی به جستجوی اسناد ندارید. علاوه بر این، ویرایشگر پارامترها را به ترتیب مشخصی نمایش می دهد: پارامترهای اجباری ابتدا (قرمز) و پارامترهای اختیاری بعد (به رنگ آبی).

برای افزودن یک مقدار به یک پارامتر اختیاری، نشانگر را روی نام آن ببرید و روی دکمه + کلیک کنید. برای بازنشانی پارامتر به حالت تعریف نشده، روی دکمه Reset to default مقدار کلیک کنید.

دکمه های + و «بازنشانی به مقدار پیش فرض».

پارامترهای Enum و Boolean

هنگام ویرایش پارامترهای enum یا boolean، یک منوی کشویی خواهید دید که مجموعه ای از مقادیر بالقوه (برای enums) یا گزینه مستقیم true یا false برای booleans را ارائه می دهد. این ویژگی امکان تایپ مقدار اشتباه برای پارامترهای enum را کاهش می دهد و دقت و سادگی را حفظ می کند.

منوهای کشویی boolean و enum.

پارامترهای آرایه

برای پارامترهای آرایه، می توانید به صورت دستی مقادیری را به آرایه اضافه کنید. ماوس را روی ردیف پارامتر نگه دارید و روی دکمه + کلیک کنید.

دکمه + که یک آیتم آرایه را اضافه می کند.

برای حذف یک به یک آیتم های آرایه، روی دکمه bin کنار آیتم ها کلیک کنید. همچنین می توانید تمام پارامترها را از آرایه با دکمه بلوک پاک کنید. در این حالت، پارامتر آرایه به [] بازنشانی می‌شود.

دکمه‌های «حذف پارامتر» و «بازنشانی به پیش‌فرض».

پارامترهای شی

وقتی دستوری را وارد می‌کنید که پارامترهای شی را می‌پذیرد، ویرایشگر کلیدهای این شی را فهرست می‌کند و می‌توانید مقادیر آنها را مستقیماً ویرایش کنید. این برای همه انواع پارامترهای تو در تو کار می کند.

پارامترهای تو در تو

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

آیا تا به حال در مورد هدف یک پارامتر یا دستور نامطمئن بوده اید؟ اکنون، می‌توانید ماوس را روی یک فرمان یا پارامتر نگه دارید و یک راهنمای ابزار توصیفی با پیوندی به مستندات آنلاین کامل می‌شود.

راهنمای ابزار توصیفی که وقتی ماوس را روی یک فرمان می‌برید ظاهر می‌شود.

قبل از ارسال پارامترهای نادرست هشدار داده شود

قبلاً، اگر نمی‌دانستید که آیا مقدار پارامتر از نوع صحیح است و باید منتظر بمانید تا پاسخ خطا را بخوانید، این ویرایشگر جدید برای شما مناسب است. اگر پارامتر نتواند مقداری را که وارد کرده‌اید قبول کند، خطاهای بلادرنگ را به شما نشان می‌دهد.

نماد خطا در کنار پارامتری با مقدار نادرست.

یک فرمان را دوباره ارسال کنید

اگر لازم است پارامتری از دستوری را که به تازگی ارسال کرده اید تغییر دهید، لازم نیست دوباره آن را تایپ کنید. برای ویرایش و ارسال مجدد دستور، روی یک آیتم در دیتاگرید کلیک راست کرده و از منوی کشویی Edit and resend را انتخاب کنید. این به طور خودکار ویرایشگر CDP را باز می کند و آن را با دستوری که انتخاب کرده اید از قبل پر می کند.

منوی کشویی یک فرمان در دیتاگرید با گزینه «ویرایش و ارسال مجدد».

یک دستور را به فرمت JSON کپی کنید

برای کپی کردن دستور CDP با فرمت JSON در کلیپ بورد خود، روی آن کلیک کنید کپی کنید. نماد کپی در سمت چپ نوار ابزار. علاوه بر این، به خاطر داشته باشید که اگر دستوری را مستقیماً در نوار ورودی وارد کنید، ویرایشگر را به طور یکپارچه پر می کند و برعکس.

نتیجه گیری

هدف تیم DevTools از طراحی این ویرایشگر جدید CDP، ساده کردن تایپ دستورات CDP بود. ویرایشگر جدید همچنین می تواند برای مشاهده پارامترها در کنار مستندات استفاده شود و راه آسان تری برای ارسال دستورات CDP به شما ارائه دهد.

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

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

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

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