HTML과 CSS를 작성할 때 레이아웃의 미세 조정에 저장과 다시로드를 반복하지 않습니까?
그것, Chrome의 개발자 툴을 사용하면 편집하면서 실시간으로 내용을 확인할 수 있어요!

요소 선택

마우스 오른쪽 버튼 메뉴의 "검증"

오른쪽 클릭 메뉴에서 "검증"을 선택하면 선택 요소로 한 번에 이동할 수 있습니다!
* 겹치는 요소가 있으면 겹치는 위의 맨 위에 있는 요소가 선택됩니다.

요소 패널 조작

키
동작


↑
한 줄의 요소(태그)로

↓
한 줄 아래의 요소로

←
열려 있던 부모 요소를 닫습니다.

→
닫힌 자식 요소 열기




키보드 조작으로 요소를 이동해 가면 쾌적하네요!

CSS 실시간 반영

CSS 파일의 클래스 스타일은 클릭하여 편집할 수 있습니다.
새 속성을 추가할 수도 있고 설정한 속성을 비활성화할 수도 있습니다.



gif 중의 수치 지정을 매끄럽게 바꾸고 있는 곳에서는 마우스 휠을 사용하고 있습니다.
키보드의 상하에서도 OK.


키
수치 변화


↑/↓
+1/-1

Shift + ↑/↓
+10/-10

Shift + PgUp/PgDown
+100/-100

[윈]Alt[Mac]Opt + ↑/↓
+0.1/-0.1


키보드 단축키 참조 | Chrome DevTools

좋은 느낌의 수치나 스타일이 되면 코드에 페이스트!

HTML 편집

요소 탭의 오른쪽 클릭 메뉴에서 HTML 편집을 통해 HTML을 편집할 수 있습니다.
Enter라고 개행이 됩니다만 Esc에서는 캔슬이 되기 때문에 주의해 주세요.
확정은 [Win]Ctrl/[Mac]Cmd + Enter 입니다. Thx @ 씨 f 레세 오사카

요소 탭의 DOM 조작 시스템 바로 가기

Ctrl+C에서 선택 요소가 클립보드에 들어갑니다.
Ctrl+V로 붙여넣고 Delet 키로 삭제할 수 있습니다.

속성을 더블 클릭하거나 내부 텍스트를 더블 클릭하면 편집 상태가 될 수 있습니다.
요소를 늘렸을 경우의 레이아웃이나 하늘이었을 경우의 레이아웃,
안의 문자수가 많을 때의 레우 아웃 확인에 사용해 주세요.

요약

다시 로드하지 않아도 Chrome DevTools에서 DOM과 CSS를 꽤 자유롭게 수정할 수 있다는 것을 알았습니다.
이 방법이라면 실시간으로 화면에서 폭감이나 레이아웃을 확인하면서 편집할 수 있는 것이 좋네요.

이 기법을 잘 사용하면 스타일과 HTML 구조를 DevTools에서 생각하고 마지막으로 파일에 복사하는 것만으로 끝낼 수 있습니다.
알고 있으면 HTML과 CSS가 고속으로 코딩할 수 있는 것 틀림없음. 꼭 사용해보십시오.

그 밖에도 기법

[CSS 단위계] vh, vw 에 숨어 있는 달콤한 함정 [width와 height에 사용할 때의 주의] - Qiita

[서버 측 API 디버깅 방법] 브라우저 요청을 쉽게 재시도하고 서버 동작을 보는 방법 - Qiita

[JavaScript 디버깅 기법] 메소드 실행중인 변수 중에서 보고 싶지 않아? - Qiita