ظاهر و رفتار DevTools و پانل های آن را با استفاده از آن پیکربندی کنید تنظیمات > تنظیمات برگزیده این برگه هم گزینه های سفارشی سازی عمومی و هم گزینه های خاص پانل را فهرست می کند.
برای تنظیم تنظیمات برگزیده، باز کنید تنظیمات > تنظیمات برگزیده و به یکی از بخش هایی که در ادامه توضیح داده شده است بروید.
برای اینکه بدانید هر تنظیم چه کاری انجام می دهد، در این صفحه نام تنظیمات را جستجو کنید و add_circle توضیحات آن را گسترش دهید.
این مرجع تنظیمات مختلف را با نمادهای زیر نشان می دهد:
چک باکس ها
- لیست های کشویی
منسوخ
برای بازیابی تنظیمات پیشفرض، به انتهای برگه Preferences بروید و روی Restore defaults and reload کلیک کنید.
این بخش گزینه هایی را فهرست می کند که ظاهر DevTools را سفارشی می کنند.
بر Elements > Styles و تب های خواهر، و Sources > Pane Debugger تأثیر می گذارد. گزینه auto باعث می شود که چیدمان به عرض DevTools بستگی داشته باشد.
برای اعمال این تنظیم، DevTools را دوباره بارگیری کنید.
این ویدیو نحوه جابجایی بین برگه ها را با استفاده از میانبرهای صفحه کلید مربوطه نشان می دهد.
این بخش گزینه هایی را فهرست می کند که پنل منابع را سفارشی می کند.
این ویدیو نحوه جستجوی متن در فایل منبع پسوند را نشان می دهد.
این ویدئو نشان می دهد که چگونه با فعال بودن این گزینه، پانل Sources فایل های موجود در درخت ناوبری را هنگام جابجایی بین برگه ها انتخاب می کند.
نیاز به بارگیری مجدد DevTools دارد.
این ویدیو ابتدا کاراکترهای Tab را نشان می دهد که با کلید Tab درج شده اند. سپس وقتی این گزینه را فعال میکنید و DevTools را مجدداً بارگیری میکنید، کلید Tab تمرکز را تغییر میدهد.
نیاز به بارگیری مجدد DevTools دارد.
این ویدیو ابتدا تورفتگی پیش فرض هشت فاصله را نشان می دهد. سپس وقتی این گزینه را فعال میکنید، تورفتگی پیشفرض روی فایل منبع لغو میشود.
این ویدیو ابتدا هیچ پیشنهادی را نشان نمی دهد. سپس هنگامی که این گزینه را فعال می کنید، ویرایشگر پیشنهادهایی را برای تکمیل دستور نشان می دهد.
این ویدیو تایپ براکت های باز را قبل و بعد از فعال کردن بسته شدن خودکار براکت نشان می دهد.
نیاز به بارگیری مجدد DevTools دارد.
این ویدیو نحوه تا زدن بلوک های کد را با فعال کردن این گزینه نشان می دهد.
نیاز به بارگیری مجدد DevTools دارد. گزینه ها موارد زیر را انجام می دهند:
- همه همه کاراکترهای فضای خالی را به صورت نقطه (
...
) نشان می دهد. علاوه بر این، ویرایشگر کاراکتر Tab را به عنوان یک خط (—
) نشان می دهد. - دنباله کاراکترهای فضای خالی در انتهای خطوط را با رنگ قرمز روشن برجسته می کند.
این ویدیو ابتدا پانل منابع را در زمانی که در نقطه شکست متوقف می شود، خارج از فوکوس نشان می دهد. سپس وقتی این گزینه را فعال می کنید، DevTools ویرایشگر را در پنل Sources باز می کند و خط کد را با نقطه شکست به شما نشان می دهد.
هنگامی که به زیبایی چاپ می شود ، ویرایشگر ممکن است یک خط کد طولانی را در چند خط نشان دهد که قبل از -
نشان می دهد که ادامه خط است.
.scss
را پیدا کند و به شما نشان دهد.این ویدیو به شما نشان می دهد که چگونه با فعال کردن این گزینه، از انتهای فایل عبور کنید.
اگر DevTools غیرفعال باشد، به پیامهای Console شبیه به موارد زیر وارد میشود:
این مثال نشان می دهد که چگونه می توان ابتدا تورفتگی پیش فرض را روی هشت فاصله و سپس به یک کاراکتر Tab تنظیم کرد.
این بخش گزینه هایی را فهرست می کند که پنل Elements را سفارشی می کند.
این ویدیو ابتدا نشان می دهد که گره های DOM در درخت DOM انتخاب نشده اند. سپس هنگامی که این گزینه را فعال می کنید، پنل Elements گره های موجود در شناور را انتخاب می کند.
پیوند «بیشتر بدانید» یک مرجع MDN CSS را در این ملک به شما میدهد.
این بخش گزینه هایی را فهرست می کند که پنل شبکه را سفارشی می کند. اکثر گزینه ها مانند تنظیمات پنل هستند.
این ویدیو ابتدا گزارش درخواستها را نشان میدهد که در بارگذاری مجدد صفحه بازخوانی شدهاند، سپس با فعال کردن این گزینه همچنان باقی میمانند.
این ویدیو ابتدا نشان میدهد که درخواستها مسدود نشدهاند. سپس، پس از فعال کردن این گزینه، یک الگو در کشوی مسدود کردن درخواست شبکه آنها را مسدود می کند.
این بخش گزینه هایی را فهرست می کند که پنل Performance را سفارشی می کنند.
این مثال هر دو عملکرد چرخ ماوس اسکرول و زوم را بر روی نمودار شعله در پانل عملکرد نشان می دهد.
این بخش گزینه هایی را فهرست می کند که کنسول را سفارشی می کند. اکثر گزینه ها مانند تنظیمات کنسول هستند.
این ویدیو نحوه پنهان کردن پیام های شبکه را با این گزینه در هر دو نشان می دهد تنظیمات و در تنظیمات کنسول .
این ویدیو نحوه فعال کردن این گزینه را در هر دو نشان می دهد تنظیمات و در کنسول > تنظیمات و زمینه را در کنسول انتخاب کنید.
این ویدیو نحوه فعال کردن این گزینه را در هر دو نشان می دهد Settings and Console > Settings را وارد کنید و پیامهای
XHR finished loading
در کنسول وارد کنید.
میتوانید همین گزینه را در Console > Settings پیدا کنید.
این ویدیو نشان می دهد که با فشار دادن Enter قبل و بعد از فعال کردن این گزینه چه اتفاقی می افتد.
میتوانید همین گزینه را در Console > Settings پیدا کنید.
میتوانید همین گزینه را در Console > Settings پیدا کنید.
میتوانید همین گزینه را در Console > Settings پیدا کنید.
این ویدئو پیش نمایش های مختلف خروجی را نشان می دهد.
به عبارت دیگر، پس از ارزیابی، navigator.userActivation.isActive
را روی true
قرار می دهد. میتوانید همین گزینه را در Console > Settings پیدا کنید.
این ویدیو نتیجه ارزیابی navigator.userActivation.isActive
را قبل و بعد از فعال کردن این گزینه نشان می دهد.
console.trace()
گسترشیافته را هنگامی که آنها را ثبت میکند نمایش دهد. Navigated to
و گزارشها در تمام صفحات ذخیره شود.میتوانید همین گزینه را در Console > Settings پیدا کنید.
این بخش گزینه هایی را فهرست می کند که مدیریت پیوند را برای برنامه های افزودنی Chrome DevTools سفارشی می کند.
این بخش گزینه هایی را فهرست می کند که چگونه DevTools تغییراتی را که انجام می دهید ذخیره می کند.
برای اطلاعات بیشتر، موارد لغو محلی را ببینید.
این بخش گزینه هایی را فهرست می کند که رفتار Debugger را کنترل می کنند.
صفحه را دوباره بارگیری کنید تا ببینید آیا و چگونه صفحه به جاوا اسکریپت در حین بارگیری بستگی دارد یا خیر.
وقتی جاوا اسکریپت غیرفعال است، کروم موارد مربوطه را نشان می دهد نماد در نوار آدرس و DevTools یک هشدار نشان می دهد
نماد کنار منابع
به طور پیشفرض، اگر چارچوبی که شما استفاده میکنید از چنین ردیابی پشتیبانی میکند، Debugger تلاش میکند تا عملیات ناهمگام را ردیابی کند.
برای اطلاعات بیشتر، مشاهده ردیابی پشته ناهمگام را ببینید.
این بخش گزینه هایی را فهرست می کند که جلوه های جهانی در DevTools دارند.
target=_blank
. این ویدیو ابتدا نحوه کلیک روی یک پیوند و باز کردن یک برگه جدید *بدون* ابزار DevTools را نشان می دهد. سپس وقتی این گزینه را فعال می کنید، یک تب جدید *با* DevTools باز می شود.
این ویدیو ابتدا نشان میدهد که چگونه DevTools هنگام تایپ یک عبارت جستجو، «پرش» میکند. سپس هنگامی که این گزینه را فعال می کنید، DevTools شما را با فشار دادن Enter به اولین نتیجه می برد.
این بخش به شما امکان می دهد همگام سازی تنظیمات را بین دستگاه ها تنظیم کنید.
برای استفاده از این تنظیم، ابتدا Chrome Sync را فعال کنید . برای اطلاعات بیشتر، تنظیمات همگامسازی را ببینید.