홈페이지 이미지를 교체해야 하는 일이 있는데
포토샵으로 시안을 만들기에는 오버레이도 깔려있고 글자들이 얹어진 게 많아 어려움이 있었다.
서버에 전송하지 않고 로컬에 있는 이미지를 임시로 사이트에 덮어씌울 수 없을까? 하던 중
해외 사이트를 뒤지다가 발견한 기능!
크롬 개발자도구의 Override라는 기능이다.
F12를 누르고 "Sources"로 들어가면 탭에 Overrides라는 부분이 있다. 클릭해보자.
그리고 "Select folder for overrides"를 눌러 아무 폴더나 선택한다. (오버라이드를 위한 폴더를 만들어서 지정하는 게 좋긴 하다.) 어차피 오버라이드 하면 안에 웹 경로대로 폴더가 만들어진다.
그럼 상단에 이런 문구가 뜰 텐데, 허용을 누른다.
반드시 "Enable Local Overrides"는 선택해야 한다.
내가 넣고자 하는 폴더가 들어간 것을 확인하고,
이제 변경하고자 하는 이미지가 있는 사이트를 열어보자.
네이버 블로그 메인의 배너를 바꿔보도록 할 것이다.
이미지 오른클릭 > 검사를 누른다.
그리고 이미지 주소를 오른클릭하여 "Reveal in Sources panel"을 눌러보자.
이렇게 이미지가 따로 떨어져 나온다.
그리고 내가 바꾸고자 하는 이미지를 드래그하여 넣으면..
이렇게 상단에 보라색 아이콘이 생기면서 이미지가 바뀐다.
바로 새로고침을 눌러보자.
배너가 바뀌었다.
이렇게 오버라이드 한 이미지는 개발자도구를 켜고 새로고침을 하면 늘 적용된다.
몰랐던 기능이지만 너무나 유용한 기능!
js파일이나 css, html 등 많은 파일들에도 활용하여 적용할 수 있다.
한번 오버라이드 해놓으면 다음에 개발자도구를 켜고 그 페이지를 열었을 때 내가 덮어씌워놓은 파일이 나오니
오버라이드 하기 싫어지면 "Enable Local Overrides" 를 체크 해제하면 된다.
그리고 해당 파일만 오버라이드 하기 싫어지면 위에서 지정한 폴더 안에 생성된 덮어씌워진 파일을 삭제하면 끝!