LHJ

I'm a FE developer.

1.4.3 콘솔 및 디버거

11 Sep 2020 » canvas

1.4.3 콘솔 및 디버거

  1. HTML5를 지원하는 주요 브라우저를 이용하면 콘솔과 디버거를 사용할 수 있다.
  2. 사실 브라우저 제작사 사이에서 서로의 아이디어를 따라하는 경우가 흔히 있어서 FF, 오페라, IE 등과 같은 웹킷 기반 브라우저에서 제공하는 콘솔과 디버거는 매우 비슷하다.

console.log

  1. console.log() 메서드를 이용하면 콘솔을 사용할 수 있다.
    문자열을 console.log() 메서드에 전달하기만 하면 전달된 문자열은 콘솔 창에 표시된다.
    여기서 언급한 디버거는 일반적인 디버거로 브레이크포인트를 설정하고, 코드를 확인하고, 변수 및 콜스텍(call stack)을 조사할 수 있다.

프로그램에서 프로파일러를 시작하고 멈추기

개발자창의 프로파일러 텝 아래에 있는 원 모양의 아이콘을 클릭해 웹킷 기반 브라우저에서 프로파일링을 시작할 수 있다.
그러나 아이콘을 클릭해 프로파일러를 제어하는 것만으로 충분하지 못할 때도 있다.
코드의 특정 라인에서 프로파일링을 시작하고 멈추고 싶다면 Webkit 기반 브라우저에서는 다음 코드처럼 console.profile() 메서드와 console.profileEnd() 메서드를 이용해 프로파일링을 시작하거나 멈출 수 있다.

console.profile('Core HTML5 Animation, erasing the background');

// ...

console.profileEnd();