안녕하세요. 에디입니다.
여러분들이 작성하는 HTML,CSS,Javascript(클라이언트 스크립트) 소스코드들은
실제 코드 실행 환경(런타임환경)은 주로 사용자/개발자 컴퓨터(PC,노트북,스마트폰)에 설치된 각종 웹 브라우저들에 의해 실행되고 그결과가
사용자들에게 보여집니다.

단지 인터넷망을 통해 사용자들의 웹브라저에 여러분이 코딩한 소스를 365일 24시간 제공해주기 위한 수단으로 일반적으로 서버라는 컴퓨터에  코딩한 소스 결과물들을
저장소 개념으로 서버에 보관했다가 도메인주소/IP주소 기반 소스경로등을 호출하여 여러분,사용자들의 컴퓨터(모바일폰,PC) 에 설치한 웹브라우저로 가져오는 과정을 통해 실제 코드는
웹브라우저에 의해 해석되고 실행되어 보여진다는것을 먼저 이해하면 좋을듯합니다.

따라서 5대 표준 웹 브라우저(Edge,Chrome,Safari,Firefox,Opera)들은 기본적으로
브라우저에서 실행되는 HTML,CSS,Javascript 소스코드 확인 및 소스코드(웹페이지)의 구조 정보 제공 ,에러 정보등 HTML,CSS,JavaScript 개발과 관련된
각종  개발 편의 기능을 웹브라우저에서 제공하는 웹 개발자 도구 란 것을 통해 지원합니다.

웹 퍼블리셔, 웹 프론트엔드 개발자라면 반드시 5대 표준 브라우저에서 모두 제공하는 개발자도구 사용법을 충분히 숙지할 필요가 있으며
개발자 도구를 잘 활용하면 HTML,CSS,Javascript 소스 구조에 대한 빠른 이해와 강력한 디버깅 기능을 이용해 신속하게 프론트엔드 에러를 처리할 수 있어 개발 생산성 과 효율성을 높일 수 있습니다. 

먼저 웹 브라우저 개발자 도구의 주요 기능들에 대해 간략히 알아보도록 하겠습니다.(크롬 브라우저 기준)

1) 웹개발자 도구 주요 탭 기능 소개

웹브라우저의 개발자도구는 모든 5대 표준 웹브라우저에서 F12키를 누르면 웹브라우저 우측에 개발자도구가 나타나며 다시한번 F12를 누르면 개발자도구가 숨겨집니다.
아래는 웹개발자 도구에서 제공하는 주요 탭의 기능을 소개해드립니다.

A)Element
-웹 브라우저에 제공된 원본 HTML소스와 CSS,Javascript 코드를 확인할 수 있다.
-화면 레이아웃 위치에서 특정 영역에 오른쪽 마우스 클릭 검사 메뉴를 클릭하면 해당 HTML 요소의 위치를 정확히 찾아준다.
-HTML코드 영역 내 특정 코드영역에 마우스를 오버하면 화면 영역에 선택한 HTML 요소의 영역이 표시된다.
-HTML 과 CSS,Javascript 코드 편집을 통해 바로 변경내용을 확인해볼 수 있다. 

B)Console
-자바스크립트의 console명령어를 통해  콘솔 로깅 출력 정보들을 확인할수 있다.
-자바스크립트 에러나 경고 메시지,로깅 메시지를 확인할수 있다.
-자바스크립트 코드를 직접 입력해 실행해볼수 있다.


C)Sources
-현재 HTML페이지와 연관된 각종 소스 파일 목록을 개별적으로 확인할 수 있다.
-관련 소스 편집이 가능하다.
-소스에 대한 디버깅 적용 및 해제가 가능하다.


D)Network
- 페이지 로딩 시 브라우저 캐시를 사용하지 않게 설정할 수 있습니다.
- 캐시 사용안함을 항상 켜두고 개발하시면 개발자도구 활성화 시 정확한 코드변경 내용을 바로 확인 가능합니다.
- http Request, Response 통신결과를 확인할 수 있으며 특히 httpRequest 헤더 값을 확인할 수 있습니다.
- http Response 쿠키값등 을 확인할 수 있습니다.


E)Application
-브라우저 기반 각종 저장 객체들의 데이터를 확인할수 있습니다.
-HTML5 Storage,IndexedDB,WebSQL,Cookie등의 스토리지 객체 정보를 확인할 수 있습니다.


F)개발자 도구 제어 및 커스터마이징 설정하기 >Settings

-개발자 도구 상단 맨 우측에 세로모양 …. 메뉴를 클릭해보세요.
-해당 메뉴를 통해 개발자 도구의 레이아웃 변경이나 세부적인 개발자도구의 맞춤 설정기능을 이용할 수 있습니다. 
-Settings메뉴를 통해 탭별 주요 설정기능을 한 화면에서 설정할 수 있습니다.

구글 크롬 개발자도구 정보 링크:  https://developers.google.com/web/tools/chrome-devtools 


