NGMsoftware

NGMsoftware
로그인 회원가입
  • 매뉴얼
  • 학습
  • 매뉴얼

    학습


    Web 웹 개발에서 콘솔 로그 레벨에 따라 다른 컬러로 확인하는 방법. (How to check different colors acc…

    페이지 정보

    본문

    안녕하세요. 엔지엠소프트웨어입니다. 개발자라면~ 디버깅에 대해서는 모두 잘 알고 있을텐데요. 이클립스나 인텔리제이, 비주얼스튜디오, vscode등등 IDE들이 유사한 기능을 제공합니다. 일반적으로 윈도우나 CS 프로그래밍에서는 비슷한데요. 웹의 경우에는 다른 부분이 존재합니다. 기회가되면 자세하게 알아보고 비교해보는 시간을 가지면 좋겠네요. 엔지엠 에디터도 전문 개발 도구만큼은 아니지만, 국내 매크로 프로그램중에 유일하게 디버깅 기능이 포함되어 있습니다.

     

    콘솔 로그 레벨에 따라 색상으로 표시하는걸 확인하려면 vscode에서는 불가능합니다. 크롬에서 확인해야 하는데요. 테스트를 위해서 아래 코드를 index.html에 붙여넣기 하세요.

    <html>
    <script src="test.js"></script>
      <body>
      <a id="ngm" href="http://ngmsoftware.com" target="_blank">엔지엠소프트웨어</a>
      </body>
    </html>

     

    test.js도 추가해주세요~

    let arr = [1, 2, 3, 4, 5];
    
    console.log("log: ", arr);
    console.info("info: ", arr);
    console.warn("warn: ", arr);
    console.error("error: ", arr);

     

    vscode에서 index.html을 실행하세요.

    SRDB3ai.png

     

     

    크롬에서 F12를 눌러서 개발자 도구를 실행합니다. 그리고, 콘솔을 확인 해보세요.

    13hwlQt.png

     

     

    warn(Warning: 경고)은 노란색 느낌표로 표시되고, error(오류)는 빨간색 엑스로 표시됩니다. 간단하죠~

     

    개발자에게 후원하기

    MGtdv7r.png

     

    추천, 구독, 홍보 꼭~ 부탁드립니다.

    여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

    감사합니다~

    • 네이버 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기
    추천0 비추천0

    댓글목록

    등록된 댓글이 없습니다.