Chrome DevTools

Chrome DevTools는 HTML, CSS, JavaScript를 디버깅하는 도구입니다. 이를 사용하여 HTML이나 CSS와 같은 브라우저에서 실제로 볼 수 있는 파일을 업데이트할 수 있습니다.

HTML이나 CSS의 편집을 실제로 표시하면서 실시할 수 있는 것은 매우 편리하고, 그 결과를 파일에 직접 반영할 수도 있습니다.

Workspaces - Persistent authoring in the DevTools

[Chrome] DevTools의 Workspace에서 로컬 프로젝트 실시간 편집 및 디버깅

DevTools로 SVG 간편 편집

사실 이 DevTools에서 SVG 원시 파일을 처리할 수 있습니다.

예를 들어, 이 유명한 SVG 파일을 열었다고 가정합니다.



이 SVG의 특정 범위를 선택하고 요소 유효성 검사에서 DevTools를 시작합니다 (Web Inspector라고하는 것이 좋습니다).



이 예에서는 호랑이의 입 부분을 선택합니다.
보시다시피, 선택 부분의 SVG 요소가 강조 표시됩니다.



예를 들어, 이 fill(채우기)을 #000(검정색)에서 #CCC(회색계)로 변경하는 것은, DevTools로 그 수치를 바꾸는 것만으로 가능합니다.



그 외에도 요소를 삭제하거나 SVG의 요소를 이해하고 있다면 원시 수동으로 편집하는 것도 가능합니다.

SVG를 그대로 수동으로 편집하는 것은 드뭅니다만, 약간의 수정을 가하면 이 기능은 편리하다고 생각합니다.