2) 개발자 도구 자바스크립트 코드 디버깅 방법 소개

웹 프론트엔드 개발자라면  반드시 아래와 같은 웹브라우저 개발자도구의 콘솔 탭과 소스탭에서 제공해주는 클라이언트 자바스크립트 코드 디버깅 방법을 
이해하시고 사용하실수 있어야 여러분이 작성한 자바스크립트 코드의 에러를 좀더 빠르고 효율적으로 찾고 에러를 해결하는 디버깅을 진해하실수 있습니다.

A) debugger; 코드내에 명시하는 경우 : 비추천 방식
-개발자 코드내에 debugger; 코드를 명시하여 브라우저 개발자 도구 활성화 된 상태에서 해당 위치에서 디버거 호출됨.
-라인별로 디버깅을 계속 진행하고자 하면 F10키를 눌러 진행한다.
-다음 디버깅 구간으로 바로 이동하고자 하면 F8키를 눌러 이동한다.
-반드시 디버거 사용을 완료하면 디버거 코딩을 주석처리 하거나 삭제합니다. 

-여러분 코딩 작업폴더에 debug.html 파일을 생성하고 아래 코드를 코딩하고 저장 후 브라우저로 실행합니다.
-F12키를 눌러 개발자 도구를 실행한후 Debug 탭을 선택 한 후 다시 웹페이지를 로딩 시킵니다.
-디버거가 위와 같이 정상적으로 작동하는지 확인합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트-디버깅</title>
</head>

<body>

    <h1>회원가입</h1>
    이름: <span id="name"></span>

    <script>

        var firstName = "창훈";
        var lastName = "강";

        //첫번째 디버깅 구간
        //여기서 강제 디버깅 시작-웹 브라우저 코드 실행중단
        //직접 스크립트 코드 영역에 debugger;예약어를 통해 개발자도구를 통한 디버깅이 가능하지만 비추천되는 방식이며
        //되도록 개발자도구 Sources탭에서 디버거설정을 통한 두번째 방식 사용을 권장합니다.
        debugger;

        //콘솔에 다중값 로깅출력
        console.log("성명:", lastName, firstName);
        var fullName1 = firstName + " " + lastName;
        console.log("풀네임 출력", fullName1);

        //풀네임 span 태그에 출력
        var nameElement = document.getElementById("name");
        nameElement.innerText = fullName1;


        //두번쨰 디버깅 구간
        debugger;

        //에러 발생 구간 console.error 출력

        try {
            var fullName2 = firstName + " " + LastName;
        } catch (error) {
            console.error("에러발생: ", error);
        }

    </script>

</body>

</html>






B)개발자 도구 Sources탭에서 선택적으로 디버거를 거는 방법 :추천방식

-여러분 코딩 작업폴더의 기존 소스 debug.html 파일의 내용을 아래 코드와 같이 수정합니다.
-debugger;예약어 코드만 삭제하시고 디버거를 소스코드내가 아닌 웹브라우저>개발자도구>Sources탭에서 디버거를 직접 선택/해제 하는 방식을 통해 디버깅을 진행해봅니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트-디버깅</title>
</head>

<body>

    <h1>회원가입</h1>
    이름: <span id="name"></span>

    <script>

        var firstName = "창훈";
        var lastName = "강";

        //개발자도구 Sources탭에서 디버거설정을 통한 디버깅을 진행합니다.


        //콘솔에 다중값 로깅출력
        console.log("성명:", lastName, firstName);
        var fullName1 = firstName + " " + lastName;
        console.log("풀네임 출력", fullName1);

        //풀네임 span 태그에 출력
        var nameElement = document.getElementById("name");
        nameElement.innerText = fullName1;

        //에러 발생 구간 console.error 출력
        try {
            var fullName2 = firstName + " " + LastName;
        } catch (error) {
            console.error("에러발생: ", error);
        }

    </script>

</body>

</html>


- 상기 소스에 대한 웹페이지를 웹브라우저로 오픈합니다. 
-웹브라우저 개발자도구> 소스(Sources)탭에서 우측 페이지탭 내 해당 HTML문서나 자바스크립트 문서를 선택하고 오른쪽 소스영역 라인번호 영역에서 해당 라인번호를 선택클릭합니다.
-해당 라인숫자 헤더에 파랑색 화살표 표시(디버거)가 선택되고 웹페이지를 다시  실행 시 해당 라인에서 디버거가 걸리고 디버깅이 가능해집니다..
-F8 또는 F10키를 이용해 디버깅을 순차 진행할 수 있습니다.
-디버깅이 필요 없으면 해당 라인 헤더를 한번 더 클릭하여 화살표 표시를 제거합니다.
-디버깅 위치를 여러곳에 걸쳐 지정할 수 있으며 자유자재로 디버깅을 해제할 수 있어 편리합니다.
- debug.html 페이지를 브라우저로 오픈하고 개발자도구를 오픈하여 Sources 탭에서 아래와 같이 디버깅을 진행해보세요.