당신이 몰랐던 console.log 대안 😮

11656 단어 javascripttutorialshowdevprogramming
이제 JS 코드를 작성하고 있는데 제대로 작동하지 않는다고 생각해보세요. 가장 먼저 하는 일은 무엇입니까? 당신은 그것을 console.log ging하고 있습니다! 그래서 console.log 에 대한 몇 가지 대안을 말씀드리겠습니다.

구조 분해 사용



자바스크립트 개체의 파괴력을 사용하여 다음을 수행할 수 있습니다.

const { log } = console;

log("hi");
log("testing");


다음과 같이 log 함수를 원하는 다른 이름으로 변경할 수 있습니다.

const { log: myLog } = console;

myLog("hi");
myLog("testing");


콘솔.그룹



로그를 그룹화하고 싶었던 적이 있습니까? 이 방법은 당신에게 완벽합니다!

console.group("groupName");
console.log("hi");
console.log("testing");
console.groupEnd();

console.group("groupName2");
console.log("hi");
console.log("testing");
console.groupEnd();




멋지죠?

콘솔 테이블



배열을 인쇄하는 데 유용합니다.

const arr = [1, 2, 3, 4, 5];
console.table(arr);




콘솔 시간



이 방법은 시간을 측정하는 데 사용됩니다. 예를 들어 x 작업을 완료하는 데 몇 초가 걸렸는지 확인합니까?

console.time("test");
setTimeout(() => {
    console.timeEnd("test");
}, 1000);


그러면 다음과 같은 결과가 나타납니다.

test: 1.000s


콘솔.어설션



이 메서드는 조건이 참인지 확인하는 데 사용됩니다. 그렇지 않은 경우 오류가 발생합니다.

console.assert(/** Condition **/, /** Error message **/);


console.assert(1 === 1, "1 is equal to 1"); // No error
console.assert(0 === [], "0 is equal to []"); // Error in the console




console.count



어떤 일이 일어나는 횟수를 센다.

console.count("counter 1");

for (let i = 0; i < 10; i++) {
    i % 2 == 0 ? console.count("counter 1") : console.count("counter 2");
}


결과는 다음과 같습니다.



콘솔.추적



이 메서드는 호출된 위치를 추적합니다. 다음과 같은 HTML 파일이 있습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <script>
            "test";

            console.trace();

            i = 0;
        </script>
    </body>
</html>


이제 console.trace가 호출된 위치를 확인할 수 있습니다.



디버거 키워드


debugger 키워드에 대해 듣지 못할 수도 있습니다. 코드 실행을 중지하는 데 사용되는 키워드입니다.

const buggyCode = () => {
    debugger;
    console.log("hi");
};

// ...

buggyCode();

console.log("World");


그러면 코드 실행이 일시 중지되고 다음과 같은 것을 볼 수 있습니다.



그리고 디버거가 호출된 위치를 알려줍니다.



읽어 주셔서 감사합니다!



이 튜토리얼을 읽어주셔서 감사합니다. 바라건대, 당신은 새로운 것을 배웠고 그것을 사용할 준비가 되었습니다.

연결하다:
  • 트위터:
  • GitHub: https://github.com/posandu
    • Elm- 부분 적용 2일차
    Dr. Angela의 100일 간의 코드 Python 부트캠프 중 05일

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage