developers.google.com/web/tools/chrome-devtools/css/grid?hl=ko

Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools

Open the Coverage tab

1. 커맨드 창 열기.
2. coverage 를 커맨드 검색창에 입력하고, Show Coverage 를 선택한다. Coverage 탭이 개발자도구의 Drawer에 활성화된다.

Record code coverage

1. Coverage 탭에서 아래에 따라 버튼을 클릭한다 :
   • 페이지를 로딩하기 위해서 어떤 코드들이 필요한지 보기 위해Start Instrumenting Coverage And Reload Page 를 클릭한다.
   • 페이지에서 어떤 코드들이 사용되는지 보기 위해 Instrument Coverage 을 클릭한다.
2. 코드 커버리지 녹화 중단을 위해 Stop Instrumenting Coverage And Show Results 를 클릭한다.

Analyze code coverage

Coverage 탭은 각 리소스에서 얼마나 많은 코드가 사용되었는지, 분석 결과를 알려준다. 리소스의 각 행을 클릭하면 Sources 패널에서 사용되는 코드와 사용되지 않는 코드를 분리해서 확인할 수 있다.

• URL 컬럼은 분석되는 리소스의 URL.
• Type 컬럼은 리소스가 CSS, JavaScript 중 어떤 타입을 포함하고 있는지.
• Total Bytes 컬럼은 리소스 파일의 크기.
• Unused Bytes 컬럼은 사용되지 않는 리소스의 크기.
• 마지막 이름없는 컬럼은 위의 Total Bytes 와 Unused Bytes 를 시각화 해놓은 것. 붉은 색은 미사용, 녹색은 사용하는 리소스의 크기를 나타냄.

CSS Reference

Select an element

• 원하는 요소에서 우클릭 후 > Inspect
• 개발자 도구에서 요소 선택
• Command+Shift+C (Mac) 또는 Control+Shift+C (Windows, Linux) 후 원하는 요소 선택
• 개발자 도구의 DOM Tree에서 원하는 요소 선택
• 개발자 도구 Console 에서 document.querySelector('p') 입력 > 콘솔 결과에서 우클릭 후 Reveal in Elements panel 클릭

View CSS

View the external stylesheet where a rule is defined

Styles 팬에서, CSS규칙 옆의 link를 클릭하면 외부 스타일 시트를 볼 수 있음. 만약, 스타일 시트가 minify 되어 있다면, minified file 보는 법을 참조

View only the CSS that's actually applied to an element

1. 요소 선택
2. Elements 패널의 Computed 탭에 가면 선택 요소에 실제 적용되는 css규칙만 확인할 수 있음.

• 상속된 css를 모두 확인하려면 Show All 체크박스를 클릭

View CSS properties in alphabetical order

Computed탭을 이용

View inherited CSS properties

Computed의 Show All 체크박스를 선택

View an element's box model

Styles 탭 제일 하단에 Box Model 다이어그램을 통해 확인 가능하고, 조정 원하는 값을 더블클릭하고 변경 가능

Search and filter an element's CSS

Styles 과 Computed의 Filter 텍스트 박스를 통해 원하는 css규칙 검색 또는 필터링 가능

Toggle a pseudo-class

1. 요소 선택
2. Elements 패널의 Styles 탭으로 이동
3. :hov 클릭
4. 원하는 가상 선택자 클릭

View a page in print mode

1. Command Menu를 열고
2. Rendering을 타이핑하고 Show Rendering를 선택
3. Emulate CSS Media 드랍다운 상자에서, print를 선택

View used and unused CSS with the Coverage tab

1. 개발자 도구를 열고 > Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, Chrome OS)
2. coverage을 타이핑하고 Show Coverage를 클릭하면 Coverage 탭이 생김
3. Start Instrumenting Coverage And Reload Page 를 클릭. 페이지를 다시 읽어오면 브라우저가 읽어오는 각 파일의css 또는 javascript 정보가 얼마나 많이 이용되는지 요약 정보를 제공함. 녹색은 사용하는 css를 붉은색은 사용하지 않는 css를 나타냄.
4. 표시되는 각 파일을 클릭하면 줄바꿈이 된 상세정보 확인 가능

Force print preview mode

Force DevTools Into Print Preview Mode.

Change CSS

Add a CSS declaration to an element

Add an inline declaration

1. 요소 선택
2. Styles팬에서, element.style 중괄호 사이를 선택.
3. 원하는 속성명과 값을 입력
4. DOM Tree에서 style 속성이 적용된 것을 확인

Add a declaration to a style rule

1. 요소 선택
2. Styles 팬에서, 원하는 추가를 원하는 곳을 선택.
3. 속성명과 값을 입력

Change a declaration name or value

더블클릭에서 속성명과 값을 바꿀 수 있음.

Change declaration values with keyboard shortcuts

• 0.1단위 증가 : Option+Up (Mac) / Alt+Up (Windows, Linux)
• 10단위 증가 : Shift+Up
• 100단위 증가 : Shift+Command+Up (Mac) / Shift+Page Up (Windows, Linux)

Add a class to an element

1. DOM Tree에서 요소 선택
2. .cls 클릭
3. Add New Class 텍스트 상자에 클래스 이름 입력

Toggle a class

1. DOM Tree에서 요소 선택
2. Add New Class 아래에 요소에 적용되는 모든 클래스 표시
3. 체크박스를 토글

Add a style rule

1. 요소를 선택
2. New Style Rule 를 클릭 > element.style 아래에 새로운 규칙이 추가.

Toggle a declaration

Change colors with the Color Picker

1. 요소선택
2. Styles 탭에서, 변경을 원하는 color 또는 background-color 선언을 찾는다. color 또는 background-color 값 옆에 색을 미리보여주는 네모 박스를 찾는다.
3. 색 미리보기 네모를 클릭하면 Color Picker가 활성화된다.

Change angle value with the Angle Clock

1. 요소 선택
2. Styles 탭에서, 변경을 원하는transform 또는 background 선언을 찾는다. 각도 값 옆에 Angle Preview 박스를 클릭한다.
3. Angle Clock 미리보기를
4. Angle Clock 을 클릭 또는 스크롤해서 값을 조정한다.

출처 :크롬 개발자도구 공식 가이드

Get Started With Viewing And Changing CSS

View an element's CSS

• 원하는 요소 위에서 우클릭 > Inspect

Add a CSS declaration to an element

• Styles tab > element.style 선택한 요소에 원하는 css 입력

Add a CSS class to an element

• Styles tab > :cls 클릭하고 원하는 class 입력
• 체크 버튼으로 클래스 활성/비활성 선택 가능

Add a pseudostate to a class

• Styles tab > :hov 클릭하고 원하는 요소에 가상 상태 부여 가능

Change the dimensions of an element

• Box Model 다이어그램에서 넓이, 높이, 패딩, 마진, 선 두께등을 조절할 수 있음

출처 :크롬 개발자도구 공식 가이드

Open the Elements panel to inspect the DOM or CSS

Open the Elements panel to inspect the DOM or CSS

• 크롬 빈화면 우클릭 -> inspect
• Command+Option+C (Mac)
• Control+Shift+C (Windows, Linux, Chrome OS)

Open the Console panel to view logged messages or run JavaScript

• Command+Option+J (Mac)
• Control+Shift+J (Windows, Linux, Chrome OS)

Open the last panel you had open

• Press Command+Option+I (Mac)
• Control+Shift+I

Open DevTools from Chrome's main menu

• More Tools > Developer Tools.

Auto-open DevTools on every new tab

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs

출처:크롬 개발자도구 공식 가이드