9 ویژگی مفید Chrome DevTools برای توسعه دهندگان

ابزارهای توسعه‌دهنده کروم داخلی Google Chrome گنجینه‌ای برای توسعه‌دهندگان وب است. این ابزارها به شما این امکان را می دهند که صفحات وب را در زمان واقعی تغییر دهید، مشکلات را به سرعت شناسایی کنید و روند ایجاد وب سایت های درجه یک را ساده کنید.

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

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

1. جاوا اسکریپت را برای اشکال زدایی آسان تر حذف کنید

کوچک کردن کد یک روش رایج است که با حذف فضاها و تورفتگی های غیر ضروری، اندازه فایل را تا حد زیادی کاهش می دهد. در حالی که این باعث می‌شود فایل‌ها برای مرورگرها کوچک‌تر و سریع‌تر بارگذاری شوند، اما می‌تواند به کابوس خواندن و رفع اشکال برای توسعه‌دهندگان تبدیل شود. Chrome DevTools این فرآیند را با ویژگی unminify خود ساده می کند.

1. Chrome DevTools را باز کنید.
2. حرکت به “منابع” برگه
3. از برگه کاوشگر فایل سمت چپ، یک فایل جاوا اسکریپت کوچک شده را انتخاب کنید.
4. کلیک کنید روی {} نمادی که در پایین ویرایشگر فایل قرار دارد.
5. فایل unminified می شود و خواندن و اشکال زدایی آن آسان تر می شود.

2. ضبط و پخش جریان کاربر

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

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

برای ثبت یک جریان کاربر:

1. Chrome DevTools را باز کنید و به “ضبط” برگه
2. با کلیک کردن روی دکمه ضبط جدید شروع کنید “ایجاد یک ضبط جدید” دکمه.



3. برای شناسایی آسان، یک نام متمایز برای ضبط انتخاب کنید.
4. دکمه ضبط را فشار دهید.
5. انجام اقدامات مورد نظر کاربر، مانند کلیک روی دکمه و پیمایش صفحه. اینها دستگیر خواهند شد
6. پس از اتمام، روی دکمه پایان ضبط کلیک کنید.
7. جریان کاربر ثبت شده اکنون برای آزمایش خودکار آماده است و نیاز به تکرار دستی را از بین می برد.

اگر “ضبط” برگه قابل مشاهده نیست، روی نماد سه نقطه در بالا سمت راست کلیک کنید و سپس به “ابزار بیشتر” > “ضبط”.

3. فیلتر کردن درخواست های شبکه

Chrome DevTools کار فیلتر کردن درخواست‌های شبکه را ساده می‌کند.

1. باز کن “شبکه” برگه در ابزار توسعه کروم.
2. برای دسترسی به طیف وسیعی از گزینه های فیلتر برای درخواست های شبکه وب سایت، روی نماد قیف کلیک کنید.

فیلتر کردن را می توان با وارد کردن متن مرتبط در ورودی فیلتر انجام داد. به عنوان مثال، تایپ کردن “css” فقط فایل های CSS یا فایل های حاوی کلمه را نشان می دهد “css”. همچنین می توانید از عبارات منظم برای جستجوهای خاص تر استفاده کنید.

برای فیلتر کردن دامنه خاص، وارد کنید 'دامنه:' به دنبال آن نام دامنه در ورودی فیلتر آمده است. این درخواست ها را به آن دامنه خاص جدا می کند و نمای متمرکزی از فعالیت شبکه ارائه می دهد.

4. کاهش سرعت شبکه

درک عملکرد وب سایت شما در شرایط مختلف شبکه ضروری است. Chrome DevTools با ارائه گزینه های کاهش سرعت شبکه به این امر کمک می کند.

در “شبکه” در برگه، می‌توانید چهار گزینه پیش‌فرض throttling را پیدا کنید: No Throttling، Fast 3G، Slow 3G و Offline. آزمایش وب سایت خود با هر یک از این تنظیمات به شما کمک می کند تا عملکرد آن را ارزیابی کرده و افزایش دهید، به خصوص در سرعت های پایین شبکه.

این ویژگی به ویژه برای توسعه دهندگان برنامه های کاربردی وب پیشرفته (PWA) مفید است، زیرا آزمایش رفتار برنامه را در سناریوهای آفلاین امکان پذیر می کند.

5. شناسایی جاوا اسکریپت استفاده نشده

Chrome DevTools همچنین مکان یابی جاوا اسکریپت استفاده نشده در وب سایت شما را آسان تر کرده است، و در اینجا به این صورت است:

