[JavaScript] 브라우저 콘솔로 스크립트 동적 테스트

#자바스크립트 #크롬도되지롱 #디버깅 #JS문법도되 #동적CSS수정 #스크립트동적적용 #colsole

안녕하세요, 배곧동개발자 입니다.

웹 개발을 하다보면 페이지 내에 객체를 컨트롤 할때 jsp나 js 열어서 수정하고 페이지 새로고침해보고 만약 아니면 또 수정하고 새로고침해보고.

이거 반복하기 엄청 짜증나시죠? 쉽게 하는 방법을 알려드릴까해요.

1. 개발자도구

F12를 눌러서 개발자 도구를 들어가 CSS를 수정하는 방법은 많이들 쓰시는 그냥 흔한 방법이지요. (콘솔도 흔한데, 모르는분들이 더 많더라구요.)

근데 이거 말고, 콘솔창을 이용한 방법도 있어요.

2. 콘솔창 활용

어렵지 않으니 바로 설명할께요. 상단에 [콘솔] 탭에 들어가주시고 아래쪽 입력프롬프트에 원하는 명령어를 넣으시면 되요.

$("#ytcDiv").hide();

제가 넣어놓은 제이쿼리 명령어는 div를 숨기라는 명령어지요?

물론 그냥 자바스크립트 명령어인 document.getElementById(“ytcDiv”).style.display = “none”; 로도 가능합니다. 엣지로만 가능할까요? 아니요 크롬도 가능합니다. 웨일도 당연히 가능하구요!

3. CSS 수정해보기

똑같이 F12를 눌러주시고 [콘솔] 탭에 들어가 주신 다음 이번에는 배경색을 바꿔볼까요?

$('#ytcDiv').css('background','red');

그러면 입력되시는거 보이시죠?

이런식으로 하면 권한에 따라서 숨겨놓은 객체나 시퀀스 스탭에 따라 숨겨놓은 객체들을 보여지게 할 수 있고 스크립트 수정을 미리 테스트해볼수 있어요.

생각보다 많이, 유용하게 쓰이는 팁이였어요.

이만, 배곧동개발자 였습니다.