Hacker News 의견

• 브라우저 내장 디버깅 도구의 발전

  • 브라우저 내장 디버깅 도구가 지난 수십 년간 크게 발전함.
  • 자바스크립트 경력자로서, 직관적인 브라우저 코드 디버깅을 가능하게 한 모든 이들에게 감사함.
  • 백엔드 개발이나 다른 언어로 작업할 때, 현대 브라우저의 디버깅 도구 생태계가 그리움.

• 디버거 문장의 활용

  • 디버거 문장(debugger;)을 사용하는 것은 크롬 디버거의 재귀적인 스택을 이길 수 있는 유일한 방법임.
  • 사이트 방문자가 자신의 난독화된 홈페이지를 해석하는 것을 방지하기 위해 디버깅 함정을 사용한 사례 언급.

• NodeJS 백엔드 디버깅의 어려움

  • Python/Elixir 프로그래머로서 pdb.set_trace()/IEx.pry()를 자주 사용함.
  • 복잡한 NodeJS 백엔드를 상속받아 적절한 디버깅 도구 없이 작업하며 어려움을 겪음.
  • console.log 디버깅으로 돌아가야 했으며, 이는 원시적인 느낌을 줌.
  • 적절한 디버깅 REPL이 없는 것에 대한 놀라움과 도움을 요청함.

• Werkzeug 추천

  • Django 백엔드 개발에 Werkzeug 사용을 추천함.
  • 예외가 발생할 때마다 브라우저에서 "PDB" 쉘을 사용할 수 있게 해줌.

• IIFE의 로컬 변수 접근 방법

  • 즉시 실행 함수 표현식(IIFE)의 로컬 변수에 접근하는 방법에 대한 질문.
  • 디버거가 IIFE 범위 내 코드를 중단하지 않고도 이를 수행할 수 있는 방법 탐색.

• UI 문자열을 통한 디버깅 방법

  • 네트워크 패널에서 네트워크 요청 기록 시작.
  • 왼쪽 사이드바에서 검색을 사용하여 찾고자 하는 코드/UI 문자열 입력.
  • 번들된 js 청크 파일에서 결과를 찾고, "Sources"에서 열어 디버거 문장을 배치함.

• 조건부 중단점을 사용한 디버깅

  • {configOption: true}를 {get configOption() { debugger; return true; }}로 변환하는 방법에 대한 질문.

• Chrome 전용 기능인 'Monitor Events for Element'

  • 'Monitor Events for Element' 기능에 대한 언급과 Chrome 전용이라는 점.
  • Firefox에 대한 대안이 있는지에 대한 궁금증.

• queryObjects API의 부재

  • 특정 생성자로 생성된 모든 객체의 목록을 반환하는 queryObjects API에 대한 언급.
  • 예를 들어, queryObjects(Function)을 사용하여 힙에 있는 모든 함수의 목록을 얻을 수 있음.

• 관찰 변수의 사용 어려움

  • 관찰 변수를 작동시키는 것이 어려움을 겪음.
  • 전역 변수만 관찰할 수 있다고 가정하지만, 예상대로 작동하지 않아 로그에 값을 채움.
  • 콘솔이 변수 및 설정 값을 보고 테스트할 수 있는 Data.gui 스타일 UI를 추가해야 한다는 의견과 관련 CodePen 링크 제공.