CSS 개발에서 알아야 할 16가지 DevTools 팁

대부분의 개발자는 기본적으로 브라우저의 개발자 도구를 사용하여 프런트 엔드를 디버깅하지만, 몇 년 동안 Chrome의 개발자 도구를 사용한 후에도 여전히 이전에 본 적이 없는 트릭과 기능을 접하게 됩니다.

이 기사에서는 CSS 개발을 한 단계 더 발전시킬 수 있는 개발자 도구의 많은 CSS 관련 기능과 기술에 대해 썼습니다. 이 팁 중 일부는 CSS에만 국한된 것은 아니지만 어쨌든 모아봤습니다.

워크플로 및 디버깅에 대한 간단한 팁도 있고, 최근 몇 년간 도입된 새로운 기능도 있습니다. 대부분은 Chrome의 개발자 도구를 기반으로 하지만 일부 Firefox 팁도 다루고 있습니다.

JavaScript를 통해 표시되는 요소에 대한 CSS를 검사하세요

개발자 도구의 요소 패널에서 대부분의 요소에 대한 CSS를 찾는 것은 어렵지 않습니다. 대부분의 경우 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 클릭한 다음 (필요한 경우) 두 번 클릭하여 요소 패널에서 찾으면 됩니다. 요소를 선택하면 해당 CSS가 스타일 패널에 나타나서 편집할 수 있습니다.

클릭이나 마우스 오버와 같은 일부 JavaScript 기반 사용자 작업으로 인해 요소가 동적으로 표시되는 경우가 있습니다. 이를 검토하는 가장 직관적인 방법은 사용자 작업을 모방하지 않고도 처리할 수 있도록 JavaScript 또는 CSS를 일시적으로 변경하여 기본적으로 표시되도록 하는 것입니다.

그러나 개발자 도구만 사용하여 요소를 더 빠르게 표시하려면 다음 단계를 따르세요.

1. 개발자 도구를 엽니다.

2. 소스 패널을 엽니다.

3. 개체를 표시하려면(예: 마우스 오버)

4. 요소가 표시되면 F8을 누릅니다("스크립트 실행 일시 중지" 버튼과 동일).

5. 왼쪽 상단에 있는 "요소 선택" 버튼을 클릭합니다. 개발자 도구

6. 페이지의 요소를 클릭하세요.

Bootstrap의 툴팁

을 통해 테스트할 수 있습니다. 이는 JavaScript를 실행하기 위해 마우스를 링크 위로 가져갈 때만 표시됩니다.

GIF 시작 부분에서 볼 수 있듯이 마우스를 떼자마자 사라져서 처음에는 검사할 요소를 선택하는 것이 불가능했습니다. 그러나 스크립트가 표시되는 동안 실행을 중지하면 스크립트가 계속 표시되므로 제대로 검사할 수 있습니다. 물론 요소가 단순한 CSS :hover 효과인 경우 스타일 패널의 "요소 상태 전환"(:hov 버튼)을 사용하여 상태를 전환하여 표시되도록 할 수 있습니다. 그러나 JavaScript로 전환된 스타일의 경우 스크립트를 중지하는 것이 CSS 스타일을 얻는 가장 좋은 방법일 수 있습니다.

CSS 선택기를 통해 요소 검색:hover 效果，那么我可以用 Styles 面板的 “Toggle Element State”（:hov 按钮）切换状态来让它显示。但由 JavaScript 切换样式的情况下，停止脚本也许是获取它们 CSS 样式的最佳方法。

通过CSS选择器搜索元素

你也许知道你可以用内置功能（CTRL + F 或者 CMD + F）在 Elements 面板搜索一个元素。但注意看 “find” 栏，它会给你以下提示：

正如我在截图中指出的那样，你可以通过字符串、选择器以及 XPath 寻找元素。之前我一直都在使用字符串，直到最近我才意识到我可以使用选择器。

你不一定要使用你 CSS 中用过的选择器，它可以是任意合法的 CSS 选择器。查找功能将告诉你选择器是否与任何元素匹配。这对查找元素很有用，还有助于测试选择器是否有效。

下面是一个使用 body > div 选择器来搜索以及遍历 body 所有直接子 div 元素的 demo：

如上所述，这些搜索可以通过任意合法选择器完成，类似于 JavsScript 的 querySelector() 和 querySelectorAll()

기본 제공 기능(CTRL + F 또는 CMD + F)을 사용하여 요소 패널에서 요소를 검색할 수 있다는 것을 알고 계실 것입니다. 하지만 "찾기" 열에 주의를 기울이면 다음과 같은 메시지가 표시됩니다:

