지금까지 웹 개발을 하면서 개발자 도구의 활용법에 대해 크게 관심을 기울이지 않았다. 단순히 몇초만 수고스러우면 되다보니 주로 디버깅 체크포인트를 활용하는 정도로 개발 시 사용했었다. 그러나 오랜만에 시간적 여유로움이 생겨 웹 개발과 관련된 포스팅을 살펴보니, 개발자 도구에는 엄청나게 유용한 기능들이 많다는 것을 다시 한 번 깨달았다.
몇 초만 투자하면 되는 간단한 작업이 아니라, 더욱 효율적이고 고급스러운 작업을 수행할 수 있는 방법들이 존재한다.
해서 이러한 유용한 발자 도구를 효과적으로 활용하면서 발견한 다양한 팁과 기능들을 정리하려고 한다.
logpoint (로그 지점)
chrome 73버전에 추가된 기능이다.
로그 지점(Logpoints)은 코드를 복잡하게 만들지 않고도 간편하게 콘솔에 메시지를 로깅할 수 있는 효과적인 도구이다. 주로 디버깅 작업을 수행할 때, console.log()를 여러 곳에 추가하고 새로고침하는 번거로움을 덜어주는 역할을 한다.
이 도구를 활용하면 디버깅 중인 코드에서 특정 지점에 로그를 추가할 수 있다. 그리고 이 로그 지점을 통해 특정 조건이 충족될 때 메시지를 출력하도록 설정할 수 있다. 이렇게 설정한 후 코드를 다시 실행하기만 하면, 조건이 충족될 시 자동으로 콘솔에 로그가 표시되어 디버깅이 간편해진다.
이로써 console.log()를 코드 내에 여러 번 추가하고 새로고침하는 일련의 과정을 생략하고, 더 빠르게 코드를 분석하고 디버깅할 수 있게 된다. 로그 지점을 적극적으로 활용하면 코드 작성과 디버깅의 효율성을 크게 향상시킬 수 있는 기능이다.
.
사용법
로그 지점을 추가할 지점에서 마우스 오른쪽 버튼 클릭 > Add logpoint 클릭
예시를 위한 버튼 click 이벤트
Breakpoint Editor가 표시된다. 이 편집기에 원하는 콘솔 표현식을 입력한다.
console.log나 console.count 등 원하는 함수 또는 단순히 래핑된 변수(객체등)를 표시할 때 {변수} 등을 사용 할 수도 있다.
위는 설명을 위한 예시로 실제로는 console.log(`event >> ${event}`);를 찍어보겠다.
편집기에 표현식을 입력 후 nter를 누르거나 중단점 편집기 외부를 클릭하여 저장
저장하면 체크포인트와 다른 색 뱃지로 표시된다.
새로고침 없이 해당 지점이 실행되면 표현식 결과가 콘솔에 표시
버튼 클릭 시 새로고침 없이 콘솔 메세지를 찍을 수 있는 것을 확인 할 수 있다.
개발 하다보면 캐싱 등 문제로 새로고침을 여러번 해야 적용이 됐었는데 새로고침 없이 콘솔 메시지를 찍거나 조건등의 표현식을 넣을 수 있다는 점이 굉장히 강력하게 느껴졌다. 해당 기능은 굉장히 자주 활용 할 것같다.