크롬 개발자 도구에서 스크립트 디버깅을 하다보면 breakpoint 사용이 가끔 불편할 때가 있다. 대표적으로 breakpoint에서 멈출때 특정 위치로 점프하고 싶다면, 원하는 위치에 breakpoint을 설정하고 next을 눌러 이동하는 경우이다.


이게 생각보다 불편한다. 대부분 임시로 breakpoint을 설정한 경우라 그대로 두면 엄청 많아져서 관리도 안되기 때문에 나중에 원하지 않아도 계속 걸려 귀찮다. 그래서 다시 해제해야 하는데 이것도 귀찮다.


이 때, 사용하는 기능이 아래 링크에서 설명하는   "continue to here" 다. 이 기능을 사용하면 breakpoint을 설정하지 않고 원하는 위치로 이동하기 때문에 breakpoint가 많아지지 않고 다시 해제할 필요가 없다.


https://twitter.com/kaycebasques/status/755817600249044992




만약, 이 기능을 사용해보지 않았다면, 한번쯤 사용해보면 좋은 기능임을 알게될 것이다. 



[깨알팁 시리즈]

Posted by 전용우

한 2년 전인가 구글 개발자들이 회사에 온 적이 있는데 당시에 내가 했던 질문이 "DOM/Event Listener Breakpoint는 유용한 기능인데 항상 라이브러리에서 멈추기 때문에 활용도가 떨어지는데 개선할 계획이 있냐?" 였다.

그 때 paul irish가 "아. 그거 조만간 나올 예정이다"라고 했다.

그리고 나서 작년 겨울인가 디버깅하다가 갑자기 생각나서 그 기능 개발되었나 하고 찾아보니 적용이 되어 있어서 사용하고 있는데 생각보다 사람들이 이 기능을 몰라서 잠깐 설명할까 한다.


예를 들어, 어느날 서비스를 담당하는 개발자가 휴가를 갔다. 근데 버그가 발견되어서 내가 대신 처리해야 하는 상황이다.

버그는 특정 버튼을 누를 때 레이아웃이 이상하게 된다고 가정하자.

이런 상황에서 일반적으로 내가 해당 코드를 모르기 때문에 js을 바로 찾진 못하고 버튼 엘리먼트의 아이디, 클래스, 이벤트명등의 단서를 가지고 js파일을 찾는다. 그리고 거기에 debugger을 걸면서 해당 이벤트가 발생하는 시점을 확인하면서 디버깅을 한다.

만약에 click이 발생하는 시점에 호출되는 함수를 알 수 있다면 아마 좀 더 쉽게 디버깅을 할 수 있을 것이다.

이게 바로 source tab에 있는 Event Listener Breakpoints다.


위와 같이 click은 선택하면 click이벤트가 발생했을때 해당 함수에 break point가 걸린다.

근데 문제는 대부분이 라이브러리를 사용하기 때문에 아래와 같이 라이브러리 코드에서 멈춘다.



그러면 다음 다음을 누르면서 해당 함수를 찾아가야 하니 생각보다 편하지 않다.

이때, 사용하는게 "Blackbox JavaScript Source Files"다.

크롬 개발자 도구에서 "설정 -> General -> Sources"에 가면 아래와 같이 "Manage framework blackboxing..."을 눌러 라이브러리를 등록한다.



그리고 나서 다시 실행하면 아까와는 다르게 아래와 같이 내가 작성한 코드에서 break point가 걸린다.


이제 부터 "Event Listener Breakpoints"는 너무 편해진다.

그리고 디버깅할 때 등록한 라이브러리 코드는 디버깅 대상에서 제외된다. 이것도 완전 편하다. 항상 다음 함수로 넘어가기를 누르면 라이브러리 코드로 가서 들어갔다 나왔다를 반복해야 하는데 이런 문제도 없다. 

이 기능은 정말 디버깅할 때 강추한다.

내가 사용해보니 좀 노하우가 생겼는데 그 중 하나가 라이브러리 코드 뿐 아니라 의존성을 가지는 파일 중에 보지 않아도 되는 파일이 있다면 해당 파일을 등록하면 좀 더 디버깅이 간단해진다.


ps. 참. 아쉽게도 DOM break point은 black box을 사용할 수 없다.

[깨알팁 시리즈]

Posted by 전용우

[저번]에 이어 이번에는 크롬개발자 깨알팁 

가끔 아래와 같이 찍힌 로그를 복사하고 싶을 때가 있다.


이럴 때 보통 그냥 drag해서 선택한 다음에 ctrl + c , ctrl + v로 하는데 이러면 나중에 정리해야 하고 불편하다. 그 때는 copy라는 메서드를 쓰면 객체가 클립보드에 저장된다.

copy(obj);

근데 문제는 변수에 담기지 않은 상태 즉, 위에 처럼 이미 로깅된 객체를 어떻게 copy메서드를 쓴단 말인가? -_-;

이 때. 알고 있으면 도움되는 깨알팁.

내가 저장하고 싶은 객체에 오른쪽 마우스를 클릭하면 아래(Store as Global Variable)처럼 나옴.

이를 선택하면 global영역에 임시 변수로 저장된다.


그리고 나서 copy(temp1); 하면 됨.


[깨알팁 시리즈]


Posted by 전용우

가끔 알려주면 사람들이 놀라는 팁.

JSON.stringfy는 JSON을 문자로 바꿔주는 메서드인지 다 안다. 보통 아래와 같이 사용

JSON.stringify({"a":1,"b":2});
//{"a":1,"b":2}

근데 위와 같이 작은 객체를 보기 쉬운데 크기가 커지면 커질수록 보기 어렵다.

그래서 stringify는 세 번째 인자로 숫자등을 넣어 공백이 삽입되 읽기 쉽게 할 수 있다.

숫자를 넣으면 들여쓰기, 공백, 줄 바꿈일 때 공백이 숫자만큼 들어가고 문자가 들어가면 문자가 들어간다.

예를 들면, 아래와 같이 세 번째 인자로 2을 넣으면 공백이 두개 들어간다.

JSON.stringify({"a":1,"b":2},null,2);
/*
{
  "a": 1,
  "b": 2
}
*/

두 번째 인자는 함수인데 반환 값으로 특정 값을 제외하고 싶을 때 사용한다. 반환 값이 undefined면 안 나옴.

자세한건 [URL참고]


[깨알팁 시리즈]

Posted by 전용우