스크린샷에서 지적했듯이 문자열, 선택기 및 XPath를 통해 요소를 찾을 수 있습니다. 나는 항상 문자열을 사용해 왔으며 최근에서야 선택기를 사용할 수 있다는 것을 깨달았습니다.

CSS에 사용된 선택기를 사용할 필요는 없으며 합법적인 CSS 선택기이면 됩니다. 찾기 기능은 선택기가 요소와 일치하는지 알려줍니다. 이는 요소를 찾고 선택기가 유효한지 테스트하는 데 유용합니다.

다음은 body > div 선택기를 사용하여 body의 모든 직접 하위 div 요소를 검색하고 탐색하는 데모입니다.

위에서 언급한 바와 같이 , 이러한 검색은 JavsScript의 querySelector() 및 querySelectorAll() 메서드와 유사한 모든 법적 선택기를 사용하여 수행할 수 있습니다.

상자 모델을 직접 편집하세요

상자 모델은 CSS를 사용하기 시작할 때 가장 먼저 배우는 것 중 하나입니다. 이는 CSS 레이아웃의 중요한 부분이므로 개발자 도구를 사용하면 상자 모델을 직접 편집할 수 있습니다. 🎜🎜페이지의 요소를 검사하는 경우 오른쪽 패널의 스타일 패널 옆에 있는 계산된 패널을 클릭하세요. 각 부분의 값이 포함된 요소의 시각적 상자 모델 그림을 볼 수 있습니다. 🎜🎜🎜🎜🎜 하지만 값을 두 번 클릭하여 편집할 수 있다는 사실을 몰랐을 수도 있습니다. 🎜🎜 🎜🎜🎜 모든 변경 사항은 스타일 패널에서 CSS를 편집할 때와 동일한 방식으로 페이지에 반영됩니다. 🎜

스타일 패널에서 속성 값 증가 또는 감소

스타일 패널에서 CSS를 편집할 수 있다는 것을 알고 계실 것입니다. 속성이나 값을 클릭하고 변경 사항을 입력하기만 하면 됩니다.

하지만 숫자 값이 다양한 방식으로 증가하거나 감소할 수 있다는 사실을 몰랐을 수도 있습니다.

• 위쪽 화살표 키/아래쪽 화살표 키는 속성 값을 1씩 증가/감소시킬 수 있습니다.

• ALT + 위쪽 화살표 키/아래쪽 화살표 키는 속성 값을 0.1만큼 증가/감소시킬 수 있습니다

• SHIFT + 위쪽 방향 키/아래쪽 화살표 키는 속성 값을 10

• CTRL만큼 증가/감소시킬 수 있고 위쪽/아래쪽 화살표 키는 100

속성 값을 증가/감소시킬 수 있습니다. Page Up 또는 Page Down 버튼은 화살표 키를 대체합니다.

"소스" 패널의 텍스트 편집기 기능

다른 곳보다 스타일 패널에서의 편집에 더 익숙할 수 있습니다. 그러나 소스 패널은 개발자 도구에서 매우 과소평가되는 기능이며 일반 코드 편집기를 모방합니다. IDE가 작동하는 방식.

다음은 소스 패널에서 수행할 수 있는 몇 가지 유용한 작업입니다(개발자 도구를 열고 '소스' 버튼 클릭).

여러 선택에 CTRL 키 사용

단일 파일에서 여러 영역을 선택해야 하는 경우 연속 텍스트가 아니더라도 Ctrl 키를 누른 채 원하는 항목을 선택하면 됩니다.

위 데모에서는 소스 패널에서 main.css 파일의 임의 섹션 3개를 선택하여 문서에 다시 붙여넣었습니다. 또한 CTRL 키를 사용하여 여러 위치를 클릭하면 여러 커서를 사용하여 동시에 여러 곳에 입력할 수 있습니다.

Alt 키를 사용하여 열 선택

때때로 텍스트 열을 선택하고 싶을 수도 있지만 일반적으로 그렇게 할 수 없습니다. 일부 텍스트 편집기에서는 ALT 키와 소스 패널을 사용하여 이 작업을 수행할 수 있습니다.

CSS 선택기를 통해 요소를 검색하려면 CTRL + SHIFT + O 키 조합을 사용하세요.

소스 패널에서 파일을 연 후 CTRL + SHIFT + O 키 조합을 눌러 다음을 수행할 수 있는 입력 상자를 엽니다. 어디로든 점프하는 것은 Sublime의 잘 알려진 기능입니다.

CTRL + SHIFT + O를 누른 후 이 파일에서 찾으려는 요소에 대한 CSS 선택기를 입력할 수 있습니다. 개발자 도구는 파일에서 지정된 위치로 이동하려면 클릭하세요.

Chrome 및 Firefox의 반응형 디자인 기능

