[크롬 브라우저]디버깅 하기

웹 개발을 하다 보면

디버깅에 대해서

답답함을 느끼는 경우가 있습니다.

저도 디버깅에 대해서

제한이 있고,

답답함을 느끼곤 했습니다.

그런데 크롬 브라우저에서

디버깅을 할 수 있어서

해당 방법을 정리해보고자 합니다.

디버깅은 개발을 할 때

매우 중요합니다.

그렇다보니 크롬 브라우저에서의

디버깅은 쓸모가 많을 거라고

생각을 합니다.

그럼 이제 크롬 브라우저에서

디버깅을 하는 방법에 대해서

확인해보도록 하겠습니다.

1. 크롬브라우저 - 개발자모드 - Sources

크롬 브라우저에서 F12를 누르면

개발자모드 창이 열립니다.

이 곳에서 Sources 탭을 눌러

소스를 볼 수 있습니다.

2. 브레이킹포인트 걸기

Ctrl + F 혹은

직접 원하는 곳을 찾아서

브레이킹포인트를 걸 수 있습니다.

우선 아래처럼 브레이크포인트를 걸 곳을

찾습니다.

그리고 앞에 숫자 쪽을 눌러서

브레이킹포인트를 걸어주면 됩니다.

아래 이미지처럼 숫자를 눌르면

화살표?

그런 것이 숫자위에 생깁니다.

그러면 해당 위치에

브레이킹포인트가 걸린 것입니다.

3. 웹 페이지 구동

이제 웹 페이지에 들어가서

작업을 하면 됩니다.

그러면 브레이킹포인트가 걸린 위치에서

멈추게 됩니다.

4. 값 확인하기

이 때, 

변수 등 위에 마우스를 올려놓으면

해당 변수의 값을 확인할 수 있습니다.

이러한 방법으로 값을 확인하고,

수정하고,

할 수 있습니다.

또한, 콘솔로그 창에서 직접 입력하여

값을 확인할 수도 있습니다.

아래처럼 콘솔창 부분에

원하는 변수를 입력하면

콘솔로그 창에

해당 변수의 값 등이 나오게 됩니다.

데이터부분이라고해서

나오고

...으로 되어 있네요.

저 위에 화살표를 눌러서

모든 데이터가 나오게 하면

아래처럼 해당 변수 안에 들어있는

값들이 이렇게 상세하게 나오게 됩니다.

이렇게 해서

크롬 브라우저에서

디버깅을 할 수 있습니다.

개발을 할 때 꼭 필요한 디버깅을

크롬 브라우저에서 지원해주는

좋은거 같네요.

다른 방법도 많지만

이런 방법으로도

디버깅을 할 수 있으니

참고해서 사용해주시면 되실 것 같습니다.

이상으로 크롬 브라우저에서 디버깅하는 방법이였습니다~