Chrome DevTools را باز کنید

کیسی باسکی
Kayce Basques
جسلین ین
Jecelyn Yeen
سوفیا املیانوا
Sofia Emelianova

راه های زیادی برای باز کردن ابزار توسعه کروم وجود دارد. راه مورد علاقه خود را ��ز این م��جع جامع انتخاب کنید.

می‌توانید با استفاده از رابط کاربری Chrome یا صفحه‌کلید به DevTools دسترسی پیدا کنید:

علاوه بر این، نحوه باز کردن خودکار DevTools را برای هر برگه جدید بیاموزید.

DevTools را از منوهای کروم باز کنید

اگر رابط کاربری را ترجیح می دهید، می توانید از منوهای کشویی کروم به DevTools دسترسی داشته باشید.

برای بازرسی DOM یا CSS، پنل Elements را باز کنید

برای بازرسی، روی یک عنصر در صفحه کلیک راست کرده و Inspect را انتخاب کنید.

گزینه Inspect در منوی کشویی کروم.

DevTools پنل Elements را باز می کند و عنصر موجود در درخت DOM را انتخاب می کند. در قسمت Styles ، می توانید قوانین CSS اعمال شده روی عنصر انتخاب شده را مشاهده کنید.

عنصری که در پنل Elements انتخاب شده است.

آخرین پنلی را که استفاده کردید از منوی اصلی Chrome باز کنید

برای باز کردن آخرین پنل DevTools، روی آن کلیک کنید منوی سه نقطه در سمت راست نوار آدرس را فشار دهید و ابزارهای بیشتر > ابزارهای برنامه‌نویس را انتخاب کنید.

گزینه Developer Tools از منوی سه نقطه انتخاب شده است.

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

پانل ها را با میانبر باز کنید: عناصر، کنسول یا آخرین پانل خود

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

سیستم عامل عناصر کنسول آخرین پنل شما
ویندوز یا لینوکس Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
مک Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

در اینجا یک راه آسان برای به خاطر سپردن میانبرها وجود دارد:

  • C مخفف CSS است.
  • J برای جاوا اسکریپت.
  • من انتخاب شما را تعیین می کنم

میانبر C پنل Elements را باز می کند بازرسی کنید. حالت بازرس این حالت هنگامی که ماوس را روی عناصر یک صفحه نگه می دارید، نکات ابزار مفیدی را به شما نشان می دهد. همچنین می‌توانید روی هر عنصری کلیک کنید تا CSS آن را در قسمت Elements > Styles مشاهده کنید.

پانل عناصر در حالت بازرس با یک راهنمای ابزار.

برای فهرست کامل میانبرهای DevTools، به میانبرهای صفحه کلید مراجعه کنید.

DevTools را در هر برگه جدید به طور خودکار باز کنید

Chrome را از خط فرمان اجرا کنید و پرچم --auto-open-devtools-for-tabs ر�� ارسال کنید:

  1. از هر نمونه در حال اجرا Chrome خارج شوید.

  2. ترمینال یا برنامه خط فرمان مورد علاقه خود را اجرا کنید.

  3. بسته به سیستم عامل خود، دستور زیر را اجرا کنید:

  • MacOS:

    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 به طور خودکار برای هر برگه جدید باز می شود تا زمانی که Chrome را ببندید.

بعدش چی؟

در مرحله بعد، ویدیوی زیر را تماشا کنید تا برخی از میانبرها و تنظیمات مفید برای پیمایش سریعتر DevTools را بیاموزید.

برای تجربه یادگیری عملی تر، نحوه سفارشی کردن DevTools را ببینید.