Blog Content

  1. Home

    티스토리 뷰

    HTML5 - 03.디버깅

    Posted by Godffs on 2014. 1. 25. 16:28 in jQuery | javascript | CSS /

    반응형
    HTML5 작업을 하다보면 소스 오류가 생기면 고치기에 많은 시간이 걸립니다.

    어디서 오류인지는 확인 하려면 전체 다 살펴보거나 자바스크립트로 메세지창을 띄워서 결과를 확인해야하니 번거롭습니다.

    Visual Studio에서 HTML5 자바스크립트 디버깅 하는 방법입니다.

    버튼을 클릭을 하면 자바스크립트로 메세지창을 띄우는 코드를 작성합니다.

     ex01.Hello.html
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript">
            function fnAltert(data) {
                if (data.value == "1")
                    alert('안녕하세요.');
                else
                    alert('반갑습니다.');
            }
        </script>
    </head>
    <body>
        <input type="text" id="txt" />
        <input type="button" value="메세지창 보기" onclick="fnAltert(txt);" />
    </body>
    </html>

    디버깅 할 코드 라인을 찾습니다. 버튼 클릭 할때 이벤트를 보기 위해서 17번 라인에 디버깅을 걸어줍니다.

     


    라인 숫자 옆에 보면 회색 줄이 보입니다. 이곳에 마우스 왼쪽을 클릭하시면 빨간 점으로 표시되는데요.
    이곳에서 디버깅을 걸겠다고 표시하는겁니다.

    이제 실행합니다. Debug로 되어 있는지 확인 하신 후에 '녹색 실행버튼(삼각형모양)'을 클릭합니다.

     

     

    결과를 확인합니다.
    화면에서 텍스트박스에 "1" 입력하고 버튼을 클릭을 하면~

    위와 같은 화면으로 보여집니다.

    상단에 있는 빨간색 박스로 표시한것은 디버깅 관련 옵션이고,
    왼쪽에 빨간색 점에 화살표 표시는 현재 여기서 부터 읽겠다라는 뜻으로 보시면 되구요.
    가운데 노랑색으로 영역 잡힌 부분은 현재 프로그램이 실행되고 이벤트 코드를 읽는데
    여기서 멈춰음을 표시하는걸로 보시면됩니다.

    F5을 누르면 디버깅을 끝냅니다.
    F10을 누르면 안에 코드를 읽습니다. 음...메서드가 있을때 F10을 누르면 메서드 이벤트를 찾아서 들어갑니다.
    F11을 누르면 한줄씩 아래로 내려갑니다.


    디버깅에 대해서 설명하기에는 너무 많아서 여기까지...질문하시면 답변해 드려야지요...

    참~쉽죠~?
    반응형
    저작자표시 비영리 변경금지

    'jQuery | javascript | CSS' 카테고리의 다른 글

    HTML5 - 05.ViewPort (뷰포트)  (2) 2014.01.26
    HTML5 - 04.디바이스 별로 화면보기  (0) 2014.01.26
    HTML5 - 02.소스와 디자인 같이 보기  (0) 2014.01.25
    HTML5 - 01.개발환경 구성하기, Hello  (0) 2014.01.25
    HTML5 - 00.환경설정  (0) 2014.01.25

    Comments

Copyright © 2016 by WaaNee. All Rights Reserved.

티스토리툴바