크롬 개발자 도구에서 CSS 코드를 보는 방법

Chrome 개발자 도구에서 CSS 코드를 보는 방법: 먼저 디버깅 도구를 열고 디버깅 도구의 왼쪽 상단에 있는 요소 검사 버튼을 클릭한 다음 스타일 탭에서 CSS 규칙 옆에 있는 링크를 클릭하고 규칙 테이블을 정의하는 외부 스타일, 마지막으로 스타일의 소스 파일을 확인합니다.

권장: "css video tutorial"

chrome devtools는 프런트엔드 개발에 더 이상 익숙하지 않은 디버깅 도구입니다. 그렇다면 우리는 이에 대해 얼마나 알고 있습니까? 다음은 몇 가지 일반적인 CSS 디버깅 작업을 요약한 것입니다.

CSS 보기

요소에 해당하는 스타일 보기

1 디버깅 도구를 열고 디버깅 도구 왼쪽 상단의 요소 확인 버튼을 클릭하거나 단축키(Ctrl/Cmd + Shift + C)

2. 보고 싶은 페이지를 선택하세요. 검사된 요소는 DOM 트리에서 파란색 배경으로 강조 표시되며 스타일은 오른쪽의 styles 탭 영역에 있습니다. styles 选项卡区域内。

查看外部样式表

1、在 styles 选项卡中，单击CSS规则旁边的链接以打开定义规则的外部样式表。可以查看样式的源文件。

仅查看实际应用于元素的CSS

1、styles 选项卡中会显示适用于元素的所有规则，包括已被覆盖的声明，如果对覆盖的声明不感兴趣，可以点击与 styles 相邻的 computed 选项卡，仅查看实际应用于元素的CSS规则。

2、其中继承的属性是不透明的。选中 Show All 复选框可以查看所有继承的值。

3、注意属性的显示是按照字母顺序排列的。

4、Filter 过滤器可以按照查询规则搜索符合规则的样式。

5、当鼠标悬浮在某一行属性上时，会出现一个圆形箭头按钮，点击可以跳转到styles 选项卡所对应的样式处。

查看元素伪状态

1、在 styles 选项卡中点击 :hov 。以 :hover 为例，选中 :hover 复选框，如果
被检查的元素添加了 :hover 样式，在样式列表中就会显示此条样式。并且页面效果不用鼠标悬浮也会触发显示效果。

添加或更改CSS样式

添加内联样式

1、相当于向HTML的 style 属性的添加属性值。点击 element.style 顶部附近区域，输入新添加的样式属性名，按 Tab 键，再输入样式属性值，并按 Enter 键。这样就添加了一条内联样式。

2、查看效果：

向已有样式规则添加声明

1、单击要添加声明的样式规则的括号之间。出现光标，输入属性名，按 tab 键，输入属性值，回车。

修改已有样式规则的声明

1、在需要更改的原有样式上双击，修改样式规则，并按 Enter 键。

给元素添加CSS类

1、在 styles 选项卡中点击 .cls 。会显示一个 Add new class 的输入框，你可以输入你想要添加的类名，然后按 Enter 键。

2、点击 title

