PHP와 Javascript를 할 때 알아 두면 편한 디버깅 방법에 질문을 받곤합니다.

디버깅 방법은 생각보다 단순 합니다.


물론 그 해결 과정이 어려울 때도 있습니다.



1. 신텍스 에러를 체크 해주는 툴을 사용하세요.

- 저 같은 경우는 이클립스를 사용합니다. 신텍스 에러는 색깔이 다르게 되어서 주소창에 해당 파일을 실행하기 전에 어떤 부분에서 에러가 났는지 알수 있습니다.


2. 각 브라우저의 디버깅 툴을 사용하세요.

- 익스플로러의 경우 F12를 누르면 개발자 도구 창이 뜨게 되고 이 콘솔창에서 에러의 내용을 알수 있습니다.

- 크롬도 F12 입니다.

- 파이어폭스를 개발용으로 주로 사용합니다. 

Firebug 플러그인을 설치하시면 자바스크립트 에러 내용을 자세하게 알수 있습니다.


3. 익스플로러의 경우 에러 표시를 체크하여 주세요.




모든 스크립트 오류에 관련된 알림 표시를 체크하여 주시면 됩니다.

이 것을 체크해주셔야 자바스크립트 에러가 alert window로 보입니다.


4. 테스트 서버는 없고, 운영되고 있는 서버에서 테스트 해야 한다면 ....

- 쇼핑몰 결제 테스트의 경우 이럴 경우가 있습니다. 결제 대행사의 결제 모듈은 실 서버에서만 실행이 되기 때문에 실 서버에서 테스트 해야 하는데요.


$allow_ips = array(
    "0.0.0.0"
);

if(in_array($_SERVER['REMOTE_ADDR'], $allow_ips)){
    ...................;
}


if문 안의 내용은 허용한 IP만 보여지거나 실행될 부분 입니다.

허용 할 IP가 두개 이상이라면


$allow_ips = array(
    "0.0.0.0", "1.1.1.1", "2.2.2.2"
);


단 아이피는 공유기 아이피 입니다.


4. 값 확인

*PHP

GET이나 POST 값이 정상적으로 넘어 왔는지 확인 할 때 

echo "value : ".$_GET[xxxxx]; 하고 값을 확인 하거나


print_r($_GET]; 하면 값을 확인 할 수 있습니다.


*Javascript

alert("value : " + 변수명); 혹은 


var aaa = "test";

console.log(aaa);


그 외 jquery 사용 한다면, 

$("#result").html(확인 할려는 변수);

<div id="result"></div>


하면 result div에 확인하고자 하는 값이 나옵니다.


5. 파일을 정상적으로 로드 되었는지 확인

firefox httpfox 플러그인을 다운 받아서 파일이 정상적으로 로드 되었는지 패킷 캡춰하시면 알수 있습니다.

익스플로러도 F12 눌러서 네트워크 탭을 선택하면 알수 있습니다.

GET으로 값 넘길시 쿼리스트링이 깨지는 경우가 있었습니다.



기존에도 같은 형태, 유형으로 작업되어 있는 스크립트였는데, 잘 되던 것이 이번 프로젝트에서는 문제가 생겼습니다.


<script>

........

window.location.href="파일명?w=d&no=10;
........
</script>


위와 같이 넘겼는데, &가 ®로 바뀌어서 브라우저가 페이지를 찾을 수 없다는 페이지를 보여줬습니다.


캐릭터셋 문제도 아니었고, 잘 되던 것인데 이번에 문제가 있는 것이었습니다.

무엇 때문인지 원인이 무엇인지는 모르겠지만, 임시 방편으로 &대신 &amp;를 사용하였더니 정상이 되었습니다.

'tech > PHP' 카테고리의 다른 글

php 코드 작성 10원 짜리 팁  (0) 2016.10.28
eclipse tab 간격 설정(들여쓰기)  (0) 2016.10.19
배열 NULL값을 제외하기  (0) 2013.04.23
그누보드 포인트 날짜별 누적 포인트합 보여주기  (0) 2012.12.13
text file load  (0) 2012.07.25







code craft:뛰어난 코드 작성을 위한 실천 지침


'코드를 깔끔하게 코딩할려면' 대해서 고민하다가 구입한 이 책.



내가 회사에서 하고 있는 주로 refactory나 약간의 기능 추가가 다 인셈이라 예외처리를 추가할 때면 기존 document가 쓰레기가 되어 쓰레기통으로 가야 하지만, 현실적으로 힘들다는 것을 느낀다.


아직 다 읽지 못해서 이 책에 대해서 자세하게 설명을 하지는 못하지만.


그 동안 읽은 곳 중 몇 가지를 이야기 하자면,

  • 한 사무실에서 여러 인원이 같은 프로젝트에 투입되었을 때 소스 관리의 효율성을 이야기
  • 괄호 ( { ) 형태의 방식 처리로 팀내에서 표준을 만들고, 그것을 팀원간 공유해야 된다는 이야기
  • 변수명은 너무 길어도 너무 짧아도 안되며, 변수명을 value 등과 같이 짓는 것은 이 변수명의 의미를 모호하게 지으므로써 다른 사람은 모를 수 있다는 이야기


아직 반도 못 읽어서 이 정만 이야기 할 수 있다.


조금씩 조금씩 읽어서 진도가 안나가지만, 좋은 책인 것 같다.








출처 : http://stackoverflow.com/questions/2901102/how-to-print-number-with-commas-as-thousands-separators-in-javascript



function numberWithCommas(n) {
   
var parts=n.toString().split(".");
   
return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

출처 URL 페이지 상단부터 쭉~ 내려 오다보면, 위 펑션이 나오는데, 길어진 펑션이 이렇게 짧게 되었다.

세상은 넓고, 능력자는 많다.





문제 : 포탈의 검색창이 있다고 했을 때 이 안에 들어 갈 키워드를 순차적으로 보이게 하며, 해당 검색창을 클릭 했을 때 순차적으로 보이는 것을 멈추게 함.


<script>
var photos = ['1.jpg', '2.jpg', '3.jpg'];
var photo_index = 0;

$(function() {
    var timer = null;
    var input = document.getElementById('inputcode');

    function tick() {
        photo_index = (photo_index + 1) % photos.length;
        $('#inputcode').val(photos[photo_index]);
        start();
    };

    function start() {
        timer = setTimeout(tick, 1000);
    };

    function stop() {
        clearTimeout(timer);
    };

    $('#inputcode').bind("click", stop);

    start();
});
</script>
</head>
<body>
<input type="text" id="inputcode" >



---------------


프로타입은 구글링에서 찾았고, 여기서 더 수정했습니다.







회사에 책이 있어서 읽게 된 책!
역시 O'reilly 책 답게, 구성이 잘 되어 있고, 기초부터 차근 차근 쌓게 해주는 책인 것 같습니다.




var plenary_name = $("input[name='plenary']:checked").val();
    if(plenary_name == "박 하선"){
        $("input[name='first_name']").val("하선");
        $("input[name='last_name']").val("박");
    }else if(plenary_name == "한 승연"){
        $("input[name='first_name']").val("승연");
        $("input[name='last_name']").val("한");
    }else if(plenary_name == "박 규리"){
        $("input[name='first_name']").val("규리");
        $("input[name='last_name']").val("박");
    }else if(plenary_name == "정 봉주"){
        $("input[name='first_name']").val("봉주");
        $("input[name='last_name']").val("정");
}

라디오 버튼 plenary이 체크되면 해당 라디오 버튼의 이름이 input box로 값이 넣어지는 jquery

+ Recent posts