단 몇 번의 클릭만으로 반응형 레이아웃을 테스트할 수 있는 웹사이트를 본 적이 있을 것입니다. 실제로 Chrome의 기기 모드를 사용하여 동일한 작업을 수행할 수 있습니다.

개발자 도구를 열고 왼쪽 상단에 있는 "장치 도구 모음 전환" 버튼을 클릭하세요(단축키 CTRL + SHIFT + M).

보시다시피 장치 도구 모음에는 장치 크기에 따라 여러 옵션이 있습니다. 장치 유형에 따라 뷰가 변경되면 너비와 높이 값을 수동으로 조정하거나 뷰포트 영역에서 핸들을 드래그하여 수동으로 변경할 수도 있습니다.

Firefox의 추가 "@미디어 규칙" 패널에는 유사한 기능이 있어 사이트 스타일시트에서 중단점을 클릭할 수 있습니다. 아래 데모의 내 웹사이트 중 하나에서 내가 이 기능을 사용하는 모습을 볼 수 있습니다.

DevTools의 색상 기능

CSS에서 색상 값을 처리하는 것이 일반적입니다. 개발자 도구를 사용하면 색상 값을 더 쉽게 편집하고 테스트할 수 있습니다. 할 수 있는 일은 다음과 같습니다.

대비

먼저 개발자 도구에는 접근성 확인 기능이 있습니다. 스타일 패널에 색상 속성 값이 표시되면 색상 값 옆에 있는 사각형을 클릭할 수 있습니다. 색상 수집기를 엽니다. 색상 선택기 내에는 선택한 텍스트 색상이 배경과 결합되었을 때 액세스 가능한 대비가 있는지 여부를 나타내는 대비 옵션이 표시됩니다.

위 데모에서 볼 수 있듯이 색상 선택기는 색상 스펙트럼에 곡선의 흰색 선을 표시합니다. 이 선은 허용 가능한 최소 대비가 시작하고 끝나는 위치를 나타냅니다. 색상 값을 흰색 선 위로 이동하면 대비 옆의 녹색 체크 표시가 사라져 대비가 좋지 않음을 나타냅니다.

팔레트

접근성을 보는 기능 외에도 머티리얼 디자인 팔레트와 현재 보고 있는 페이지와 관련된 색상 팔레트를 포함한 다양한 색상 팔레트에 액세스할 수도 있습니다.

색상 값 전환 구문

마지막으로 개발자 도구에서 잘 알려지지 않은 재미있는 사실은 색상 값을 볼 때 해당 구문을 전환할 수 있다는 것입니다. 기본적으로 스타일 패널에는 CSS로 작성된 색상 구문이 표시됩니다. 그러나 개발자 도구를 사용하면 Shift 키를 누른 채 색상 값 왼쪽에 있는 작은 사각형을 클릭하여 16진수, RGBA 및 HSLA 간에 색상 값을 전환할 수 있습니다. 구문:

Edit CSS Shadow

text-shadow 및 box-shadow CSS는 손으로 작성하기가 지루하고 구문을 잊어버리기 쉽고 두 그림자의 구문이 약간 다릅니다.

편리하게 Chrome의 개발자 도구를 사용하면 시각적 편집기를 사용하여 텍스트 그림자나 상자 그림자를 추가할 수 있습니다.

데모에 표시된 대로 스타일 패널에 있는 모든 스타일의 오른쪽 하단에 있는 옵션 막대를 사용하여 모든 요소에 텍스트 그림자 또는 상자 그림자를 추가할 수 있습니다. 그림자가 추가된 후 비주얼 편집기를 사용하여 다양한 속성 값을 편집할 수 있습니다. 속성 값 왼쪽에 있는 작은 사각형을 클릭하면 시각적 편집기에서 기존 그림자를 불러올 수 있습니다.

Firefox용 Grid Layout Inspector

가장 일반적으로 사용되는 브라우저는 이제 그리드 레이아웃을 지원하며 점점 더 많은 개발자가 이를 기본 레이아웃 방법으로 사용합니다. Firefox의 개발자 도구에는 이제 레이아웃 탭에 그리드 옵션이 있습니다.

이 기능을 사용하면 전체 적용 범위 그리드를 켜서 그리드 레이아웃의 다양한 부분을 시각화할 수 있습니다. 또한 행 번호와 영역 이름을 표시할 수 있으며, 유용하다면 그리드 선을 무한정 확장하도록 선택할 수도 있습니다. 샘플 데모에서는 반응형인 Jen Simmons의 샘플 웹사이트를 사용하고 있으므로 다양한 뷰포트에 따라 레이아웃이 변경될 때 시각적 그리드의 이점을 확인할 수 있습니다.

