7 قابلیت جدید گوگل کروم که باید از آن اطلاع داشته باشید

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

تجربه DevTools در گوگل کروم
مرورگر کروم دارای قابلیت های جذابی است که به صورت پیش فرض مخفی یا غیر فعال هستند. برای فعال کردن این قابلیت باید به آدرس زیر با استفاده از نوار آدرس کروم رفته و تنظیمات DevTool را فعال کنید و مرورگرتان را دوباره راه اندازی کنید: chrome://flags/#enable-devtools-experiments پس از راه اندازی دوباره کروم DevTools را با استفاده از میانبر Ctrl+Shift+I راه اندازی کنید و روی آیکان چرخ دنده بالا سمت راست پنجره آن کلیک کنید سپس از سمت چپ به بخش Experiment در تنظیمات رفته و تنظیماتی را که دوست دارید را فعال کنید.

1- شبیه ساز موبایل بهبود یافته
امروزه راه اندازی نسخه موبایل برای یک وب سایت بسیار مهم است. در مرورگر کروم شما می توانید به اصلاح نسخه موبایل وب سایت خود با استفاده از شبیه ساز موبایلی که درون آن قرار گرفته بپردازید. برای فعالسازی شبیه ساز ابتدا باید DevTools را راه اندازی کنید و سپس روی آیکان موبایل کلیک کنید.

2- انتخاب های چندگانه نشانگر
آیا می خواهید تا به ویرایش خطوط متعدد یک فایل با اضافه کردن یک متن ثابت بپردازید؟ کروم با استفاده از DevTools توانایی انتخاب های چندگانه را به خود اضافه کرده است. از Ctrl+Click یا Cmd+Click برای انتخاب چندگانه خطوط استفاده کنید.

3- محدودسازی سرعت اینترنت
شما همچنین می توانید با استفاده از DevTools عملکرد وب سایت خود را روی سرعت های مختلف آزمایش کنید. در داخل DevTools کلید Esc را فشار دهید تا وارد محیط کنسول شوید. و در پنجره Network نوع اتصال را انتخاب کنید تا سرعت اینترنت را محدود کنید و سایت خود را با سرعت انتخابی آزمایش کنید.

4- حالت آفلاین
کروم اکنون به حالت آفلاین نیز مجهز است که به شما این امکان را می دهد تا سایت ها را روی حالت آفلاین باز کنید. اگر شما یک اپلیکیشن تحت وب را توسعه می دهید که هدف گذاری شما این است که کاربر حتی بتواند در حالت آفلاین نیز از آن استفاده کند، این قابلیت می تواند برای شما بسیار مفید باشد. برای راه اندازی این حالت از طریق نوار آدرس کروم به آدرس زیر رفته و آن را فعال کنید: chrome://flags/#enable-offline-mode یادتان نرود تا پس از فعال کردن آن حتما کروم را دوباره راه اندازی کنید.

5- انتقال کد HTML بصورت Drag And Drop
بعضی اوقات نیاز است تا یک قطعه کد HTML را به ویرایشگر کد خود ارسال کنید. علاوه بر روش ساده کپی و پیست می توانید یک قطعه کد را از بخش DOM دراگ کرده و به ویرایشگر کد خود بکشید. درحال حاضر این قابلیت فقط برای یک عنصر HTML به کار می رود و نمی توانید همزمان عناصر زیر مجموعه کد را نیز دراگ کنید. امیدواریم که این قابلیت در آپدیت های بعدی اصلاح شود.

6- رسیدگی کردن با کدهای CSS
شما می توانید از طریق کروم، کدهای CSS را بررسی کنید و مثلا قواعد بی کاربرد استفاده شده در قالب را حذف کنید. برای این کار به بخش Audits رفته و روی کلید Run کلیک کنید تا کدهای CSS شما را مورد بررسی قرار دهد. پس از اتمام کار لیستی از Selctor ها یا کلاس هایی را به شما نشان می دهد که در صفحه مورد نظر استفاده نشده است.

7- اضافه کردن SourceMap
این قابلیت برای کسانی مفید است که از پیش پردازنده هایی مانند SASS یا LESS یا CoffeeScript استفاده می کنند. با فعال کردن SourceMap می توانید به کدهای Java Script یا CSS ای دسترسی داشته باشید که در سطر و ستون خاصی قرار دارند. آخرین نسخه کروم به شما این امکان را می دهد که SourceMap را به صورت دستی وارد کنید. برای انجام این کار ابتدا وارد بخش Source شده و یک فایل را باز کنید و سپس راست کلیک کرده و گزینه Add Source Map را فشار دهید تا فایل map. را اضافه کنید.