🎜외부 스타일 시트 보기🎜 🎜 1. 스타일 탭에서 CSS 규칙 옆의 링크를 클릭하여 규칙을 정의하는 외부 스타일 시트를 엽니다. 스타일의 소스 파일을 볼 수 있습니다. 🎜🎜🎜실제 애플리케이션만 보기 요소의 CSS🎜🎜1. 재정의된 선언을 포함하여 요소에 적용되는 모든 규칙이 스타일 탭에 표시됩니다. 재정의된 선언에 관심이 없으면 스타일을 클릭하세요. 인접한 계산 탭에서는 요소에 실제로 적용된 CSS 규칙만 봅니다. 🎜🎜2. 상속된 속성은 불투명합니다. 상속된 값을 모두 보려면 모두 표시 확인란을 선택하세요. 🎜🎜3. 속성은 알파벳순으로 표시됩니다. 🎜🎜4. 필터 필터는 쿼리 규칙에 따라 규칙에 맞는 스타일을 검색할 수 있습니다. 🎜🎜5. 특정 속성 행 위로 마우스를 가져가면 스타일 탭에 해당하는 스타일로 이동하려면 클릭하세요. 🎜🎜🎜요소 의사 상태 보기🎜 🎜 1. 스타일 탭에서 :hov를 클릭하세요. 예를 들어 :hover를 선택하고, 🎜선택한 요소에 스타일 목록에 :hover 스타일이 추가된 경우 :hover 확인란을 선택하세요. 바 스타일이 표시됩니다. 그리고 페이지 효과는 마우스를 올리지 않고도 디스플레이 효과를 실행합니다. 🎜🎜🎜CSS 스타일 추가 또는 변경 🎜 🎜인라인 스타일 추가🎜🎜1. HTML의 style 속성에 속성 값을 추가하는 것과 같습니다. element.style 상단 부근을 클릭하고 새로 추가된 스타일 속성 이름을 입력한 후 Tab 키를 누르고 스타일 속성 값을 입력한 후 Enter를 누릅니다. 키입니다. 인라인 스타일이 추가됩니다. 🎜🎜 2. 효과 보기: 🎜 🎜🎜기존 스타일 규칙에 추가 선언🎜 🎜1. 선언을 추가하려는 스타일 규칙의 괄호 사이를 클릭하세요. 커서가 나타나면 속성 이름을 입력하고 tab 키를 누른 후 속성 값을 입력하고 Enter를 누릅니다. 🎜🎜기존 스타일 규칙 구문 수정🎜🎜1. 변경하려는 원본 스타일을 더블클릭하고 스타일 규칙을 수정한 후 Enter 키를 누릅니다. 🎜🎜요소에 CSS 클래스 추가🎜🎜1. 스타일 탭에서 .cls를 클릭하세요. 새 클래스 추가 입력 상자가 표시됩니다. 추가하려는 클래스 이름을 입력한 후 Enter 키를 누르세요. 🎜🎜🎜2을 클릭하세요. >제목 앞의 확인란을 선택하면 스타일을 앞뒤로 전환할 수 있습니다. 🎜

새 스타일 규칙 추가

1. 스타일 탭 오른쪽 상단에 있는 더하기 기호 1➕를 클릭하면 DevTools가 element.style아래에 새 규칙을 삽입합니다. > 규칙. styles 选项卡右上角的加号1➕，DevTools会在 element.style 规则下插入一条新规则。

2、如果想在特定位置添加新样式规则，可以鼠标悬浮在插入规则的上一个样式规则处，此时会在右下角出现三个点更多操作的符号，x悬浮上去就会出现加号2➕，点击加号2就会在此条样式的后面新增一条样式规则。

3、这里的更多操作还有其他一些功能，从左往右依次是 文字阴影、盒子阴影、文字颜色、背景颜色。

切换样式声明

1、点击样式声明前的复选框就可以切换样式声明

更改元素尺寸

1、在 styles 选项卡的框模型图中，将鼠标悬浮在需要编辑的区域，双击，填入需要修改的数值，回车。盒模型的默认单位为像素，输入百分比也会转成像素值。

使用键盘快捷键更改声明值

编辑声明的值时，可以使用以下键盘快捷键将值递增固定量：

• Up 将值更改为1，如果当前值介于-1和1之间，则更改0.1。
• Option+ Up（Mac）或Alt+ Up （Windows，Linux）增加0.1。
• Shift+ Up增加10。
• Shift+ Command+ Up（Mac）或 Shift+ Page Up（Windows，Linux）将值增加100。

减量也有效。只需将Up上面提到的每个实例替换为Down。

使用Coverage选项卡查看已使用和未使用的CSS

1、按下Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux，Chrome OS），而DevTools则处于焦点以打开命令菜单。
2、开始输入coverage并选择Show Coverage。将显示 coverage
2. 특정 위치에 새 스타일 규칙을 추가하려면 삽입된 규칙이 있는 이전 스타일 규칙 위에 마우스를 올리면 오른쪽 하단에 추가 작업을 위한 점 3개가 나타납니다. 2➕에 마우스를 올리면 더하기 기호 2를 클릭하면 이 스타일 뒤에 새 스타일 규칙이 추가됩니다.
3. 여기에는 더 많은 작업을 위한 다른 기능이 있습니다. 왼쪽부터 텍스트 그림자, 상자 그림자, 텍스트 색상, 배경색입니다.

