디버깅을 시각화해주는 온라인 코드 비주얼라이저 PythonTutor(w/ JavaScript ...)

책을 보다가 디버깅하기 좋은 사이트를 알게되어 추천하고자 글을 쓴다.

코딩테스트, 알고리즘 문제 풀 때 굉장히 유용하다.

 

온라인 코드 비주얼라이저 PythonTutor

접속하면 아래와 같은 화면이 뜬다.

PythonTutor 메인 화면

화면 내용처럼 코드를 입력하면 시각화 해주고 디버깅해주며

어떤 시점에서 어떤 값이 변하고 함수 호출 스택이 바뀌었는지 쉽게 확인할 수 있게 해주는 사이트이다.

 

이름 때문에 Python만 되는 줄 알았는데 다행히 아래와 같이 여러 언어를 지원하고 있었다.

1. Python
2. JavaScript
3. Java
4. C / C++
5. Ruby 

사용방법

간단하다. 사이트 접속 후 언어를 선택하고 코드를 삽입, [Visualize Execution] 버튼만 누르면 끝.

단, 아래 사진처럼 1000 스텝 이상의 케이스에 대해선 지원을 하고 있지 않다고하니 주의하자.

실행 화면

 

그럼 아래처럼 코드가 실행되는데,

왼쪽 하단의 버튼들을 클릭해서 다음 스텝으로 넘어가며 추적하면 된다.

왼쪽 화면에선 내가 어느 라인에 있는지, 재귀 중인지 등 시점을 확인할 수 있고

오른쪽 화면에선 해당 스텝에서 추적된 시각화된 결과가 도출된다.

 

배열 등 자료구조를 시각화 해주어서 매우 신박하다.

디버깅 많으로 헷갈려서 직접 그리며 하는 경우가 있는데, 그럴 필요 없이 이 사이트에서 돌려보면 될 것 같다! 👍