[DevTools] 구글 크롬 디자인 모드 (Design Mode)

파이어폭스, 사파리, 엣지 등 대부분 브라우저에서 디자인 모드를 지원한다. 크롬 콘솔에서 디자인 모드를 활성화하면 코드를 직접 수정하지 않고도 위지윅 에디터처럼 요소 콘텐츠를 수정할 수 있다. 이미지 잘라내기 / 붙여 넣기 등의 작업도 가능하다. 물론 수정했던 내용은 새로고침하면 원상복귀 된다. 

 

크롬 개발자 도구(F12)를 열고 document.designMode 값을 'on'으로 바꿔주면 디자인 모드가 활성화 된다. 

document.designMode = 'on'; // 디자인 모드 켜키
document.designMode = 'off'; // 디자인 모드 끄기

 

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요