자바스크립트: 콘솔 로그(console.log)의 내용을 브라우저 HTML 내에 표시하기

자바스크립트는 아무 곳에서나 시스템의 변수, 함수, 객체들을 맘대로 덮어쓸 수 있다는 문제점이 있지만, 그 문제점을 역으로 이용하여 콘솔 로그를 브라우저 내에 표시하는 것이 가능합니다.

먼저 body 태그 내에 콘솔 로그를 표시할 영역을 생성합니다.

<pre id="console"></pre>

다음 자바스크립트에서 위의 pre 태그를 불러옵니다.

const consoleDiv = document.getElementById("console")

아래의 consoleToHtml 함수를 작성합니다.

const consoleToHtml = function() {
    consoleDiv.textContent += `${(new Date()).toLocaleString("ko-KR")} >>>`
    Array.from(arguments).forEach(el => {
        consoleDiv.textContent += " "
        const insertValue = typeof el === "object" ? JSON.stringify(el) : el
        consoleDiv.textContent += insertValue
    })
    consoleDiv.textContent += "\n"
}

consoleToHtml – 익명 함수를 만든 다음 변수에 저장합니다.
(new Date()).toLocaleString("ko-KR") – 현재 날짜와 시간을 한국어 포맷으로 표시합니다.
Array.from(arguments) – arguments는 함수에서 파라미터의 값들을 배열로 가지고 있는 내장 변수입니다. 이것을 forEach문으로 처리하기 위해 유사배열에서 배열형태로 변환합니다.
insertValue– 타입이 object(array 포함) 계열인 경우 그대로 textContent에 추가하면 내부 내용이 표시가 되지 않습니다. 이를 방지하기 위해 object 계열의 파라미터들은 JSON 스트링화하여 텍스트로 표시합니다.
"\n" – 다음 줄로 줄바꿈합니다.

이 함수를 기존의 console.log에 덮어씌웁니다.

window.console.log = consoleToHtml

console.log로만 적어도 작동하지만 경각심(?)을 위해 window의 내부 console 이라는 것을 명시했습니다.

코드를 종합하면 다음과 같습니다.

첫 번째 로그에서 알 수 있듯이 콘솔 로그에는 단순히 내용을 표시하는 기능뿐만 아니라 printf처럼 포맷을 지정할 수 있는 기능, css를 지정할 수 있는 고급 기능도 있지만 이 예제에는 반영되지 않았습니다. 실제 필요 여부에 따라 이러한 추가 기능을 구현할지 생략할지 결정할 수 있습니다.