Depuração de código

Quartz · 11 de março de 2015

Como eu faria para depurar um código desse tipo?

A parte responsável pelo html:

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <meta name="apple-mobile-web-app-capable" content="yes">                <title>Led via Web</title>    <style>        button{            border: 0;            padding: 10px 20px;            font-weight: bolder;            color: #00ffff;            background-color : #ff0000 ;        }    </style>    <script>          var x=0;         function mudaCor(el){           if ( x == 0 ){                 el.style.backgroundColor = '#00ff00';               x = 1;           setLED(1);                          }       else{           el.style.backgroundColor = "#ff0000";           x=0;             setLED(0);                   }            }    </script>        <!-- Latest compiled and minified CSS         <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css"> -->    </head>    <body>        <div id="wrap">            <div class="row">                <div class="col-md-6 col-md-offset-3 text-center">                    <h1>Led via Web</h1>                </div>            </div>            <div class="row">                <div class="col-md-6 col-md-offset-3 well text-center">                    <div class="btn-group" data-toggle="buttons">                      <label class="btn btn-primary" onclick="setLED(1);">                        <input type="radio" name="options" id="on">ON                      </label>                      <label class="btn btn-primary" onclick="setLED(0);">                        <input type="radio" name="options" id="off">OFF                      </label>                    </div>                </div>            </div>            <div class="row">                <div class="col-md-6 col-md-offset-3">                    <hr>                </div>            </div>        </div>        <!-- InicioBarra -->        <input type="range" min="0" max="255" value="0" step="1" onchange="showValue(this.value)" />        <span id="range">0</span>        <script type="text/javascript">        function showValue(newValue){	   document.getElementById("range").innerHTML=newValue;        if (newValue == 255){            //LED.analogWrite(7,255);               setLED(1);                    }        else {           setLED(0);          }        }       <!-- FimBarra -->                          </script>        <!-- FimBarra -->        <!-- jQuery -->        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>        <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>        <!-- Latest compiled and minified JavaScript -->        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>        <script>            var agentUrl = "http://192.168.1.109:8081/digitalwrite/7/"            function setLED(state) {                $.ajax({                    url: agentUrl + state,                    method: "GET",                    success: function(response) {                        console.log("Success");                    },                    error: function (request, status, error) {                        console.log("Problema na conexao: " + error);                    }                });            };        </script>    <button onclick="mudaCor(this)">LED</button>        </body></html>

Código do node.js (site.js)

/****** EL SERVIDOR *******/var http = require("http"),    PORT = 8081,    HOST = "192.168.1.109";    http.createServer(requestListener).listen(PORT,HOST,function(){    console.log("Server en linea -> http://localhost" + ":" + PORT);});function requestListener(request, response){    /*        Obtenemos un arreglo con la informacion contenida en la peticion.        	Si en al final de la peticion escribimos /led/13/on        	obtendremos el arreglo ["led", "13", "on"]    */    console.log(request.url.slice(1));    var info = request.url.slice(1).split("/");        if( info[0] === "digitalwrite" && info[1] > 0 && info[1] <= 13 && (info[2]=="1" || info[2]=="0")){        var led = parseInt(info[1]);        var state = info[2] == "1" ? true : false;        response.end("led " + led + " " + (state ? "encendido" : "apagado"));        // A funcao que troca o estado do led        toggleLed(led,state);    }else{        response.end("Resposta invalida");    }}/****** ARDUINO CON JOHNNY-FIVE *******/var j5 = require("johnny-five"),    board = new j5.Board(),    boardReady = false;board.on("ready",function(){    boardReady = true;});// esta sera la funcion llamada por el server cuando las peticion sea correctafunction toggleLed(led,on){    if(boardReady){        //console.log( "cambiando estado de Led ", led, on );                var led = new j5.Led(led);        if(on){        	led.on();                console.log( "Led Ligado " );        }else{        	led.off();                console.log( "Led Apagado ");         }    }}

Precisa do Johnny-Five e node.js para rodar o código. Basicamente o que o código faz é acender um led via web (usando o Raspberry pi e o Arduino mega).

Minha dúvida é como eu faria para depurar o código caso ele apresente algum erro.

Pimptech · 11 de março de 2015

Tenho algumas ideias pra você.

Debugar javascript você pode usar o próprio chrome:

http://www.devmedia.com.br/depurando-javascript-com-google-chrome/28367

Para debugar o node.js você tem algumas maneiras:

Uma, você pode fazer um "mini-modulo" de log;
Navegando achei esse módulo de debug e parece ser muito útil:
1. https://github.com/node-inspector/node-inspector

Qualquer dúvida, pode retornar.

Abraço!