روش‌های زیادی برای باز کردن Chrome DevTools وجود دارد. روش مورد علاقه خود را از این مرجع جامع انتخاب کنید.
شما می‌توانید با استفاده از رابط کاربری کروم یا صفحه کلید به DevTools دسترسی پیدا کنید:
- از منوهای کشویی در کروم .
- با میانبرهای اختصاصی که Elements ، Console یا آخرین پنلی که استفاده کرده‌اید را باز می‌کنند.
علاوه بر این، یاد بگیرید که چگونه DevTools را برای هر تب جدید به طور خودکار باز کنید .
اگر رابط کاربری را ترجیح می‌دهید، می‌توانید از طریق منوهای کشویی در کروم به DevTools دسترسی پیدا کنید.
برای بررسی، روی یک عنصر در صفحه کلیک راست کرده و Inspect را انتخاب کنید.
DevTools پنل Elements را باز می‌کند و عنصر مورد نظر را در درخت DOM انتخاب می‌کند. در تب Styles ، می‌توانید قوانین CSS اعمال شده بر عنصر انتخاب شده را مشاهده کنید.
برای باز کردن آخرین پنل DevTools، روی دکمه در سمت راست نوار آدرس کلیک کنید و More Tools > Developer Tools را انتخاب کنید.
روش دیگر این است که آخرین پنل را با یک میانبر باز کنید. برای کسب اطلاعات بیشتر به بخش بعدی مراجعه کنید.
اگر صفحه‌کلید را ترجیح می‌دهید، بسته به سیستم عامل خود، یک میانبر را در Chrome فشار دهید:
| سیستم عامل | عناصر | کنسول | آخرین پنل شما |
|---|---|---|---|
| ویندوز یا لینوکس | کنترل + شیفت + سی | کنترل + شیفت + جی | اف۱۲ کنترل + شیفت + I |
| مک | Cmd + Option + C | Cmd + Option + J | کلید ترکیبی Fn + F12 Cmd + Option + I |
در اینجا یک راه آسان برای به خاطر سپردن میانبرها آورده شده است:
- C مخفف CSS است.
- J برای جاوا اسکریپت.
- من انتخاب شما را تعیین می‌کنم.
میانبر C پنل عناصر را در حالت inspector باز می‌کند. این حالت وقتی نشانگر ماوس را روی عناصر یک صفحه نگه می‌دارید، نکات مفید را به شما نشان می‌دهد. همچنین می‌توانید برای مشاهده CSS هر عنصر، در تب Elements > Styles روی آن کلیک کنید.
برای فهرست کامل میانبرهای DevTools، به میانبرهای صفحه‌کلید مراجعه کنید.
با باز شدن DevTools، می‌توانید صفحه خود را به سه روش بارگذاری مجدد کنید. در نوار عملیات اصلی پنجره کروم، دکمه Reload را نگه دارید و یکی از گزینه‌ها را انتخاب کنید:
بارگذاری مجدد عادی . از حافظه پنهان برای سرعت بخشیدن به زمان بارگذاری مجدد استفاده می‌کند.
میانبر: Cmd + R (مک) یا Ctrl + R (ویندوز/لینوکس).
بارگذاری مجدد سخت . حافظه پنهان را دور می‌زند اما آن را خالی نمی‌کند.
میانبر: Cmd + Shift + R (مک) یا Ctrl + Shift + R (ویندوز/لینوکس).
خالی کردن حافظه پنهان و بارگذاری مجدد سریع . قبل از بارگذاری مجدد، حافظه پنهان همه سایت‌ها را خالی می‌کند.
کروم را از خط فرمان اجرا کنید و فلگ --auto-open-devtools-for-tabs را به آن بدهید:
از هر نمونه کروم در حال اجرا خارج شوید.
ترمینال یا برنامه خط فرمان مورد علاقه خود را اجرا کنید.
بسته به سیستم عامل خود، دستور زیر را اجرا کنید:
مک‌او‌اس:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsویندوز:
start chrome --auto-open-devtools-for-tabsلینوکس:
google-chrome --auto-open-devtools-for-tabs
DevTools به طور خودکار برای هر تب جدید باز می‌شود تا زمانی که کروم را ببندید.
در مرحله بعد، ویدیوی زیر را تماشا کنید تا با برخی از میانبرها و تنظیمات مفید برای پیمایش سریع‌تر DevTools آشنا شوید.
برای تجربه یادگیری عملی‌تر، نحوه سفارشی‌سازی DevTools را ببینید.