1. مطبوعات کنترل + تغییر مکان+ پ (مک: فرمان + تغییر مکان + پ)برای باز کردن منوی فرمان.
2. تایپ کنید “پوشش” برای دسترسی به برگه پوشش.



3. روی دکمه بارگذاری مجدد در تب Coverage کلیک کنید.



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

6. شبیه سازی دستگاه موبایل

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

Chrome DevTools توانایی شبیه‌سازی طیف گسترده‌ای از دستگاه‌های تلفن همراه، از جمله iPhone، iPad، گوشی‌های Samsung Galaxy و موارد دیگر را ارائه می‌دهد. برای انعطاف‌پذیری بیشتر، می‌توانید رزولوشن متغیر را از منوی کشویی دستگاه انتخاب کنید، نه اینکه به اندازه‌های ثابت صفحه نمایش محدود شود.

برای استفاده از شبیه ساز دستگاه، کافی است Chrome DevTools را باز کنید و روی نماد تلفن همراه در سمت چپ کلیک کنید. از آنجا می توان دستگاه های مختلفی را از میان انتخاب کرد “منوی کشویی دستگاه”، امکان تست جامع سازگاری وب سایت شما با تلفن همراه را فراهم می کند.

7. اجرای مجدد درخواست های HTTP

این “شبکه” برگه در Chrome DevTools اطلاعاتی درباره درخواست‌های شبکه که توسط یک سایت انجام می‌شود، ارائه می‌کند. با کلیک بر روی هر یک از این درخواست ها، می توانید جزئیات بیشتری مانند سرصفحه درخواست و پاسخ ها را مشاهده کنید.

این ویژگی به ویژه برای تکرار و اشکال زدایی درخواست ها مفید است. می توانید این درخواست ها را کپی کرده و در محیط های مختلف دوباره اجرا کنید.

برای کپی کردن یک درخواست، روی آن کلیک راست کنید تا منوی زمینه باز شود و سپس روی آن نگه دارید “کپی 🀄” گزینه. این عمل گزینه های مختلفی را برای کپی نمایش می دهد.

8. مدیریت ذخیره سازی سمت مشتری

وب‌سایت‌ها معمولاً داده‌های خاص مشتری را در مرورگر شما ذخیره می‌کنند، که هر کدام در محدوده ذخیره‌سازی مجزای خود هستند و برای سایت‌های دیگر نامرئی هستند.

برای دسترسی به این فضای ذخیره سازی سمت سرویس گیرنده:

1. Chrome DevTools را باز کنید.
2. برو به “کاربرد” برگه
3. در «ذخیره‌سازی محلی» بخش.
4. در اینجا، آدرس وب‌سایت‌هایی را خواهید یافت که داده‌ها را در مرورگر شما ذخیره کرده‌اند.

با کلیک بر روی یکی از این URL ها، جفت های کلید-مقدار – داده های واقعی این وب سایت ها برای استفاده در آینده ذخیره می شوند. شما به راحتی می توانید این داده ها را با دوبار کلیک بر روی بخش کلید یا مقدار تغییر دهید.

همچنین، می‌توانید با اسکرول کردن تا انتها در ستون کلید، کلیک راست و سپس انتخاب، یک کلید و مقدار جدید اضافه کنید. “جدید اضافه کن”.

9. گزینه Local File Overrides را فعال کنید

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

این ویژگی در Chrome DevTools به شما امکان می‌دهد از فایل‌های اصلاح‌شده محلی خود به‌جای فایل‌های منبع سرور استفاده کنید. برای فعال کردن لغو فایل های محلی:

1. حرکت به “منابع” برگه در ابزار توسعه کروم.
2. کلیک کنید “فعال کردن لغوهای محلی.”
3. دایرکتوری ایجاد کنید که Chrome بتواند همه موارد لغو را در آن ذخیره کند.



4. برو به “شبکه” برگه
5. فایلی را که می خواهید لغو شود انتخاب کنید و آن را انتخاب کنید «ذخیره برای لغو» گزینه.
6. سپس فایل انتخابی در قسمت ظاهر می شود “لغو” برگه در “منابع”.
7. در اینجا، می توانید فایل را در صورت نیاز ویرایش کنید.

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

نتیجه

و شما آن را دارید! ما برخی از مفیدترین ویژگی‌های Chrome DevTools را بررسی کرده‌ایم، به ویژه برای توسعه‌دهندگان وب در برنامه‌نویسی مفید است. اگر علاقه مند به کشف اطلاعات بیشتر در مورد DevTools هستید، حتما از صفحه رسمی DevTools دیدن کنید.