console.log를 사용하면 자바스크립트에서 사용되는 데이터값을 출력할 수 있다. 출력값은 브라우저 콘솔창의 콘솔항목에서 확인할 수 있다. 이 기능은 브라우저 화면에 직접적으로 출력이 되지 않는다. 다만 디버깅 용도와 같이 별도의 창에서 데이터를 출력하는 역할을 한다.
자바스크립트 브라우저 콘솔 출력 console.log 사용 방법
javascript output
웹개발을 하다보면 디버깅이 필요하다.
모든 브라우저는 개발자 모드가 있어 자바스크립트 구현에 필요한 디버깅을 할 수 있다.
console.log()는 개발자모드에서 자바스크립트의 데이터를 출력할 수 있다.
객체 뿐만 아니라 문자열도 가능하다.
개발자모드 콘솔창을 이용하면 자바스크립트의 특정값을 출력할 수 있다.
브라우저 콘솔 개발자모드
개발자모드는 모든 브라우저에서 사용이 가능하다.
단축키는 F12 이며 웹페이지를 임의의 값으로 테스트하고 디버깅을 할 수 있다.
웹개발자들이라면 자주 사용하는 기능이기도 하다.
F12 를 누른 후 에 Console 항목을 클릭하면 자바스크립트에서 구동되는 결과값을 볼 수 있다.
위의 콘솔은 네이버 웨일브라우저이고, 하단의 콘솔은 구글 크롬브라우저이다.
개발자모드 단축키 F12 를 눌르면 볼 수 있는 화면이다.
조금 차이가 있지만 기능적으로 같다.
브라우저 디버깅 콘솔에서 출력하기
console.log() 함수를 위한 코드를 작성해 본다.
문자열 뿐만 아니라 객체까지 출력되는 것을 확인해 본다.
이것을 보면 파이썬의 그것과 비슷한 느낌을 받을 수 있다.
<!DOCTYPE html>
<html>
<body>
<h1>직접 출력하기</h1>
<p id="Intml">첫번째 문단</p>
<p id="InText">두번째 문단</p>
<script>
var jDt = {"title" : "콘솔 출력"};
console.log("브라우저 디버깅 콘솔 출력", jDt);
</script>
</body>
</html>단축키 F12 를 클릭하여 콘솔화면에서 값이 출력된 것을 확인해 본다.
좌측은 웨일 브라우저의 콘솔창이고, 우측은 크롬 브라우저의 콘솔창이다.
코드를 보면 문자열과 json 객체를 출력하도록 되어 있다.
console.log() 함수에서 여러 값을 출력할 때 콤마를 사용하여 서로 다른 데이터타입의 값들을 연달아 출력할 수 있는 것 또한 가능하다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 프린트 지정 영역 출력하기 window.print() 사용 (0) | 2021.10.02 |
|---|---|
| 자바스크립트 구문 익히기 다른 프로그래밍 언어와 비슷하다 (0) | 2021.09.25 |
| 자바스크립트 메세지창 window.alert 사용 방법 javascript output (0) | 2021.09.19 |
| 자바스크립트 직접 출력 document.write() 사용 javascript output (0) | 2021.09.17 |
| 자바스크립트 화면 출력 innerHTML innerText 차이 사용 javascript output (0) | 2021.09.15 |
댓글