این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

Chrome DevTools را باز کنید

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

روش‌های زیادی برای باز کردن Chrome DevTools وجود دارد. روش مورد علاقه خود را از این مرجع جامع انتخاب کنید.

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

از منوهای کشویی در کروم .
با میانبرهای اختصاصی که Elements ، Console یا آخرین پنلی که استفاده کرده‌اید را باز می‌کنند.

علاوه بر این، یاد بگیرید که چگونه DevTools را برای هر تب جدید به طور خودکار باز کنید .

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

پنل عناصر را برای بررسی DOM یا CSS باز کنید

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

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

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

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

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

برای باز کردن آخرین پنل DevTools، روی دکمه در سمت راست نوار آدرس کلیک کنید و More Tools > Developer Tools را انتخاب کنید.

گزینه ابزارهای توسعه‌دهنده (Developer Tools) از منوی سه‌نقطه‌ای انتخاب شده است.

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

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

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

سیستم عامل	عناصر	کنسول	آخرین پنل شما
ویندوز یا لینوکس	`کنترل` + `شیفت` + سی	`کنترل` + `شیفت` + جی	`اف۱۲` `کنترل` + `شیفت` + I
مک	`Cmd` + `Option` + C	`Cmd` + `Option` + J	`کلید ترکیبی Fn` + `F12` `Cmd` + `Option` + I

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

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

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

پنل عناصر در حالت بازرس (inspector mode) به همراه یک راهنمای ابزار (tooltip).

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

با باز بودن DevTools، صفحه را با یا بدون حافظه پنهان (cache) مجدداً بارگذاری کنید.

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

سه گزینه بارگذاری مجدد با DevTools باز.

بارگذاری مجدد عادی . از حافظه پنهان برای سرعت بخشیدن به زمان بارگذاری مجدد استفاده می‌کند.
میانبر: Cmd + R (مک) یا Ctrl + R (ویندوز/لینوکس).
نکته: غیرفعال کردن حافظه پنهان در پنل شبکه ، تمام بارگذاری‌های مجدد عادی را مجبور می‌کند از حافظه پنهان استفاده نکنند.
بارگذاری مجدد سخت . حافظه پنهان را دور می‌زند اما آن را خالی نمی‌کند.
میانبر: Cmd + Shift + R (مک) یا Ctrl + Shift + R (ویندوز/لینوکس).
خالی کردن حافظه پنهان و بارگذاری مجدد سریع . قبل از بارگذاری مجدد، حافظه پنهان همه سایت‌ها را خالی می‌کند.

باز شدن خودکار DevTools در هر تب جدید

کروم را از خط فرمان اجرا کنید و فلگ --auto-open-devtools-for-tabs را به آن بدهید:

از هر نمونه کروم در حال اجرا خارج شوید.
نکته کلیدی: این گزینه فقط برای اولین نمونه کرومی که باز می‌کنید کار می‌کند. اگر مثلاً در ویندوز برای شما کار نمی‌کند، حتماً تمام فرآیندهای کروم در حال اجرا را از Task Manager ببندید.
ترمینال یا برنامه خط فرمان مورد علاقه خود را اجرا کنید.
بسته به سیستم عامل خود، دستور زیر را اجرا کنید:

مک‌او‌اس:

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 را ببینید.