[웹 프로그래밍] 개발자 도구를 이용한 자바스크립트 디버깅 방법

개발자 도구를 이용한 자바스크립트 디버깅 하는 방법에 대하여

 

 

자바스크립트 디버깅 하는 방법에 대하여 알아보도록 하겠습니다

웹 개발을 하지 않는 분들도 재미로 알아두면 좋겠네요

 

 

단계1

[F12] 버튼을 클릭합니다

그러면 개발자 도구 화면이 나타납니다

디버거 메뉴를 클리하여, 우측 상단 검색란을 통해 자바스크립트를 찾을 수 있습니다

다음으로 좌측 줄번호 왼쪽 바를 크릭하면 빨간 동그라미가 아래 그림처럼 표시 됩니다 

 

 

단계2

저는 제 포스팅 글 "[자바스크립트] 인터넷 웹 브라우저 우클릭 방지 하는 법" 화면에서 실행 하였습니다

테스트를 위해 "인터넷 웹 브라우저 우클릭 방지 하는 법" 화면 열기 → 클릭

중단점을 부분을 실행하기 위해서는 해당 함수를 실행 시켜주어야 합니다

제가 찍은 부분은 마우스 우클릭 기능 함수 입니다

마우스 우클릭을 하게 되면 아래 처럼 자바스크립트가 실행되다가 중단점에서 멈추게 됩니다

 

 

 

단계3

중단점에서 멈춰있는 상태에서 [F10] 을 클릭하면  프로시저 단위로 실행이 됩니다

alert 기능을 만났군요 아래와 같이 알림 메시지가 나타나면 [확인] 버튼을 클릭하여 닫아 주세요

 

 

단계4

다음단계로 넘어갑니다

consol.log 함수를 만났습니다

[F10]을 한번 클릭하시고, 상단 콘솔 메뉴를 클릭 해 주세요

 

 

단계5

consol.log 가로 안의 글자가 적혀 있는 것을 볼 수 있습니다

스크립트 안에 consol.log 를 이용하여, 디버깅 시에 참고 할 수도 있겠습니다

 

 

 

 

단계6

[F5] 를 클릭하면 다음 중단점까지 실행이 됩니다

중단점을 한번만 선택 했기에 모든 스크립트 실행이 종료 되겠습니다

메뉴 상단 DOM탐색기를 눌러 보세요

상단 [네모박스를 향하고 있는 화살표]를 클릭하고 웹 화면 중 제목 "JavaScript 우클릭 방지 하는 법" 텍스트를

클릭하면 아래와 같이 해당 부분 소스로 이동합니다.

 

 

 

단계7

텍스트를 더블클릭하면 아래와 같이 수정이 가능하며, 저는 "수정하기" 내용의 문구로 수정하였습니다

그리고 엔터 클릭하면 웹 화면에서 문구가 변경 된 것을 알 수 있습니다 

아주 옛적에는 이 기능을 통해 쇼핑몰 금액을 수정하여, 범죄를 저지르는 일도 있었다고 하죠

 

 

 

Tip 혹, 자바스크립트 함수가 생각이 안난다면 콘솔창에서

아래와 같이 찾아 볼 수도 있습니다~^^

 

 

 

개발자 도구는 웹 브라우저마다 조금씩 차이가 있습니다

잘 활용하면 웹 개발에 있어서 많은 도움이 되죠

 

아주 다양한 기능들이 많지만 여기서 마무리 하겠습니다