소개

모 프로그래밍 스쿨 수강생의 분이라면, 한 번은 이런 지적 받은 적 없습니까?

"불필요한 console.log는 삭제하자"

나는 또한 디버깅을 위해 넣은 것을 지우는 것을 잊는 것이 좋았습니다.
애초에 console.log 넣는다고 말하는 디버그 방법 귀찮지 않은가?
라고 말할까, rails의 binding.pry같은 것이 있겠지, 분명. 라고 생각해 조사하면 있었습니다.
(당연하네요...)

전제 조건

브라우저: Chrome
OS:macOS(관계 없을지도 모릅니다만 일단)

디버깅 방법

간단하지만 아래에 절차를 정리했습니다.

　① JavaScript를 담은 페이지를 엽니다.

　② Chrom 검증 도구를 엽니다.
　 · 바로 가기 : [Command] + [Option] + [I]
　・[오른쪽 클릭 메뉴]-[검증]
　 · Chrome 메뉴 [기타 도구] - [개발자 도구]

③ [Sources] 태그에서 디버깅하고자 하는 JavaScript 파일을 선택합니다.
　→개발 환경이라면 스스로 만든 파일을 시인할 수 있다고 생각합니다. 프로덕션 환경은 js 파일이 (sprockets 라든지 webpack 등의 공적에 따라) 1 파일에 정리되어 있기 때문에 솔레를 선택합니다.

④ 소스 코드가 중앙의 화면에 표시되므로, 디버그 걸고 싶은 장소를 찾으면 행수가 기재되어 있는 부분을 클릭합니다. 그러면 배경색이 파랗게 되므로, 이것으로 준비 완료.
　　※ 행수가 많으면 찾기 어렵습니다만 [command]+[F]로 문자열 검색도 가능합니다

⑤ JavaScript가 발동하는 조작을 행합니다.
⑥ 디버깅하기 위해 아래 그림과 같이 화면에 포즈가 걸립니다.
　
⑦ 　 좋아하게 디버그 해 주세요.
　 초보자 너무, 디버그 툴 자체는 잘 사용할 수 없습니다만, 잘 다룰 수 있으면 즐거운 것 같습니다.

　　◾️스텝 실행
스텝 오버나 스텝 인등도 할 수 있는 것 같습니다.
　

　◾️Watch에서 변수 내용 확인
단계 실행을 통해 자신이 있는 위치의 변수를 확인할 수 있습니다.
오른쪽 상단의 [+]에서 직접보고 싶은 변수를 추가하는 것도 가능합니다.
　

　　◾️코드 추가해보세요
　　그 자리뿐입니다만, 거기서 고뇨고뇨와 코드를 시험도 할 수 있을 것 같습니다.

자세한 디버깅 방법은 다양한 사이트에서 소개됩니다.
우선, 참고 링크.
(이번 소개한 Source에 관한 곳으로 날아갑니다만 전체를 통해 보면 재미있다)

[참고]
웹 개발에 자주 사용하는 Chrome 개발자 도구의 기능
htps //w w. 뾰족하고 r. 네 t/우 b/ch 로메로 v와 ls/01#파게-5

요약

console.log보다, 이쪽이 편한 친에서는? !
라고 할까, 지금까지 Chrome의 개발자 툴을 사용할 수 없었던 스스로・・・orz

앞으로는 마음껏 사용합니다!