더북(TheBook)

4.11 {@debug}로 디버깅, 리액티브하게 디버깅하기

자바스크립트뿐만 아니라 코드를 작성하면서 console.log를 사용하는 건 아주 일반적인 일입니다. 하지만 HTML 문서 안에서는 흔한 기능이 아닙니다. {@debug}를 이용하여 디버깅하는 방법을 알아보고, 리액티비티를 이용하여 관심 있는 변수의 값이 변할 때마다 추적해보겠습니다.

debugSample 프로젝트를 생성하기

{@debug}로 브라우저에서 디버깅하기

리액티브하게 디버깅하기

스벨트는 {@debug} HTML 블록 안에서 console.log를 대신해 로그를 확인할 수 있게 합니다. 데이터가 변할 때마다 볼 수 있지요. 그뿐만 아니라 디버거를 열고 있다면 브라우저 개발자 도구에서 중단점까지 걸어줍니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.