آموزش Developer Tools مرورگر گوگل کروم

نکات و ترفندهای ابزار DevTools مرورگر گوگل کروم

Chrome DevTools Tips and Tricks

مرورگر گوگل کروم (Google Chrome) محبوب ترین مرورگر در بین توسعه دهندگان وب می باشد. کروم هر 6 هفته یکبار آپدیتی ارائه می دهد و امکانات بسیار زیادی برای برنامه نویسان و طراحان تحت وب فراهم می کند. احتمالا شما با برخی از آنها آشنا هستید مانند ویرایش کدهای css بصورت زنده (live) ، تب کنسول در inpect و خطایابی (debugging) . در این مقاله، می خواهیم شما را با 15 نکته و ترفند از امکاناتی که کروم به طراحان و برنامه نویسان وب ارائه می کند آشنا کنیم. البته سری آموزشی Developer Tools کروم سه بخش است که در هر بخش، 5 نکته و ترفند را بیان خواهیم کرد.

15 نکته و ترفند ابزار Dev Tools مرورگر Google Chrome:

1- Quick File Switching:

اگر شما با نرم افزار Sublime Text کار کرده باشید، حتما با ویژگی “Go to anything” آشنا هستید که توسط آن می توانید در فایل های پروژه خود جستجو انجام دهید. مرورگر کروم نیز قابلیت اینچنینی دارد. با فشردن دکمه های ترکیبی Ctrl + P در سیستم عامل ویندوز و Cmd + P در سیستم عامل Mac می توانید هنگامی که ابزار DevTools باز است، در بین فایل های پروژه خود جستجو انجام دهید.

2- جستجو در داخل سورس کدهای پروژه:

حال اگر بخواهید درون سورس کدها بدنبال یک عبارت خاص بگردید، باید چه کنید؟! خوشبختانه ابزار DevTools مرورگر کروم فکر اینجا را نیز کرده است. بدین منظور کافیست هنگامی که ابزار DevTools باز است کلیدهای ترکیبی Ctrl+Shift+F را در سیستم عامل ویندوز و کلیدهای Cmd+Opt+F در سیستم عامل Mac بفشارید.

3- رفتن به خط (Go to Line):

وقتی فایلی را در تب Sources باز کردید، ابزار DevTools به شما اجازه می دهد تا به هر خطی که می خواهید پرش کنید. بدین منظور دکمه های ترکیبی Ctrl+G را در سیستم های عامل ویندوز و لینوکس و Cmd+L در سیستم عامل Mac را بزنید و سپس شماره خط دلخواه را در آن وارد نمائید.

4- انتخاب المان در کنسول گوگل کروم:

ابزار DevTools از توابع و متغیرهای جالبی برای انتخاب المان DOM پشتیبانی می کند. لطفا به لیست زیر دقت کنید:

$(): کد کوتاه شده و میانبر دستور document.querySelector() می باشد. اولین المانی که با سلکتور css تطابق داشته باشد را برمیگرداند. بعنوان مثال عبارت $(“div”) اولین div موجود در صفحه را برمیگرداند.
$$(): کد کوتاه شده و میانبر دستور document.querySelectorAll() می باشد. آرایه ای از المان های مطابق با سلکتور css را برمیگرداند. برای مثال، $$(“div”) تمام div های موجود در صفحه را در قالب یک آرایه برمیگرداند.
$0 – $4: تعداد 5 المان آخر را که توسط دستورات فوق در کنسول کروم انتخاب کرده ایم را برمیگرداند.

5- استفاده از انتخاب چندگانه (Multiple Selections):

بهنگام ویرایش یک فایل، می توانید با نگهداشتن ctrl در ویندوز و کلید cmd در Mac ، چندین مکان نما را در جاهای مختلف سورس کد فایل قرار دهید. بدین ترتیب می توانید در بخش های مختلف، در یک لحظه، عبارت موردنظرتان را بنویسید.

6- نگهداشتن لاگ (Preserve Log):

با تیک زدن گزینه Preserve log در تب Console از ابزار DevTools ، شما می توانید لاگ های تولید شده فعالیت هایتان را در هر بار لود صفحه (page load) نگهداری کنید و از پاک شدن آنها جلوگیری کنید. این امکان برای زمانی که می خواهید خطایابی (debug) کنید می تواند مفید باشد.

