Java Script - 크롬 개발자 도구 Chrome

Chrome 개발자 도구를 통해 다양한 정보를 확인할 수 있다.

        console.log("Text tese");

        console.info("Text tese");

        console.warn("Text tese");

        console.error("Text tese");

콘솔 창에 찍을 수 있는 타입들이다. warn - 경고, error - 에러 관련 정보를 나타낼 때 사용한다.

        let student = [

                {"class":"1", "name":"Lee"},

                {"class":"1", "name":"Kim"},

                {"class":"2", "name":"Park"}

            ];

        console.log(student);

        console.table(student);

table - 오브젝트를 테이블 형식으로 출력해 직관적이다.

        function employee(salary){

            console.time();

            let rank = 0.4;

            let incentive = salary * rank;

            console.timeEnd();

            return incentive;

        }

        let incentive = employee(400);

        console.log(incentive);

time, timeEnd - 해당 함수가 시작해서 끝날 때까지 걸리는 시간을 확인할 수 있다.

        console.log("Console log %cstyle test", "color:red;background-color:green")

%c 를 통해 원하는 부분의 스타일을 변경할 수 있다.

 

개발자도구의 Network 탭에서 XHR, JS, CSS, Img 등 홈페이지에 대해 분석할 수 있다.