파이어폭스, 사파리, 엣지 등 대부분 브라우저에서 디자인 모드를 지원한다. 크롬 콘솔에서 디자인 모드를 활성화하면 코드를 직접 수정하지 않고도 위지윅 에디터처럼 요소 콘텐츠를 수정할 수 있다. 이미지 잘라내기 / 붙여 넣기 등의 작업도 가능하다. 물론 수정했던 내용은 새로고침하면 원상복귀 된다.
크롬 개발자 도구(F12)를 열고 document.designMode
값을 'on'
으로 바꿔주면 디자인 모드가 활성화 된다.
document.designMode = 'on' // 디자인 모드 켜키
document.designMode = 'off' // 디자인 모드 끄기