console.log 는 디버거는 아닙니다. JavaScript 앱이 무엇을 하고 있는지 표시하는 훌륭한 방법이지만 너무 적은 정보만 표시하는 한계가 있습니다. 코드가 복잡하면, 적합한 디버거가 필요하게 됩니다. 그것이 Firefox 개발자도구 놀이터(playground)(디버깅에 대한 모든 것)에 새로운 세션을 포함한 이유입니다. 간단한 JavaScript 할일 앱을 검사하고 고치기 위해 Firefox 디버거를 사용하는 4개의 강의를 마련했습니다.

디버거 놀이터

강의들은 완전히 무료이고 할일앱 코드는 여기에서 다운로드가 가능합니다.

이러한 강의는 우리에겐 새로운 방식이고 여러분에게 보여줄 수 있다는 것이 매우 흥분되는 일이었습니다. 우리는 항상 개발자들이 무언가 배우는 것을 돕고 매일 워크플로우를 향상시키는 데 도움을 주는 새로운 방식을 항상 찾고 있습니다. 여러분이 생각한 방법이 있다면 우리에게 알려주세요. 우리는 돌아오는 시기에 놀이터를 확장할 것이고 여러분같은 개발자에게 얘기 듣는 것을 좋아합니다.

만약 Firefox Debugger가 익숙하지 않다면, MDN의 디버거 문서들 과 아래 비디오를 보세요.

이제 새로운 디버거 놀이터에 대한 강의를 살펴 보겠습니다. 이제까지 변수의 값을 찾으려면 console.log 를 사용하셨나요? 디버거를 사용하여 이러한 작업을 하는 더 쉽고 더 정확한 방법이 여기 있습니다.

변수의 값을 찾기 위해 디버거를 사용하기

Firefox 디버거를 사용하여 변수를 찾는 것은 console.log를 사용하는 것보다 쉽습니다. 다음은 작동방법입니다:

간단한 할일 앱을 살펴 보겠습니다. 새로운 탭에서 할일앱을 여세요.

이 앱은 입력 폼의 값을 가져오고 객체를 생성하고, 그리고나서 할일목록의 배열에 객체를 넣는 addTodo을 실행하는 함수를 가지고 있습니다. 새로운 할일을 추가하여 테스트해봅시다. 새로운 할일이 추가되고 목록에 나타날 거라고 예상했지만 대신 “[object HTMLInputElement]”가 보일 겁니다.

몇몇 부분이 잘못되었고, 우리는 코드를 수정해야 합니다. 문제가 있는 부분을 찾기 위해 함수 전체에 console.log를 추가하는 것은 대단한 유혹입니다. 이것과 같이 시도하게 됩니다:

const addTodo = e => {
 e.preventDefault();
 const title = document.querySelector(".todo__input");
 console.log('title is: ', title);
 const todo = { title };
 console.log('todo is: ', todo');

items.push(todo);
 saveList();
 console.log(‘The updated to-do list is: ‘, items);
 document.querySelector(".todo__add").reset();
 };

이것은 작동하지만 성가시고, 어색합니다. 우리는 또한 코드를 수정한 후에 이 코드들을 삭제하기 위해 기억하고 있어야 합니다. 중단점(breakpoint)를 사용하여 디버거에서 작업하는 더 좋은 방법이 있습니다…

디버거 놀이터에 대해 더 배우기

디버거 놀이터는 Firefox 디버거 사용, 호출 스택(call stack) 검사, 상태 중단점 설정 등과 같은 기본 사항을 다룹니다. (JavaScript 디버깅을 포함한) 디버거를 사용하기 위한 학습 곡선이 가파르다는 것을 알고 있습니다. 그래서, 쉽게 이해하고 해석이 가능한 할일앱을 만들었습니다. 브라우저에서 실행하여 여러분의 작업을 추적할려 할 때 유용합니다. 이 앱은 여기에서 다운로드가 가능합니다. 그것을 가지고 놀이터를 방문하여 강의를 진행하세요.

다음에 보고 싶은 것을 알려주세요. 우리는 최신 웹 기술에 대한 강의를 해왔고 여러분의 의견을 듣고 싶습니다. 댓글을 남겨주세요.

역자주:
“Playground”는 정확히 대체하는 단어를 찾기 어려워 “놀이터”로 번역했습니다. 보시다가 더 좋은 대체어를 제안해주시면 변경하도록 하겠습니다.