Javascript - 크롬 개발자 도구

 

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

크롬 개발자 도구

 

• console.log(  ), console.info(  ), console.warn(  ), console.error(  )

console.log("Hello world");	//해당 메시지를 출력

console.info("Hello world");    //정보 메시지를 출력(log와 비슷한 기능)

console.warn("Hello world");    //경고 메시지를 출력

console.error("Hello world");   //에러 메시지를 출력
       
       
//콘솔창에서 우리가 원하는 메시지 유형만을 필터링해서 볼 수도 있다.

 

 

• console.table(  )

콘솔창에서 특정 데이터를 테이블 형태로 보여주는 함수이다.

var userList = [
	{firstName:"재석", lastName:"유", email:"yu@gmail.com"},
	{firstName:"종국", lastName:"김", email:"kim@gmail.com"},
	{firstName:"세찬", lastName:"양", email:"yang@gmail.com"},
	{firstName:"지효", lastName:"송", email:"song@gmail.com"},
 ];

console.log(userList);		//배열 형태로 데이터 출력

console.table(userList);	//테이블 형태로 데이터 출력

 

 

• console.time(  ), console.timeEnd(  )

특정 코드가 실행되는 속도를 알려주는 함수이다.

function a( ){

	console.time();

	//code

	console.timeEnd();

 }
 
 
 //console.time( ), console.timeEnd( ) 사이에 있는 코드가 
 //실행되는데 걸리는 시간을 알려주는 함수이다.

 

 

• 참고

콘솔창 메시지에 스타일을 주는 방법은 다음과 같다.

console.log("This is %cstyle message", "color:yellow; background-color:blue; padding:4px;");


//%c 이후부터 콘솔창 메세지에 스타일을 줄 수 있으며, 두 번째 파라미터는 모두 CSS문법으로
//작성해야 한다.