در این مرجع جامع ویژگی‌های Chrome DevTools مربوط به مشاهده و تغییر CSS، گردش‌های کاری جدید را کاوش کنید.
برای آشنایی با اصول اولیه، مشاهده و تغییر CSS را ببینید.
عنصری را انتخاب کنید
پانل عناصر در DevTools به شما امکان می‌دهد CSS یک عنصر را در هر زمان مشاهده یا تغییر دهید.
در نماگرفت، عنصر h1 که در درخت DOM با رنگ آبی برجسته شده است، عنصر انتخاب‌شده است.
در سمت چپ، سبک‌های عنصر در برگه سبک‌ها نشان داده می‌شود. در سمت چپ، عنصر در نمای پدیداری برجسته شده است، اما فقط به این دلیل که موشواره در درخت DOM روی آن قرار دارد.
برای آموزش گام‌به‌گام، مشاهده CSS عنصر را ببینید.
روش‌های زیادی برای انتخاب عنصر وجود دارد:
- در نمای دید، روی عنصر کلیک راست کنید و بازرسی را انتخاب کنید.
- در DevTools، روی انتخاب عنصر
کلیک کنید یا Command+Shift+C (Mac) یا
Control+Shift+C (Windows، Linux) را فشار دهید، سپس روی عنصر در
نمای هدف کلیک کنید. - در DevTools، روی عنصر در درخت DOM کلیک کنید.
- در DevTools، پُرسمانی مانند
document.querySelector('p')را در Console اجرا کنید، روی نتیجه کلیک راست کنید، و سپس نمایش در پانل Elements را انتخاب کنید.
مشاهده CSS
از زبانه‌های عناصر > سبک‌ها و محاسبه‌شده برای مشاهده قوانین CSS و تشخیص مشکلات CSS استفاده کنید.
پیمایش با پیوندها
برگه سبک‌ها پیوندها را در مکان‌های مختلف به مکان‌های مختلف دیگر نمایش می‌دهد، ازجمله اما نه محدود به:
- در کنار قوانین CSS، به شیوه‌نامه‌ها و منابع CSS. این پیوندها پانل منابع را باز می‌کنند. اگر برگه سبک کوچک شده است، خوانا کردن فایل کوچک‌شده را ببینید.
- در بخش‌های منشأگرفته از ...، به عناصر والد.
- در تماس‌های
var()، به اظهارنامه‌های ویژگی سفارشی. - در ویژگی‌های خلاصه
animation، به@keyframes. - پیوندهای بیشتر بدانید در نکته‌ابزارهای اسناد.
- و موارد دیگر.
در اینجا برخی‌از آن‌ها برجسته شده است:
پیوندها ممکن است سبک متفاوتی داشته باشند. اگر مطمئن نیستید چیزی پیوند است یا نه، روی آن کلیک کنید تا متوجه شوید.
نکته‌ابزارهایی را با مستندات CSS، ویژگی، و مقادیر دارایی سفارشی مشاهده کنید
عناصر > سبک‌ها وقتی نشانگر را روی عناصر خاصی نگه می‌دارید، نکته‌ابزارهایی با اطلاعات مفید نشان می‌دهد.
مشاهده اسناد CSS
برای دیدن نکته‌ابزار با شرح کوتاه CSS، نشانگر را روی نام ویژگی در برگه سبک‌ها نگه دارید.
روی بیشتر بدانید کلیک کنید تا به مرجع MDN CSS درباره این ویژگی بروید.
برای خاموش کردن نکته‌ابزارها، 
نمایش داده نشود را علامت بزنید.
برای روشن کردن مجدد آن‌ها، 
تنظیمات > اولویت‌ها > عناصر > 
نمایش نکته‌ابزار اسناد CSS را علامت بزنید.
مشاهده ویژگی انتخابگر
برای دیدن نکته‌ابزاری با وزن ویژگی آن و برجسته کردن عناصر منطبق در نمای دید، نشانگر را روی گزینشگری در برگه سبک‌ها—ازجمله گزینشگرهای والد در قوانین CSS تودرتو، قوانین تودرتو به‌ارث‌رسیده، و @nested-declarations قوانین—نگه دارید.
مشاهده مقادیر دارایی‌های سفارشی
نشانگر را روی --custom-property نگه دارید تا مقدار آن را در نکته‌ابزار ببینید.
مشاهده CSS نامعتبر، لغوشده، غیرفعال، و غیره
برگه سبک‌ها انواع مختلفی از مشکلات CSS را تشخیص می‌دهد و آن‌ها را به روش‌های مختلف برجسته می‌کند.
درک CSS در برگه «سبک‌ها» را ببینید.
فقط CSS را که واقعاً برای عنصر اعمال شده است مشاهده کنید
برگه سبک‌ها همه قوانینی را که برای یک عنصر اعمال می‌شود، ازجمله اعلان‌هایی که لغو شده‌اند، نشان می‌دهد. وقتی به اعلان‌های لغوشده علاقه‌مند نیستید، از برگه محاسبه‌شده استفاده کنید تا فقط CSS را که واقعاً روی عنصر اعمال می‌شود مشاهده کنید.
- عنصری را انتخاب کنید.
- به برگه محاسبه‌شده در پانل عناصر بروید.
برای دیدن همه ویژگی‌ها، چارگوش انتخاب نمایش همه را علامت بزنید.
درک CSS در برگه «محاسبه‌شده» را ببینید.
مشاهده دارایی‌های CSS به‌ترتیب حروف الفبا
از برگه محاسبه‌شده استفاده کنید. مشاهده فقط CSS که واقعاً برای عنصر اعمال شده است را ببینید.
مشاهده ویژگی‌های CSS موروثی
چارگوش نمایش همه را در برگه محاسبه‌شده علامت بزنید. مشاهده فقط CSS که واقعاً به عنصر اعمال شده است را ببینید.
یا اینکه در برگه سبک‌ها پیمایش کنید و بخش‌هایی با نام Inherited from <element_name> را پیدا کنید.
مشاهده قوانین CSS at
قوانین At عبارت‌های CSS هستند که به شما امکان می‌دهند رفتار CSS را کنترل کنید. عناصر > سبک‌ها قوانین at-rule زیر را در بخش‌های اختصاصی نشان می‌دهد:
مشاهده @property قانون at
@property قانون @ در CSS به شما امکان می‌دهد دارایی‌های سفارشی CSS را به‌طور صریح تعریف کنید و آن‌ها را در برگه سبک بدون اجرای JavaScript ثبت کنید.
برای دیدن نکته‌ابزاری با مقدار، توصیف‌گرها، و پیوند ثبت آن در بخش جمع‌شدنی @property در پایین برگه سبک‌ها، نشانگر را روی نام چنین دارایی‌ای در برگه سبک‌ها نگه دارید.
برای ویرایش قانون @property، روی نام یا مقدار آن دوبار کلیک کنید.
مشاهده @supports قانون @
برگه سبک‌ها دستورات CSS @supports را درصورت اعمال شدن روی عنصر به شما نشان می‌دهد. برای مثال، عنصر زیر را بازرسی کنید:
اگر مرورگرتان از تابع lab() پشتیبانی کند، عنصر سبز است، درغیراین‌صورت بنفش است.
مشاهده @scope قانون @
زبانه سبک‌ها قوانین CSS @scope را درصورت اعمال شدن بر عنصر نشان می‌دهد.
قوانین جدید @scope بخشی از مشخصات CSS Cascading and Inheritance Level 6 هستند. این قوانین به شما امکان می‌دهند تا سبک‌های CSS را محدود کنید، به‌عبارت دیگر، سبک‌ها را به‌طور صریح به عناصر خاصی اعمال کنید.
قانون @scope را در پیش‌نمایش زیر مشاهده کنید:
- نوشتار روی کارت را در پیش‌نمایش بازرسی کنید.
- در برگه سبک‌ها، قانون
@scopeرا پیدا کنید.
در این مثال، قانون @scope اعلامیه CSS سراسری background-color را برای همه عناصر <p> درون عناصر دارای کلاس card ملغی می‌کند.
برای ویرایش کردن قانون @scope، روی آن دوکلیک کنید.
مشاهده @font-palette-values قانون at
@font-palette-values قانون CSS at به شما امکان می‌دهد مقادیر پیش‌فرض دارایی font-palette را سفارشی‌سازی کنید. عناصر > سبک‌ها این قانون at را در بخش اختصاصی نشان می‌دهد.
بخش @font-palette-values را در پیش‌نمایش بعدی ببینید:
- خط دوم نوشتار را در پیش‌نمایش بازرسی کنید.
- در سبک‌ها، بخش
@font-palette-valuesرا پیدا کنید.
در این مثال، مقادیر پالت قلم --New مقادیر پیش‌فرض قلم رنگی را ملغی می‌کند.
برای ویرایش مقادیر سفارشی، روی آن‌ها دوکلیک کنید.
مشاهده @position-try قانون @
قانون CSS @position-try به‌همراه ویژگی position-try-options به شما امکان می‌دهد موقعیت‌های لنگر جایگزین برای عناصر تعریف کنید. برای کسب اطلاعات بیشتر، معرفی میانای برنامه‌سازی کاربردی موقعیت‌یابی لنگر CSS را ببینید.
عناصر > سبک‌ها موارد زیر را حل و پیوند می‌دهد:
- مقادیر دارایی
position-try-optionsبه بخش اختصاصی@position-try --name. - مقادیر ویژگی
position-anchorو آرگومان‌هایanchor()به عناصر مربوطه با مشخصه‌هایpopovertarget.
مقادیر position-try-options و بخش‌های @position-try را در پیش‌نمایش بعدی بازرسی کنید:
popover- در پیش‌نمایش، زیرمنو را باز کنید، یعنی روی حساب شما و سپس ویترین فروشگاه کلیک کنید.
- عنصر دارای
id="submenu"را در پیش‌نمایش بازرسی کنید. - در سبک‌ها، دارایی
position-try-optionsرا پیدا کنید و روی مقدار--bottomآن کلیک کنید. زبانه سبک‌ها شما را به بخش@position-tryمربوطه می‌برد. - روی پیوند مقدار
position-anchorیا همانanchor()استدلال‌ها کلیک کنید. پانل عناصر عنصری را با مشخصهpopovertargetمربوطه انتخاب می‌کند و برگه سبک‌ها «سی‌اس‌اس» عنصر را نشان می‌دهد.
برای ویرایش مقادیر، روی آن‌ها دوکلیک کنید.
مشاهده مدل جعبه‌ای عنصر
برای مشاهده مدل جعبه یک عنصر، به برگه سبک‌ها بروید و روی دکمه 
نمایش نوار کناری در نوار اقدام کلیک کنید.
برای تغییر مقدار، روی آن دوکلیک کنید.
جستجو و فیلتر کردن CSS عنصر
از چارگوش فیلتر در برگه‌های سبک‌ها و محاسبه‌شده برای جستجوی انتخاب‌کننده‌های CSS خاص (ازجمله انتخاب‌کننده‌های والد در قوانین تودرتو)، ویژگی‌ها، یا مقادیر استفاده کنید.
برای جستجوی ویژگی‌های به‌ارث‌رسیده در برگه محاسبه‌شده، چارگوش نمایش همه را علامت بزنید.
برای پیمایش در برگه محاسبه‌شده، با علامت زدن گروه، ویژگی‌های فیلترشده را در دسته‌های جمع‌شدنی گروه‌بندی کنید.
شبیه‌سازی صفحه کانونی
اگر تمرکز را از صفحه به DevTools تغییر دهید، برخی‌از عناصر هم‌پوشانی اگر با تمرکز فعال شده باشند به‌طور خودکار پنهان می‌شوند. برای مثال، فهرست‌های کرکره‌ای، منوها، یا انتخاب‌کننده‌های تاریخ. گزینه شبیه‌سازی صفحه متمرکز به شما امکان می‌دهد چنین عنصری را به‌گونه‌ای اشکال‌زدایی کنید که گویی در کانون توجه است.
شبیه‌سازی صفحه متمرکز را در این صفحه نمایشی امتحان کنید:
- عنصر ورودی را کانونی کنید. عنصر دیگری زیر آن ظاهر می‌شود.
- DevTools را باز کنید. اکنون پنجره DevTools به‌جای صفحه در کانون توجه است، بنابراین عنصر دوباره ناپدید می‌شود.
- در عناصر > سبک‌ها، روی :hov کلیک کنید، شبیه‌سازی صفحه متمرکزشده را علامت بزنید، و مطمئن شوید عنصر ورودی انتخاب شده باشد. اکنون می‌توانید عنصر زیر آن را بازرسی کنید.
همچنین می‌توانید همین گزینه را در پانل پرداز پیدا کنید.
برای آشنایی با روش‌های بیشتر برای ثابت کردن عنصر، ثابت کردن صفحه و بازرسی عناصر ناپدیدشونده را ببینید.
تغییر وضعیت شبه‌کلاس
برای روشن/خاموش کردن شبه‌کلاس:
- عنصری را انتخاب کنید.
- در پانل عناصر، به برگه سبک‌ها بروید.
- روی :hov کلیک کنید.
- شبه‌کلاس موردنظرتان را برای روشن کردن علامت بزنید.
در این مثال، می‌بینید که DevTools اعلامیه background-color را به عنصر اعمال می‌کند، حتی اگر عنصر واقعاً روی آن شناور نباشد.
برگه سبک‌ها کلاس‌های کاذب زیر را برای همه عناصر نشان می‌دهد:
علاوه‌براین، برخی‌از عناصر ممکن است کلاس‌های کاذب خودشان را داشته باشند. وقتی چنین عنصری را انتخاب می‌کنید، برگه سبک‌ها بخش اجباری کردن وضعیت خاص عنصر را نشان می‌دهد که می‌توانید آن را ازهم باز کنید و کلاس‌های کاذب مختص آن عنصر را روشن کنید.
برای آموزش تعاملی، به افزودن شبه‌وضعیت به کلاس مراجعه کنید.
مشاهده شبه‌عناصر برجسته‌سازی موروثی
عناصر کاذب به شما امکان می‌دهند بخش‌های خاصی از عناصر را سبک‌دهی کنید. شبه‌عناصر برجسته بخش‌هایی از سند با وضعیت «انتخاب‌شده» هستند و به‌صورت «برجسته» سبک‌بندی می‌شوند تا این وضعیت را به کاربر نشان دهند. برای مثال، چنین عناصر کاذبی عبارت‌اند از ::selection، ::spelling-error، ::grammar-error، و ::highlight.
همان‌طور که در مشخصات ذکر شده است، وقتی چندین سبک باهم تداخل داشته باشند، آبشار سبک برنده را تعیین می‌کند.
برای درک بهتر وراثت و اولویت قوانین، می‌توانید عناصر کاذب برجسته موروثی را مشاهده کنید:
-
من سبک شبه‌عنصر برجسته ولی‌ام را به ارث برده‌ام. من را انتخاب کنید!
بخشی از نوشتار بالا را انتخاب کنید.
در برگه سبک‌ها، به پایین پیمایش کنید تا بخش
Inherited from ::selection pseudo of...را پیدا کنید.
مشاهده لایه‌های آبشاری
لایه‌های آبشاری کنترل صریح‌تری بر فایل‌های CSS شما فراهم می‌کنند تا از تداخل‌های مربوط به ویژگی‌های سبک جلوگیری شود. این ویژگی برای پایگاه‌های کد بزرگ، سیستم‌های طراحی، و هنگام مدیریت سبک‌های طرف سوم در برنامه‌ها مفید است.
برای مشاهده لایه‌های آبشاری، عنصر بعدی را بازرسی کنید و عناصر > سبک‌ها را باز کنید.
در برگه سبک‌ها، ۳ لایه آبشاری و سبک‌های آن‌ها را مشاهده کنید: page، component، و base.
برای مشاهده ترتیب لایه، روی نام لایه یا دکمه 
فعال/ غیرفعال کردن نمای لایه‌های CSS کلیک کنید.
لایه page بالاترین ویژگی را دارد، بنابراین پس‌زمینه عنصر سبز است.
مشاهده صفحه در حالت چاپ
برای مشاهده صفحه در حالت چاپ:
- منو فرمان را باز کنید.
- تایپ کردن
Renderingرا شروع کنید وShow Renderingرا انتخاب کنید. - در منو کرکره‌ای شبیه‌سازی رسانه CSS، چاپ را انتخاب کنید.
مشاهده CSS استفاده‌شده و استفاده‌نشده با برگه «پوشش»
برگه «پوشش» به شما نشان می‌دهد که صفحه واقعاً از چه CSS استفاده می‌کند.
- وقتی DevTools در کانون توجه است، کلیدهای Command+Shift+P (Mac) یا Control+Shift+P (Windows، Linux، ChromeOS) را فشار دهید تا «منو فرمان» باز شود.
تایپ کردن
coverageرا شروع کنید.
نمایش پوشش را انتخاب کنید. برگه «پوشش» ظاهر می‌شود.
روی
مجدد بار شود کلیک کنید.
صفحه مجدداً بار می‌شود و برگه پوشش نمای کلی از میزان استفاده از CSS (و جاوا اسکریپت) در هر فایلی که مرورگر بار می‌کند ارائه می‌دهد.
رنگ سبز نشان‌دهنده CSS استفاده‌شده است. رنگ قرمز نشان‌دهنده CSS استفاده‌نشده است.
روی فایل CSS کلیک کنید تا تفکیک خط‌به‌خط CSS مورداستفاده آن را در پیش‌نمایش بالا ببینید.
در نماگرفت، خط‌های ۵۵ تا ۵۷ و ۶۵ تا ۶۷ از
devsite-google-blue.cssاستفاده نشده‌اند، درحالی‌که خط‌های ۵۹ تا ۶۳ استفاده شده‌اند.
اجرای اجباری حالت پیش‌نمایش چاپ
به اجبار DevTools به حالت پیش‌نمایش چاپ مراجعه کنید.
کپی کردن CSS
از یک منوِ کرکره‌ای در برگه سبک‌ها، می‌توانید قوانین، اظهارات، ویژگی‌ها، مقادیر CSS جداگانه را کپی کنید
علاوه‌براین، می‌توانید دارایی‌های CSS را در دستورگان جاوا اسکریپت کپی کنید. اگر از کتابخانه‌های CSS-in-JS استفاده می‌کنید، این گزینه مفید است.
برای کپی کردن CSS:
- عنصری را انتخاب کنید.
- در برگه عناصر > سبک‌ها، روی ویژگی CSS کلیک راست کنید.
یکی از گزینه‌های زیر را از منوِ کرکره‌ای انتخاب کنید:
- کپی کردن اظهارنامه. ویژگی و مقدار آن را در نحو CSS کپی می‌کند:
css property: value; - کپی کردن دارایی. فقط نام
propertyرا کپی می‌کند. - کپی کردن مقدار. فقط
valueرا کپی می‌کند. - کپی کردن قانون. کل قانون CSS را کپی می‌کند:
css selector[, selector] { property: value; property: value; ... } - کپی کردن تعریف به‌عنوان JS. دارایی و مقدار آن را در دستورگان جاوا اسکریپت کپی می‌کند:
js propertyInCamelCase: 'value' - کپی کردن همه تعریف‌ها. همه ویژگی‌ها و مقادیر آن‌ها را در قانون CSS کپی می‌کند:
css property: value; property: value; ... کپی کردن همه تعریف‌ها به‌عنوان JS. همه دارایی‌ها و مقادیر آن‌ها را در دستورگان جاوا اسکریپت کپی می‌کند: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
کپی کردن همه تغییرات CSS. تغییراتی را که در برگه سبک‌ها ایجاد می‌کنید در همه تعریف‌ها کپی می‌کند.
مشاهده مقدار محاسبه‌شده. شما را به زبانه «محاسبه‌شده» می‌برد.
- کپی کردن اظهارنامه. ویژگی و مقدار آن را در نحو CSS کپی می‌کند:
تغییر «سرویس مقایسه قیمت»
این بخش همه روش‌هایی را که می‌توانید CSS را در عناصر > سبک‌ها تغییر دهید فهرست می‌کند.
علاوه‌براین، می‌توانید:
تغییر دادن CSS با تکمیل کد
برای آزمایش کردن ترکیب‌های پیچیده‌تر دارایی‌های CSS، مثل گرادیان‌ها یا سایه‌های جعبه، بدون به‌خاطر آوردن نحو دقیق آن‌ها، یا برای ساختن سریع چیدمان‌های شبکه و انعطاف‌پذیر، با تکیه بر چندین دارایی مرتبط، می‌توانید تایپ دارایی CSS را شروع کنید و از تکمیل کد استفاده کنید.
افزودن اعلان CSS به عنصر
ازآنجایی‌که ترتیب بیانیه‌ها بر نحوه سبک‌دهی عنصر تأثیر می‌گذارد، می‌توانید بیانیه‌ها را به روش‌های مختلف اضافه کنید:
- اظهارنامه به‌خط اضافه کنید. معادل افزودن مشخصه
styleبه HTML عنصر است. - افزودن اظهارنامه به قانون سبک.
از کدام گردش کار باید استفاده کنید؟ برای اکثر سناریوها، احتمالاً می‌خواهید از گردش کار اعلام درون‌خطی استفاده کنید. اعلام‌های درون‌خطی ویژگی‌های بالاتری نسبت به اعلام‌های خارجی دارند، بنابراین گردش کار درون‌خطی تضمین می‌کند که تغییرات همان‌طور که انتظار دارید در عنصر اعمال شوند. برای اطلاعات بیشتر درباره ویژگی، به انواع انتخابگر مراجعه کنید.
اگر درحال اشکال‌زدایی سبک‌های یک عنصر هستید و باید به‌طور خاص آزمایش کنید که وقتی یک اعلان در مکان‌های مختلف تعریف می‌شود چه اتفاقی می‌افتد، از گردش کار دیگر استفاده کنید.
افزودن اظهارنامه به‌خط
برای افزودن بیانیه درون‌خطی:
- عنصری را انتخاب کنید.
- در برگه سبک‌ها، بین قلاب‌های بخش element.style کلیک کنید. مکان‌نما متمرکز می‌شود و به شما امکان می‌دهد نوشتار وارد کنید.
- نام دارایی را وارد کنید و کلید Enter را فشار دهید.
مقدار معتبری برای آن ویژگی وارد کنید و کلید Enter را فشار دهید. در درخت DOM، می‌توانید ببینید که مشخصه
styleبه عنصر اضافه شده است.
در نماگرفت، ویژگی‌های
margin-topوbackground-colorروی عنصر انتخاب‌شده اعمال شده است. در درخت DOM می‌توانید اعلان‌های منعکس‌شده در مشخصهstyleعنصر را ببینید.
افزودن اظهارنامه به قانون سبک
برای افزودن یک اعلامیه به یک قانون سبک موجود:
- عنصری را انتخاب کنید.
- در برگه سبک‌ها، بین قلاب‌های قانون سبکی که می‌خواهید اظهارنامه را به آن اضافه کنید کلیک کنید. مکان‌نما تمرکز می‌کند و به شما امکان می‌دهد نوشتار وارد کنید.
- نام دارایی را وارد کنید و کلید Enter را فشار دهید.
- مقدار معتبری برای آن ویژگی وارد کنید و کلید Enter را فشار دهید.
در نماگرفت، قانون سبک، اعلان جدید border-bottom-style:groove را دریافت می‌کند.
تغییر نام یا مقدار بیانیه
برای تغییر نام یا مقدار بیانیه، روی آن دوکلیک کنید. برای میان‌برهای افزایش یا کاهش سریع مقدار با ۰٫۱، ۱، ۱۰، یا ۱۰۰ واحد، تغییر مقادیر شمارا با میان‌برهای صفحه‌کلید را ببینید.
تغییر دادن مقادیر قابل‌شمارش با میان‌برهای صفحه‌کلید
هنگام ویرایش مقدار شمارشی یک اعلان، برای مثال، font-size، می‌توانید از میان‌برهای صفحه‌کلید زیر برای افزایش مقدار به میزان ثابت استفاده کنید:
- گزینه+بالا (Mac) یا دگرساز+بالا (Windows، Linux) برای افزایش ۰٫۱.
- برای تغییر مقدار به میزان ۱، یا به میزان ۰٫۱ اگر مقدار فعلی بین ۱- و ۱ است، از بالا استفاده کنید.
- برای افزایش ۱۰ واحدی، تبدیل+بالا را فشار دهید.
- Shift+Command+Up (Mac) یا Control+Shift+Page Up (Windows، Linux) برای افزایش مقدار به ۱۰۰.
کاهش دادن نیز کار می‌کند. کافی است هر نمونه از بالا را که قبلاً ذکر شد با پایین جایگزین کنید.
تغییر مقادیر طول
می‌توانید از اشاره‌گر برای تغییر هر ویژگی دارای طول، مانند عرض، ارتفاع، لایه داخلی، حاشیه، یا مرز استفاده کنید.
برای تغییر واحد طول:
- نشانگر را روی نام واحد نگه دارید و توجه کنید که زیر آن خط کشیده شده است.
روی نام واحد کلیک کنید تا واحدی را از منوی کرکره‌ای انتخاب کنید.
برای تغییر دادن مقدار طول:
- نشانگر را روی مقدار واحد نگه دارید و توجه کنید که نشانگر به پیکان دوطرفه افقی تغییر می‌کند.
برای افزایش یا کاهش مقدار، به‌صورت افقی بکشید.
برای تنظیم مقدار با ضریب ۱۰، هنگام کشیدن، Shift را نگه دارید.
افزودن کلاس به عنصر
برای افزودن کلاس به عنصر:
- عنصر را در درخت DOM انتخاب کنید.
- روی .cls کلیک کنید.
- نام کلاس را در چارگوش افزودن کلاس جدید وارد کنید.
- کلید Enter را فشار دهید.
شبیه‌سازی اولویت‌های زمینه روشن و تیره و فعال کردن حالت تاریک خودکار
برای تغییر وضعیت حالت تاریک خودکار یا شبیه‌سازی اولویت کاربر برای زمینه روشن یا تیره:
- در برگه عناصر > سبک‌ها، روی
روشن/ خاموش کردن شبیه‌سازی‌های رایج پرداز زدن کلیک کنید.
یکی از گزینه‌های زیر را از فهرست کرکره‌ای انتخاب کنید:
- prefers-color-scheme: light. نشان می‌دهد که کاربر زمینه روشن را ترجیح می‌دهد.
- prefers-color-scheme: dark. نشان می‌دهد که کاربر زمینه تیره را ترجیح می‌دهد.
- حالت تاریک خودکار. صفحه شما را در حالت تاریک نمایش می‌دهد، حتی اگر آن را پیاده‌سازی نکرده باشید. علاوه‌براین،
prefers-color-schemeرا به‌طور خودکار رویdarkتنظیم می‌کند.
این منو کرکره‌ای میان‌بری برای گزینه‌های شبیه‌سازی ویژگی رسانه CSS prefers-color-scheme و فعال کردن حالت تاریک خودکار در برگه پردازنده است.
تغییر وضعیت کلاس
برای فعال یا غیرفعال کردن کلاس در عنصر:
- عنصر را در درخت DOM انتخاب کنید.
- بخش کلاس‌های عنصر را باز کنید. افزودن کلاس به عنصر را ببینید. زیر چارگوش افزودن کلاس جدید، همه کلاس‌هایی که به این عنصر اعمال می‌شوند قرار دارند.
- چارگوش انتخاب کنار کلاسی را که می‌خواهید فعال یا غیرفعال کنید علامت بزنید یا علامت آن را بردارید.
افزودن قانون سبک
برای افزودن قانون سبک جدید:
- عنصری را انتخاب کنید.
- روی قانون سبک جدید
کلیک کنید. DevTools قانون جدیدی را زیر قانون element.style درج می‌کند.
در نماگرفت، DevTools پس‌از کلیک کردن روی قانون سبک جدید، قانون سبک h1.devsite-page-title را اضافه می‌کند.
انتخاب کنید قانون به کدام برگه سبک اضافه شود
هنگام افزودن قانون سبک جدید، روی قانون سبک جدید
کلیک کنید و نگه دارید تا انتخاب کنید قانون سبک به کدام برگ سبک
اضافه شود.
تغییر وضعیت اظهارنامه
برای روشن یا خاموش کردن یک اظهارنامه:
- عنصری را انتخاب کنید.
- در برگه سبک‌ها، نشانگر را روی قانونی که اعلان را تعریف می‌کند نگه دارید. چارگوش‌های انتخاب در کنار هر اظهارنامه نشان داده می‌شود.
- چارگوش انتخاب کنار اظهارنامه را علامت بزنید یا علامت آن را بردارید. وقتی اعلانی را پاک می‌کنید، DevTools روی آن خط می‌کشد تا نشان دهد که دیگر فعال نیست.
در نماگرفت، ویژگی color برای عنصر انتخاب‌شده فعلی خاموش است.
ویرایش عناصر کاذب ::view-transition درطول پویانمایی
بخش مربوطه را در پویانمایی‌ها ببینید.
برای اطلاعات بیشتر، گذار ساده و روان با View Transitions API را ببینید.
تراز کردن موارد جدولی و محتوای آن‌ها با «ویرایشگر جدولی»
بخش مربوطه در «بازرسی شبکه CSS» را ببینید.
تغییر رنگ‌ها با «انتخابگر رنگ»
بازرسی و اشکال‌زدایی رنگ‌های HD و غیرHD با «انتخابگر رنگ» را ببینید.
تغییر مقدار زاویه با «ساعت زاویه‌ای»
ساعت زاویه یک واسط کاربر گرافیکی برای تغییر دادن <angle> در مقادیر ویژگی CSS ارائه می‌دهد.
برای باز کردن ساعت زاویه‌ای:
- عنصری را با اعلام زاویه انتخاب کنید.
در برگه سبک‌ها، اعلان
transformیاbackgroundرا که می‌خواهید تغییر دهید پیدا کنید. روی چارگوش پیش‌نمایش زاویه در کنار مقدار زاویه کلیک کنید.
ساعت‌های کوچک در سمت چپ
-5degو0.25turnپیش‌نمایش‌های زاویه هستند.برای باز کردن ساعت زاویه‌ای، روی پیش‌نمایش کلیک کنید.
با کلیک کردن روی دایره ساعت زاویه، مقدار زاویه را تغییر دهید یا موشواره را پیمایش کنید تا مقدار زاویه را ۱ درجه افزایش / کاهش دهید.
میان‌برهای صفحه‌کلید بیشتری برای تغییر مقدار زاویه وجود دارد. در میان‌برهای صفحه‌کلید پانل «سبک‌ها» بیشتر بدانید.
تغییر سایه کادر و نوشتار با «ویرایشگر سایه»
ویرایشگر سایه یک رابط کاربری گرافیکی برای تغییر text-shadow و box-shadow بیانیه‌های CSS ارائه می‌دهد.
برای تغییر سایه‌ها با ویرایشگر سایه:
عنصری را با اعلان سایه انتخاب کنید. برای مثال، عنصر بعدی را انتخاب کنید.
در برگه Styles، نماد سایه
را در کنار اعلان text-shadowیاbox-shadowپیدا کنید.
روی نماد سایه کلیک کنید تا ویرایشگر سایه باز شود.
خصوصیات سایه را تغییر دهید:
- نوع (فقط برای
box-shadow). بیرون‌زدگی یا تورفتگی را انتخاب کنید. - آفست‌های X و Y. نقطه آبی را بکشید یا مقادیر را مشخص کنید.
- محو کردن. لغزنده را بکشید یا مقداری را مشخص کنید.
- پخش (فقط برای
box-shadow). لغزنده را بکشید یا مقداری را مشخص کنید.
- نوع (فقط برای
تغییرات اعمال‌شده در عنصر را مشاهده کنید.
ویرایش زمان‌بندی پویانمایی و انتقال با «ویرایشگر آسان‌سازی»
ویرایشگر هموارسازی یک واسط کاربر گرافیکی برای تغییر مقادیر transition-timing-function و animation-timing-function ارائه می‌دهد.
برای باز کردن ویرایشگر آسان‌سازی:
- عنصری را با اعلان تابع زمان‌بندی انتخاب کنید، مثل عنصر
<body>در این صفحه. - در برگه سبک‌ها، نماد بنفش
را در کنار اعلان‌های transition-timing-function،animation-timing-function، یا ویژگی خلاصهtransitionپیدا کنید.
- روی نماد کلیک کنید تا ویرایشگر هموارسازی باز شود:
استفاده از پیش‌تنظیم‌ها برای تنظیم زمان‌بندی‌ها
برای تنظیم زمان‌بندی با یک کلیک، از پیش‌تنظیم‌ها در ویرایشگر آسان‌سازی استفاده کنید:
- در ویرایشگر آسان‌سازی، برای تنظیم مقدار کلیدواژه، روی یکی از دکمه‌های انتخابگر کلیک کنید:
- خطی
- ease-in-out
- ease-in
- ease-out
- خطی
در تعویض‌کننده پیش‌تنظیمات، روی دکمه‌های
یا 
کلیک کنید تا یکی از پیش‌تنظیمات زیر را انتخاب کنید:- پیش‌تنظیم‌های خطی:
elastic،bounce، یاemphasized. - پیش‌تنظیم‌های بزی مکعبی:
- پیش‌تنظیم‌های خطی:
| کلیدواژه زمان‌بندی | پیش‌تنظیم | بزیه مکعبی |
|---|---|---|
| آسان در داخل و خارج | درون بیرون، سینوسی | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| درون بیرون، درجه دوم | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
| داخل خارج، مکعبی | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
| خروج سریع، ورود آهسته | cubic-bezier(0.4, 0, 0.2, 1) |
|
| داخل، بیرون، عقب | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
| ایز این | In, Sine | cubic-bezier(0.47, 0, 0.75, 0.72) |
| درون، درجه دوم | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| اینچ مکعب | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
| داخل، پشت | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
| محو شدن سریع، خطی به داخل | cubic-bezier(0.4, 0, 1, 1) |
|
| ایز اوت | خارج، سینوس | cubic-bezier(0.39, 0.58, 0.57, 1) |
| خارج، درجه دوم | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| بیرون، مکعبی | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
| خروج خطی، ورود آهسته | cubic-bezier(0, 0, 0.2, 1) |
|
| بیرون، پشت | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
پیکربندی زمان‌بندی‌های سفارشی
برای تنظیم مقادیر سفارشی برای توابع زمان‌بندی، از نقاط کنترل روی خطوط استفاده کنید:
برای توابع خطی، در هر جایی از خط کلیک کنید تا نقطه کنترلی اضافه شود و آن را بکشید. برای برداشتن نقطه، دوکلیک کنید.
برای توابع «بزیه مکعبی»، یکی از نقاط کنترل را بکشید.
هر تغییری باعث راه‌اندازی پویانمایی توپ در پیش‌نمایش در بالای ویرایشگر می‌شود.
(آزمایشی) کپی کردن تغییرات CSS
با فعال کردن این آزمایش، زبانه سبک‌ها تغییرات CSS شما را با رنگ سبز برجسته می‌کند.
برای کپی کردن یک تغییر بیانیه CSS، نشانگر را روی بیانیه برجسته نگه دارید و روی دکمه 
کپی کردن کلیک کنید.
برای کپی کردن همه تغییرات CSS در سراسر تعریف‌ها به‌طور هم‌زمان، روی هر تعریفی کلیک راست کنید و کپی کردن همه تغییرات CSS را انتخاب کنید.
علاوه‌براین، می‌توانید تغییراتی را که ایجاد می‌کنید با برگه تغییرات ردیابی کنید.