هر مرورگر مدرن مجموعه‌ای از ابزارها دارد
که زندگی ما توسعه‌دهنده‌ها را خیلی راحت‌تر می‌کند
و ما به این ابزارها در مجموع می‌گوییم
ابزارهای توسعه‌دهنده یا به اختصار Dev Tools
و در این جلسه
یاد می‌گیریم چطور از Dev Tools گوگل کروم استفاده کنیم
و برای شروع فضای بیشتری در اختیار خودمان قرار بدهیم
حالا سه راه برای باز کردن ابزارهای توسعه‌دهنده وجود دارد
اول اینکه می‌توانید روی هر جای صفحه
کلیک راست کنید و سپس روی Inspect یا Inspect Element بزنید
این‌ها Dev Tools هستند
اما بگذارید دو روش دیگر را هم نشان بدهم
روش دوم این است که به منوی View بروید
سپس Developer و بعد Developer Tools را انتخاب کنید
باشه؟
یا روش سوم یک میانبر روی کیبورد است
که در مک Option + Command + I و در ویندوز Option + Control + I است
باشه؟
بعد باید بیاییم اینجا
به اولین تب که Elements نام دارد
بیایید این را کمی بزرگ‌تر کنیم تا بهتر دیده شود
خوبه؟
اولین چیزی که اینجا در تب Elements می‌بینیم
همان HTML دقیقی است که ما نوشتیم
در فایل‌های HTML خودمان درست است؟
اینجا می‌توانیم هر المنت را با کلیک کردن باز کنیم
و وقتی روی آن‌ها می‌رویم
روی صفحه هایلایت می‌شوند
که می‌تواند خیلی مفید باشد
مثلاً می‌بینید که هدر ما
کل این باکسی است که اینجا به رنگ آبی هایلایت شده است درست است؟
این همان است
بعد ناوبری همه این بخش است و اگر آن را باز کنیم
می‌بینیم هرکدام از این لینک‌ها یک باکس کوچک هستند
که همانطور که می‌بینید کنار هم نشسته‌اند
این اولین چیزی است که می‌توانیم اینجا بررسی کنیم
مورد دوم و حتی مهم‌تر
تب Styles در سمت چپ است
اینجا همه استایل‌هایی که روی یک المنت اعمال شده
قابل مشاهده هستند
بیایید مثلاً روی H1 برویم و بعد
روی آن کلیک کنیم
حالا در سمت چپ همه استایل‌هایی که
در حال حاضر روی این المنت در فایل CSS ما اعمال شده‌اند
اینجا نمایش داده می‌شوند
پس ما این قانون را در جایی از کدمان داریم
که فونت را روی 26 تنظیم کرده و این تغییرات را انجام داده درست است؟
و یک قانون دیگر هم داریم
که رنگ را تنظیم کرده و در واقع همین یکی اینجاست
درسته؟
پس این اولین مورد همین است
و بعدی این یکی است
و در نهایت این مورد هم وجود دارد درست است؟
که دقیقاً همین یکی است
خوب؟ شاید قبلاً تعجب کرده باشید که چرا
متن در این المنت H1 به صورت Bold نمایش داده می‌شود
دلیلش در واقع استایل پیش‌فرض است
این استایل‌های پیش‌فرض
برای H1 همان چیزی هستند که اینجا نمایش داده می‌شوند
در این قانون مربوط به User Agent Stylesheet
که این یک اصطلاح شیک برای گفتن استایل پیش‌فرض است
و پایین‌تر می‌بینیم که font-weight به طور پیش‌فرض Bold است
به صورت پیش‌فرض
خوب؟ این مورد چیزی است که خیلی زود یاد می‌گیریم
پس الان نگرانش نباشید
بعد بیایید این لینک‌ها را ببینیم
و این کد مربوط به آن‌هاست
یعنی CSSیی که قبلاً برای آن‌ها نوشتیم
مثل رنگ و text-decoration درست است؟
اما حالا اگر بخواهیم استایل‌های بیشتری اینجا اضافه کنیم
می‌توانیم این کار را انجام بدهیم
البته فقط برای تست
مثلاً می‌توانیم font-size اضافه کنیم
بگیم
30 پیکسل
مثلاً
و بلافاصله همه لینک‌های صفحه
نه فقط این یکی بلکه بقیه هم
همه‌شان font-size برابر با 30 پیکسل خواهند داشت
و برای تست می‌توانیم این را روشن و خاموش کنیم
و البته می‌توانیم استایل‌های دیگر را هم
با یک کلیک اینجا روشن و خاموش کنیم
به همین سادگی
خوب؟
و البته این مقادیری که اینجا مشخص می‌کنیم
روی وب‌سایت نهایی تأثیری ندارند
پس اگر این کار را انجام بدهیم کد ما تغییر نمی‌کند
و می‌توانیم به راحتی با ریفرش کردن صفحه این را ثابت کنیم
و همه چیز به حالت عادی برمی‌گردد
خوبه؟
اما بیایید لینک‌ها را کمی بیشتر بررسی کنیم
چون یک قابلیت جالب اینجا داریم
الان فقط همین قانون CSS اینجا اعمال شده
یعنی فقط همانی که pseudo-class لینک دارد
و دلیلش این است که فعلاً لینک نه Hover شده
و نه Active است بنابراین استایل مربوط به آن‌ها
اعمال نمی‌شود
اما با کلیک کردن اینجا می‌توانیم یکی از این حالت‌ها را شبیه‌سازی کنیم
یکی از این Stateها
مثلاً می‌توانیم شبیه‌سازی کنیم که لینک در حال حاضر 101 در حالت هاور( شناوری ماوس) شدن 102 پس اگر اینجا روی هاور کلیک کنیم می‌بینید که حالا 103 این قانون (rule) اعمال می‌شود 104 چون حالا عنصر A با شبه‌کلاس هاور (hover) واقعاً وجود دارد 105 خب بیایید این را در صفحه ببینیم 106 و عنصری که باید این حالت را داشته باشد همان عنصری است 107 که در واقع من اینجا انتخاب کرده‌ام 108 پس این همان عنصری است که انتخابش کرده‌ام 109 و بنابراین حالا طوری دیده می‌شود 110 که انگار هاور شده حتی اگر واقعاً نشده باشد 111 و این عالی است 112 چون می‌توانیم وب‌سایتمان را تست کنیم بدون اینکه مجبور باشیم 113 به‌طور دستی روی لینک‌ها برویم و هاور کنیم 114 خب حالا می‌توانیم همین کار را برای این یکی هم انجام دهیم 115 و می‌توانستیم آن را در درخت HTML جستجو کنیم 116 اما من راحت‌تر می‌دانم که فقط روی عنصری که می‌خواهم راست‌کلیک کنم 117 و بعد Inspect را انتخاب کنم 118 و به این شکل مرورگر به‌طور خودکار ما را به همان‌جا می‌برد 119 پس اگر حالا روی هاور کلیک کنم 120 بلافاصله در حالت هاور قرار می‌گیرد 121 حتی اگر واقعاً اینطور نباشد 122 و همین موضوع در مورد حالت Active هم صدق
می‌کند درست است؟ 123 پس در حالت Active است اما می‌خواهیم طوری باشد 124 که انگار همزمان هاور هم شده است 125 چون معمولاً وقتی یک لینک Active می‌شود هاور هم هست 126 به هر حال چیزی که اهمیت دارد این است که حالا تمام این قوانین 127 در همین لحظه در حال اعمال شدن هستند 128 خوبه؟ 129 اما حالا بیایید دوباره آن را خاموش کنیم 130 خب فکر می‌کنم واقعاً همه چیزهایی که باید نشان می‌دادم 131 تا اینجا پوشش داده شدند 132 ما قرار است ابزارهای DevTools را در تمام ادامه دوره استفاده کنیم 133 چون این ابزارها برای ساخت یک وب‌سایت کارآمد کاملاً ضروری هستند 134 در واقع وقتی خودم برای اولین بار این ابزارها را کشف کردم 135 خیلی هیجان‌زده شدم و امیدوارم شما هم از آنها خوشتان بیاید 136 و حتی شاید همین حالا 137 کمی با آنها تمرین و آزمایش کنید 138 شما می‌توانید روی هر عنصری که بخواهید کلیک کنید 139 و کمی با روشن و خاموش کردن این استایل‌ها آزمایش کنید 140 شاید حتی چند استایل دیگر هم اضافه کنید 141 و واقعاً کمی بررسی کنید که چه اتفاقی می‌افتد 142 وقتی این قوانین مختلف با هم اعمال می‌شوند 143 پس با این موضوع کمی سرگرم شوید 144 و به‌زودی در ویدیوی بعدی شما را می‌بینم