웹 개발을 하다 보면 console.log()를 사용하여 디버깅해야 합니다.
하지만 모바일에서는 확인할 수 없어 불편할 때가 있습니다.
이 글에서는 console.log의 출력을 웹 페이지의 특정 <div> 영역에 표시하는 방법을 소개합니다.
기본적으로 console.log()는 브라우저의 개발자 도구에 출력됩니다.
하지만 이를 가로채서 웹 페이지 내의 <div>에 출력하도록 만들면, 개발자 도구 없이도 디버깅 정보를 쉽게 확인할 수 있습니다.
주요 기능:
- console.log()의 기본 기능 유지
- div 안에 로그 출력
- 객체(Object)와 배열(Array) 변환하여 가독성 높이기
- Promise 처리하여 해결된 값 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Console Log to Div</title>
<style>
#log-container {
width: 100%;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
background-color: #f9f9f9;
font-family: monospace;
white-space: pre-wrap; /* 줄바꿈 적용 */
}
</style>
</head>
<body>
<h2>Console Output</h2>
<div id="log-container"></div>
<script>
(function() {
const oldConsoleLog = console.log;
const logContainer = document.getElementById("log-container");
console.log = function(...messages) {
oldConsoleLog.apply(console, messages); // 원래 기능 유지
messages.forEach((message) => {
const logMessage = document.createElement("div");
if (typeof message === "object") {
// Promise 처리
if (message instanceof Promise) {
message.then((resolvedValue) => {
logMessage.textContent = "Promise Resolved: " + JSON.stringify(resolvedValue, null, 2);
logContainer.appendChild(logMessage);
}).catch((error) => {
logMessage.textContent = "Promise Rejected: " + error;
logContainer.appendChild(logMessage);
});
return;
}
// 일반 객체 처리
logMessage.textContent = JSON.stringify(message, null, 2);
} else {
logMessage.textContent = message;
}
logContainer.appendChild(logMessage);
});
};
})();
// 테스트 로그
console.log("Hello, World!");
console.log({ name: "Alice", age: 25 });
console.log([1, 2, 3, 4, 5]);
const myPromise = new Promise((resolve) => setTimeout(() => resolve({ status: "success", data: [1, 2, 3] }), 1000));
console.log(myPromise);
</script>
</body>
</html>'프로그래밍 > Js' 카테고리의 다른 글
| TODO 관리 시스템 (0) | 2025.03.18 |
|---|---|
| Promise.all 모든 비동기 작업이 끝난후 작업 실행 (0) | 2024.10.25 |
| Promise 와 async await 대해 자세하게 알아보자. (0) | 2024.10.24 |
| indexedDB 기초 사용법 (0) | 2024.10.07 |
| Array.reduce 여러가지 사용 사례 (0) | 2024.08.27 |