개발자 도구의 기능 활용

개발자 도구 활용하기

chrome, Firefox을 젤 많이 사용한다

1. chrome

https://ko.javascript.info/debugging-chrome

✔️디버깅 : 스크립트 내 에러 검출 제거하는 과정

윈도우 : F12, Mac : Cmd + Opt + J

• Elements 탭: DOM 구조 확인 및 수정

• Console 탭: JavaScript 실행 및 디버깅

• Sources 탭

  • 파일 탐색 영역 : 페이지 구성하는 쓰인 모든 리소스를 트리 형태로 보여준다

  • 코드 에디터 영역 : 리소스 영역에서 파일 소스 코드를 보여준다

  • 자바스크립트 디버깅 영역 : 디버깅 관련된 기능 제공

    debugger 명령어

    function hello(name) {
      let phrase = `Hello, ${name}!`;
    
      debugger;  // <-- 여기서 실행이 멈춥니다.
    
      say(phrase);
    }

    https://ko.javascript.info/article/debugging-chrome/debugging/index.html
    

  • Watch : 표현식 평가, 결과를 보여준다

  • Call Stack : 코드를 해당 중단점으로 안내한 실행 경로 역순으로 표시한다

  • Scope : 현재 정의된 모든 변수 출력

    • local : 함수 지역변수
    • Global : 함수 전역변수
    • Local의 하위항목으로 this 정보도 출력되기도 한다

• Network 탭: 요청/응답 모니터링

• Performance 탭: 성능 분석

1. Safari

   개발자 메뉴를 명시적으로 활성화 해줘야 한다

   환경설정 → 고급 패널 → 메뉴 막대에서 개발자용 메뉴 보기 체크

   이렇게 하면, 개발자용 표시가 뜨고

   cmd + opt + c로 개발자 콘솔을 열 수 있다

   

Console API

https://developer.mozilla.org/en-US/docs/Web/API/Console_API

console이란 객체 안에, 메서드를 불러다가 쓴 것

• console.log() : 인자로 전달된 값 화면에 출력
  • 아이콘 없는 검은색 텍스트
  • 콤마(,)를 통해 출력하고 싶은 여러 개 인자 넣을 수 있다
  • 템플릿 리터럴 문법도 함께 사용하면 가독성 좋게 표현할 수 있다

    const a = 1;
    const b = 'hello';
    
    // 문자열 포매팅
    console.log('%d는 숫자 %s는 문자열', a, b); 
    
    // 템플릿 문자열
    console.log('${a}는 숫자 ${b}는 문자열');Copy

    ❗️console.log는 참조 로딩하기 때문에 실시간으로 변경된다

    var obj = {};
    
    console.log(obj);
    
    obj.a = 1;

• console.dir() : console.log()는 html태그도 함께 출력되지만, console.dir()는 객체로 출력된다
  
  

• console.trace() : 호출된 함수 스택을 자동으로 추적해준다
  

• console.info() : 진한 텍스트

• console.debug() : 파란색 텍스트

• console.warn() : 아이콘 있는 노란색 텍스트

• console.error() : 아이콘 있는 빨간색 텍스트

  • 에러 확인할 때 사용하기 좋다 = 함수 호출 스택을 콘솔에서 보여주기 때문이다

• console.time() : 코드 수행 시간 알려주는 메서드

• console.table() : 엑셀처럼 테이블 형식으로 알려주는 메서드

• console.group(), console.groupEnd()

  console.group() : 콘솔 화면에 출력할 값들이 많을 대 그룹지어서 가독성 높게 보여주는 메서드

  console.groupEnd() : 그룹을 묶어서 하나의 집합 형성하는 메서드

  • 중첩 사용 가능

    console.group("쇼핑몰 로그");
    console.log("로그인 됐는지 우선 확인");
    
    console.group("회원 관련 작업");
    console.log("아이디 확인");
    console.log("비번 확인");
    console.groupEnd();
    
    console.group("상품 관련 작업");
    console.log("가격 변동이 있는가?");
    console.log("재고는 남아있는가?");
    console.groupEnd();
    
    console.log("마무리 작업");
    console.groupEnd();

    

• console.count() : 특정 호출된 값이 몇 번 호출되었나 기록하고 싶을 때 사용한다

• console.assert() : 1번째 인수가 false인 경우에만 콘솔에 기록한다 = true이면 아무것도 하지 않는다

• console.clear() : 콘솔 화면을 깔끔하게 지워준다