7- پرینت زیبا {} (Pretty Print):

ابزار Developer Tools مرورگر گوگل کروم، این امکان را برای توسعه دهندگان وب فراهم کرده که بتوانند سورس کدهای css و js را که بصورت فشرده (minify) می باشند را بخوانند و یا پرینت بگیرند. ابزار pretty print که با {} مشخص شده است، در گوشه پائین سمت چپ تب Sources ابزار DevTools کروم قرار دارد.

8- Device mode:

ابزار DevTools ویژگی دارد که می توان با آن صفحات ریسپانسیو (یا mobile friendly) ایجاد کرد. با مراجعه به این ویدئو می توانید شبیه سازی ویژگی های مهمی مانند Screen Resizing، عملیات Touch کاربران و اتصال بد شبکه (Bad Network Connection) را یاد بگیرید.

9- Device emulation sensors:

ویژگی دیگری که در زمینه Device mode در دسترس است، امکان شبیه سازی سنسورهای دستگاه های موبایل است. مانند: صفحات لمسی (Touch Screens) و شتاب سنج ها (accelerometers). شما همچنین می توانید موقعیت جغرافیایی خود را در این ابزار بیان کنید. این قابلیت در پائین تب Elements و زیر Emulation > Sensors

10- Color Picker:

هنگامی که یک رنگ را در Style Editor انتخاب کرده اید، با کلیک روی پیش نمایش رنگ (color preview) ابزار color picker مطابق شکل زیر بصورت پاپ آپ نمایش داده خواهد شد. با بردن ماوس بر روی قسمت های مختلف صفحه، نشانگر ماوس به شکل ذره بین نمایش داده می شود. رنگ هر بخش را که مایل بودید، روی آن قسمت کلیک کنید تا آن رنگ انتخاب شود.

11- Force Element State:

ابزار DevTools کروم این امکان را دارد که می تواند وضعیت های مختلف css را مانند :active و :hover و… را شبیه سازی کند. استایل دهی المان ها توسط این قابلیت، کار را برای طراحان وب راحت تر می کند. این قابلیت از طریق تب Styles ابزار DevTools کروم قابل دسترس می باشد.

12- Visualize the Shadow DOM:

المان هایی که بطور پیش فرض از معرض دید خارج است، مانند input و button و…، را می توان با مراجعه به Setting > General > Show user agent shadow DOM و تیک زدن این گزینه، مشاهده نمائید. حتی می توانید به آنها استایل دهید.

13- Select next occurrence:

وقتی فایلی در DevTools به حالت ویرایش است، می توانید با انتخاب یک عبارت یا کلمه در آن و زدن کلیدهای ترکیبی Ctrl+D در ویندوز (Cmd+D) سایر کلمات مشابه را به حالت انتخاب در بیاوریم و با کلمه یا عبارت موردنظر خود جایگزین کنیم.

14- Change Color Format:

برای سوئیچ بین فرمت های متداول رنگ های وب (rgba,hsl,hexadecimal) بر روی پیش نمایش رنگ (color preview) کلید shift را نگه دارید و کلیک کنید.

15- ویرایش فایل های Local از طریق Workspaces:

فضاهای کاری (Workspaces) از ویژگی های مهم ابزار DevTools مرورگر کروم می باشد که کروم را به یک IDE آنلاین تبدیل می کند. در WorkSpace ، فایل های موجود با فایل های فیزیکی پروژه شما همخوانی دارد و با اعمال تغییر در آنها و ذخیره آن، فایل های اصلی وب سایت شما آپدیت خواهند شد و دیگر نیازی نیست سورس کد آن فایل را در یک نرم افزار IDE مانند Visual Studio کپی پیست کنیم.

برای انجام پیکربندی (configure) فضای کاری، تب Sources را فعال کرده و در هر جای پنل سورس کد راست کلیک کرده و گزینه Add Folder to Workspace را انتخاب کنید. همچنین می توانید فولدر پروژه خود را drag کرده و در ابزار DevTools آنرا drop کنید. از این به بعد، تمام فایل های پروژه شما قابل ویرایش می باشند. بی آنکه مهم باشد شما در کدام صفحه وب از DevTools استفاده می کنید.

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