Firefox의 CSS 필터 편집기

filter는 이제 거의 모바일과 PC 모두에서 지원되는 또 다른 새로운 기능입니다. Firefox는 필터 값을 편집하는 데 도움이 되는 유용한 작은 도구를 다시 한 번 제공합니다.

코드에 필터가 있으면(팁: 실제 구문을 모르는 경우 filter: none을 먼저 쓸 수 있음) 검은색과 흰색으로 쌓인 사각형이 표시됩니다. 필터 값 왼쪽을 클릭하면 필터 편집기가 열립니다. filter: none），你将注意到 filter 值左边有一个黑白相间的堆叠方块，点击它可以打开 filter 编辑器。

您可以将多个过滤器添加到单个值，删除单个过滤器值，还可以拖放单个过滤器以重新排列其应用顺序。

在 Chrome 的 Styles 面板编辑 CSS 动画

在 Chrome 的 Styles 面板编辑静态元素非常简单，那么编辑使用 animation 属性以及 @keyframes 创建的动画呢？

开发者工具有两种编辑动画的方法。首先，当你审查一个元素或者在 Elements 面板选择一个元素，该元素的所有样式都会出现在 Styles 面板 —— 包括已定义的 @keyframes

단일 값에 여러 필터를 추가하고, 단일 필터 값을 삭제하고, 개별 필터를 드래그할 수 있습니다. 적용되는 순서를 다시 정렬합니다.

at Chrome 스타일 패널에서 CSS 애니메이션 편집

Chrome 스타일 패널에서 정적 요소를 편집하는 것은 매우 간단합니다. 하지만 animation 속성과 @keyframes를 사용하여 생성된 애니메이션을 편집하는 것은 어떻습니까?

개발자 도구에는 애니메이션을 편집하는 두 가지 방법이 있습니다. 먼저, 요소를 검사하거나 요소 패널에서 요소를 선택하면 정의된 @keyframes를 포함하여 해당 요소의 모든 스타일이 스타일 패널에 나타납니다. 아래 데모에서는 애니메이션 요소를 선택하고 일부 키프레임 설정을 조정합니다.

🎜그것이 전부는 아닙니다. Chrome의 개발자 도구는 시각적 타임라인을 사용하여 애니메이션과 애니메이션의 다양한 부분을 편집할 수 있는 애니메이션 패널을 제공합니다. 개발자 도구의 오른쪽 상단에 있는 "DevTools 사용자 정의 및 제어" 버튼(3개의 수직 점 버튼)을 클릭하고 추가 도구를 선택한 다음 애니메이션 패널을 열 수 있습니다. 🎜🎜🎜🎜🎜위와 같이 각 애니메이션 요소의 타임라인을 편집할 수 있으며 편집이 완료되면 애니메이션을 탐색하여 페이지의 변경 사항을 확인할 수 있습니다. 이는 복잡한 CSS 애니메이션을 디자인하고 디버깅하는 데 유용한 기능입니다! 🎜🎜DevTools에서 사용하지 않는 CSS 보기🎜🎜요즘에는 특정 페이지에서 사용되지 않는 CSS를 추적하는 데 도움이 되는 도구가 많이 있습니다. 이렇게 하면 해당 항목을 완전히 제거하거나 필요한 경우에만 로드할 수 있는 옵션이 제공됩니다. 이는 명백한 성능 이점을 갖습니다. 🎜

Chrome을 사용하면 개발자 도구의 '범위' 패널을 통해 사용되지 않는 CSS를 볼 수 있습니다. 이 패널은 위에서 언급한 대로 개발자 패널의 오른쪽 상단에 있는 "DevTools 사용자 정의 및 제어" 옵션(3개의 수직 점 버튼)을 클릭하고 "추가 도구"를 선택한 다음 "적용 범위"를 찾아 열 수 있습니다.

데모에서 볼 수 있듯이 Coverage 패널을 열면 Sources 패널에서 소스 파일을 열 수 있습니다. 파일이 열리면 CSS 파일의 각 스타일 오른쪽에 스타일이 현재 페이지에 적용되는지 여부를 나타내는 녹색 또는 빨간색 선이 표시됩니다.

결론

브라우저 개발 도구는 CSS 편집 및 디버깅의 보고입니다. 위의 제안 사항을 작업 공간(개발자 도구에서 변경한 내용을 로컬 파일에 저장할 수 있음)과 같은 Chrome 기능과 결합하면 전체 디버깅 프로세스가 더욱 완벽해집니다.

이 팁과 제안이 향후 프로젝트에서 CSS를 편집하고 디버깅하는 능력을 향상시키기를 바랍니다.

위 내용은 CSS 개발에서 알아야 할 16가지 DevTools 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!