[php] javascript ajax 디버깅 요령

자바스크립트 Ajax 로 받은 결과에 문제가 발생한 경우 디버깅하려고 하면 애로사항이 생겨 어려움을 겪을 수 있다.

이를 해결할 방법으로 시도해 본 사항을 적어둔다.

POST 변수로 넘기는 변수가 30개 이상된다고 하고, 파일 B에서 변수를 받아서 체크하고 함수를 이용하여 결과를 도출하는 경우에 어디에서 에러가 발생했는지 찾기가 어려워서 아래 코드를 활용하여 해결했다.

 

$('#panel_content').load(link, function() {
 
    $('#checkdone-submit').on('click',function(e){
        e.preventDefault(); // a 링크, submit 실행 방지
        var params = $('#baseChkRegister').serialize();
        $.post('baseChkRst.php',params,function(msg){
            //alert(msg);
            console.log(msg);
            var uri = $('#urlPath').attr('url-path');
            if(msg == 1){
                alert('등록되었습니다.');
            } else if(msg == 2){
                alert('수정했습니다.');
            } else {
                alert('정보 변경에 실패했습니다.');
            }
        });
    });
 
});
 

 

위와 같이 ajax 결과로 문제 해결이 되면 Good 이지만 그렇지 못한 경우에는 baseChRst.php 파일에서 넘겨받은 POST변수를 직접 코드의 INPUT 을 기록하고 코드를 한줄 한줄 검증하는 것으로 해결해야 할 수도 있다.

 

baseChkRst.php 파일 예시

파일 A에서 파일 B(baseChrRst.php)로 값을 전송하여 var_dump($_POST) 로 출력하면 console.log 에서 확인할 수 있다.

확인한 결과를 $test 에 복사하여 붙여넣기 한 이후에 실제 파일 A에서 값을 넘겼다고 가정하고 파일 B에서 에러가 발생한 코드를 echo 문으로 검증하는 과정을 거치면 문제가 된 코드를 찾아낼 수 있다.

$_POST 로 넘기는 변수의 개수가 30개 이상인 경우라서 에러를 찾기 힘들어서 찾아서 해결한 방법이다.

<?php
ini_set("display_startup_errors", 1);
ini_set("display_errors", 1);
error_reporting(E_ALL);
 
// javascript console.log 로 찍어서 확인한 메시지가 아래와 같다.
// 이 메시지를 배열로 저장해서 값이 넘어온 것을 가지고 디버깅을 할 목적이다.
$test = 'array(4) {
  ["uid"]=>
  string(1) "0"
  ["userID"]=>
  string(7) "hgd1806"
  ["userNM"]=>
  string(9) "홍길동"
  ["memo"]=>
  string(13) "이상없슴."
}';
 
var_export(unvar_dump($test)); // 화면 출력으로 결과 확인시
 
$_POST = unvar_dump($test); // 실제 변수로 넘어온 데이터라고 가정하고 코드 검증
extract($_POST); // 변수명만 추출하여 데이터 검증처리시 사용
 
// 실제 하단에 사용할 코드는 생략
 
// var_dump($_POST) 로 결과를 받아서 console.log 메시지를 다시 배열로 만들어 주기 위한 함수
function unvar_dump($str) {
    if (strpos($str, "\n") === false) {
        //Add new lines:
        $regex = array(
            '#(\[.*?\]=>)#',
            '#(string\(|int\(|float\(|array\(|NULL|object\(|})#',
        );
        $str = preg_replace($regex, "\n\1", $str);
        $str = trim($str);
    }
    $regex = array(
        '#^\040*NULL\040*$#m',
        '#^\s*array\((.*?)\)\s*{\s*$#m',
        '#^\s*string\((.*?)\)\s*(.*?)$#m',
        '#^\s*int\((.*?)\)\s*$#m',
        '#^\s*bool\(true\)\s*$#m',
        '#^\s*bool\(false\)\s*$#m',
        '#^\s*float\((.*?)\)\s*$#m',
        '#^\s*\[(\d+)\]\s*=>\s*$#m',
        '#\s*?\r?\n\s*#m',
    );
    $replace = array(
        'N',
        'a:\1:{',
        's:\1:\2',
        'i:\1',
        'b:1',
        'b:0',
        'd:\1',
        'i:\1',
        ';'
    );
    $serialized = preg_replace($regex, $replace, $str);
    $func = function($match) {
        return 's:'.strlen($match[1]).':"'.$match[1].'"';
    };
    $serialized = preg_replace_callback(
        '#\s*\["(.*?)"\]\s*=>#', 
        $func,
        $serialized
    );
    $func = function($match) {
        return 'O:'.strlen($match[1]).':"'.$match[1].'":'.$match[2].':{';
    };
    $serialized = preg_replace_callback(
        '#object\((.*?)\).*?\((\d+)\)\s*{\s*;#', 
        $func, 
        $serialized
    );
    $serialized = preg_replace(
        array('#};#', '#{;#'), 
        array('}', '{'), 
        $serialized
    );
 
    return unserialize($serialized);
}
?>
 

 

unvar_dump 함수 코드 출처 : https://stackoverflow.com/questions/3531857/convert-var-dump-of-array-back-to-array-variable

Convert var_dump of array back to array variable