스위치 스타일 설명
1 . 스타일 선언 앞의 체크박스를 클릭하면 스타일 선언이 전환됩니다

요소 크기 변경

1. 스타일 탭의 상자 모델 다이어그램에서 편집해야 할 영역 위에 마우스를 올려 놓고 두 번 클릭하여 내용을 입력합니다. 수정해야 하는 정보 값을 입력하려면 Enter를 누르세요. 박스 모델의 기본 단위는 픽셀이며, 입력된 백분율도 픽셀 값으로 변환됩니다.

변경하려면 키보드 단축키를 사용하세요. 값 ​​

선언된 값을 편집할 때 다음 키보드 단축키를 사용하여 고정된 양만큼 값을 증가시킬 수 있습니다:

• Up은 값을 1로 변경하거나 현재 값이 -1 사이인 경우 그리고 10.1.
• Option+Up(Mac) 또는 Alt+Up(Windows, Linux)은 0.1씩 증가합니다.
• Shift+Up은 10씩 증가합니다.
• Shift+Command+Up(Mac) 또는 Shift+Page Up(Windows, Linux)을 누르면 값이 100씩 증가합니다.

줄이는 것도 효과적입니다. 위에서 언급한 Up의 각 인스턴스를 Down으로 바꾸면 됩니다.

사용된 CSS와 사용되지 않은 CSS를 확인하려면 적용 범위 탭을 사용하세요.

1. DevTools에 초점이 맞춰져 있는 동안 Command+Shift+P(Mac) 또는 Ctrl+Shift+P(Windows, Linux, Chrome OS)를 눌러 명령 메뉴를 엽니다. 2. 적용 범위 입력을 시작하고 적용 범위 표시를 선택합니다. 적용 범위 탭이 표시됩니다.

3. "다시 로드하고 범위 캡처 시작"을 클릭하여 범위 감지를 시작하고 페이지를 다시 로드합니다. 페이지가 다시 로드되면 적용 범위 탭은 브라우저가 로드한 각 파일에서 CSS(및 JavaScript)가 얼마나 사용되는지에 대한 개요를 제공합니다. 녹색은 CSS를 사용한다는 의미입니다. 빨간색은 사용되지 않은 CSS를 나타냅니다.

4. CSS 파일을 클릭하면 해당 파일이 사용하는 CSS의 행별 분석을 볼 수 있습니다.

🎜색상 선택기 사용🎜🎜패널 지침🎜🎜다음은 색상 선택기의 각 UI 요소에 대한 설명입니다.🎜 1. 그림자. 🎜 2. 빨대. 🎜 3. 클립보드에 복사합니다. 표시된 값을 클립보드에 복사합니다. 🎜 4. 가치를 보여주세요. RGBA, HSLA 또는 Hex로 색상을 표현합니다. 🎜 5. 색상 팔레트. 사각형 중 하나를 클릭하면 해당 사각형의 색상이 변경됩니다. 🎜 6. 색조. 🎜 7. 투명성. 🎜 8. 표시 값 전환기. 현재 색상의 RGBA, HSLA 및 Hex 표현 간에 전환합니다. 🎜 9. 팔레트 전환기. 머티리얼 디자인 팔레트, 사용자 정의 팔레트 또는 페이지 팔레트 간을 전환하세요. DevTools는 스타일 시트에서 찾은 색상을 기반으로 페이지 색상 팔레트를 생성합니다. 🎜🎜🎜🎜페이지에서 샘플링하려면 스포이드를 사용하세요🎜🎜색상 선택기를 열면 스포이드가 기본적으로 켜져 있습니다. 선택한 색상을 페이지의 다른 색상으로 변경하려면: 🎜 1. 뷰포트에서 대상 색상 위로 마우스를 가져갑니다. 🎜 2. 확인을 클릭하세요. 🎜🎜🎜

위 내용은 크롬 개발자 도구에서 CSS 코드를 보는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!