قطعه گم شده در Chrome DevTools

توسعه وب از زمان آغاز به کار راه طولانی را طی کرده است و یکی از ابزارهایی که تأثیر قابل توجهی داشته است Chrome DevTools است. این انقلاب چگونه توسعه دهندگان وب، QAs و توسعه دهندگان باطن را توسعه، آزمایش و اشکال زدایی برنامه های وب را ایجاد کرده است. امروزه نمی توانید تصور کنید که برنامه های وب بدون دسترسی به Chrome Devtools بسازید. دید کاملی را در مورد آنچه در داخل برنامه وب شما اتفاق می‌افتد، از HTML DOM در هر نقطه مشخص گرفته تا درخواست‌های شبکه که برنامه شما اجرا می‌شود، فراهم می‌کند.

Chrome DevTools همچنین اطلاعات تأخیر را برای هر درخواست API/شبکه، اطلاعات بینش عملکرد، اشکال‌زدایی گام به گام کد منبع شما و یک کنسول تعاملی ارائه می‌کند. اگر با Chrome DevTools تازه کار هستید، در اینجا یک راهنمای مبتدی برای ویژگی های Chrome DevTools آورده شده است.

با این حال، توجه به این نکته مهم است که در حالی که Chrome DevTools همه چیزهایی را که برای مشاهده در برنامه وب خود نیاز دارید ارائه می دهد، وقتی یک API 500 می دهد، بسیاری از چیزها را از دست می دهد، مانند آزمایش کد شما، کروم هیچ راهی برای لغو کد وضعیت یا حتی پاسخ های API ارائه نمی دهد.

چرا تغییرات HTTP اهمیت دارد؟

با داشتن توانایی تغییر درخواست‌ها/پاسخ‌های HTTP، توسعه‌دهندگان frontend می‌توانند وابستگی خود را به محیط پیچیده برای آزمایش کد خود کاهش دهند یا وابستگی به توسعه‌دهندگان باطن را برای پاسخ‌های API کاهش دهند. در اینجا برخی از مواردی است که توسعه دهندگان فرانت اند می توانند از تغییر درخواست های HTTP بهره ببرند.

👉 بارگیری بسته های محلی JS/CSS به طور مستقیم در سایت های تولید

با بارگیری کد JS/CSS به صورت محلی، توسعه دهندگان وب نیازی به راه اندازی کل سایت روی دستگاه خود ندارند. گاهی اوقات حتی امکان پذیر نیست، به خصوص زمانی که کد شما در سایت های مشتریان شما مستقر است.

👉 اصلاح سرصفحه های درخواست و پاسخ

توانایی تغییر هدرهای درخواست و پاسخ HTTP موارد استفاده متعددی مانند افزودن سرصفحه های احراز هویت، آزمایش خط مشی امنیت محتوا، اشکال زدایی مشکلات CORS، تغییر پرچم های ویژگی و غیره را باز می کند.

👉 تست استرس برنامه های وب

تست استرس برنامه‌های وب مستلزم آن است که کد شما در برابر همه سناریوهای API مانند پاسخ‌های بد/نامعتبر، پاسخ‌های خالی، پاسخ‌های بزرگ API، خرابی‌های API، تأخیرهای API و غیره آزمایش شود. داشتن توانایی شبیه‌سازی تأخیرهای مصنوعی یا ساخت API و شخص ثالث شکست اسکریپت ها می تواند به شما در آزمایش بسیاری از سناریوهای منفی کمک کند. در اینجا یک موضوع خوب Reddit در مورد روش های مختلف برای شبیه سازی تاخیرهای مصنوعی وجود دارد.

موارد استفاده بیشتری مانند بازگرداندن یک پاسخ ثابت برای یک API، نوشتن کد frontend زمانی که API آماده نیست، ارسال برخی پارامترهای جستجوی اشکال زدایی، لغو محتوای اسکریپت، و آزمایش نسخه های مختلف یک API وجود دارد، اما نتیجه این است که Chrome DevTools بسیار محدود است. قابلیت و به همین دلیل است که توسعه دهندگان باید از روش های ناکارآمد برای حل این موارد استفاده استفاده کنند.

معرفی Requestly – پروکسی HTTP منبع باز برای رهگیری و اصلاح درخواست ها

Requestly یک پروکسی سبک منبع باز است که به عنوان افزونه مرورگر و برنامه دسکتاپ موجود است که به توسعه دهندگان و QAها اجازه می دهد تا درخواست های شبکه را رهگیری و اصلاح کنند. Requestly توسط بیش از 180000 توسعه دهنده در بیش از 5000 سازمان در سراسر جهان استفاده می شود.

⚡️ Requestly قدرت Charles Proxy & Fiddler را بدون نگرانی در مورد مسائل مربوط به پروکسی، SSL و VPN به مرورگر می آورد.

Requestly مجموعه کاملی از تغییرات درخواست و پاسخ HTTP را از طریق انواع قوانین مختلف ارائه می دهد بازنویسی URL، بارگذاری درخواست، بدنه پاسخ API، هدرهای درخواست و پاسخ و بسیاری موارد دیگر که از انواع قوانین مختلف در محصول استفاده می کنند.

بنابراین، هنگامی که Requestly را نصب کردید، فقط به رابط قوانین بروید، روی دکمه ایجاد قانون جدید کلیک کنید و نوع قانون صحیح را برای مورد استفاده خود انتخاب کنید. علاوه بر این، قوانین Requestly در چندین مرورگر و دستگاه و می توانید با هم تیمی ها و مشتریان خود در یک فضای کاری مشترک همکاری کنید. Requestly همچنین یک میزبان ابری ارائه می دهد سرور ساختگی برای ایجاد نقاط پایانی ساختگی و یک سرور فایل برای میزبانی فایل های ثابت مانند اسکریپت ها و فایل های JSON.

Requestly چگونه کار می کند؟

برنامه افزودنی مرورگر Requestly از Chrome webRequest API (MV2) و chrome declarativeNetRequest API (MV3) استفاده می کند تا از اکثر تغییرات پشتیبانی کند. برای نادیده گرفتن بار و بدنه درخواست API، Requestly نمونه اولیه XHR و واکشی اشیاء را لغو می‌کند و رهگیر خود را ثبت می‌کند.

برنامه Desktop Requestly یک سرور محلی (معروف به پروکسی) را روی آن اجرا می کند لوکال هاست: 8171 و گزینه هایی را برای اتصال مرورگرها و دستگاه های تلفن همراه نصب شده به پروکسی محلی ارائه می دهد. ماژول پروکسی یک پروکسی mitm مبتنی بر گره ساده است که در https://github.com/requestly/requestly-proxy موجود است. یک ماژول پردازشگر قانون جداگانه تغییرات تعریف شده توسط کاربر را اعمال می کند.

کد منبع کامل در Github در دسترس است – https://github.com/requestly/requestly

نتیجه

با توسعه مداوم جامعه وب، توسعه دهندگان وب همچنین به ابزارهای مدرنی نیاز دارند تا نیازهای خود را برآورده کنند و آنها را بهره وری بیشتر کنند. متأسفانه مواردی وجود دارد که هنوز در Chrome DevTools در دسترس نیستند و این یکی از دلایل وجود افزونه های مرورگر است. درخواست یک شکاف در ابزار توسعه Chrome را پر می‌کند که درخواست‌ها و پاسخ‌های شبکه را بدون دردسر رسیدگی به مشکلات VPN، پروکسی یا SSL اصلاح می‌کند.

در ابتدا منتشر شد https://sachinjain.hashnode.dev.