30Sep

558936827d369

Our next lesson is devoted to Node.JS debugging. First of all, we will explore the simplest built-in debugger that is called by the node debug command. It looks just like that. Imagine, we’ve got the script:

var http = require('http');
var url = require('url');

var server = http.createServer();

server.on('request', function(req, res) {
    var urlParsed = url.parse(req.url, true);

    if (req.method == 'GET' && urlParsed.pathname == '/echo' && urlParsed.query.message) {
        res.end(urlParsed.query.message );
        return;
    }

    res.statusCode = 404;
    res.end('Not Found');
});

server.listen(1337);
console.log("Server is running");

For example, we would like to stop server.js that is constantly malfunctioning, at a certain point to see its variables and what’s going on. That’s why we put debugger right here:

var http = require('http');
var url = require('url');

var server = http.createServer();

server.on('request', function(req, res) {
    var urlParsed = url.parse(req.url, true);
    debugger;

    if (req.method == 'GET' && urlParsed.pathname == '/echo' && urlParsed.query.message) {
        res.end(urlParsed.query.message );
        return;
    }

    res.statusCode = 404;
    res.end('Not Found');
});

server.listen(1337);
console.log("Server is running");

And launch your script in a debugging mode: node debug server.js. You will need no modules for that purpose. The script initially is paused. As you can see, nothing happens. The bugging mode includes some commands, and right now we need one of them – cont. It will make the script continue its work. As we see, it did continue and even showed log in the end. Good job!

Let us move now to our browser and go to url 127.0.0.1:1337 with this port. Once we’ve done this, the request event happens, a handler gets launched, and execution stops right at the debugger command. Now I can move to the repl console – a command execution mode – and, for example, clear up what urlParsed is or just launch something like:

res.end(“Uahahaha!”) 

Now look what’s happened with our browser. Great! It’s working.

We should say, the built-in debugger that we’ve just explored is the simplest of the existing things. It is rarely used only in those cases, when more improved debugging ways do not work for some reason or when you don’t have time or will to launch them.

Node.JS-Debugging-Tools

It is far more convenient to debug using the developer tool in Chrome. You will need the utility named Node- inspector:

npm install -g node-inspector

Install it globally. That’s all for our preparations. And now just a few words on what will happen next. Node.js has a special launching parameter – debug, and you can write a script right after it (–debug server.js). Whenever Node.js is launched with this parameter, it does not only launch server.js, it also starts to listen what’s going on in this port. Another program can connect to the port and give commands to Node.js concerning debugging – for example, to pause or continue the work, get a current value of some variable, etc. These commands are given in full compliance with a special protocol described in the supporting materials for v8. For example, the command

{“seq”:117,”type”:”request”,”command”:”continue”}  

means continue. While this one:

“seq”:117,”type”:”request”,”command”:”evaluate”,”arguments”:{“expression”:”1+2″}}

tells Node.js to calculate  1+2. Of course, we won’t write these commands manually, though we could do it. Instead, we use the Node-inspector utility that will send these commands by showing nice web interface to us.

So, I leave Node.js launched and open a new console window, where I will launch the node-inspector. It is a web server you can connect to under the url, which is given by the server, and work with a debugger. It means, I will send commands to the Node-inspector web server, and it will translate them for Node, which listens to the debugging protocol using the v8 debugging language.

So, let’s go to Node-inspector. The design reminds us of the built-in Chrome developing tools, but they are not those ones. Indeed, they look similar to each other because html styles were borrowed from the webkit engine. So, the interface looks quite alike. In fact, it’s just a web page the Node-inspector gives us.

Using a separate window go to:

http://127.0.0.1:1337/echo?message=TEST

The following has happened. Once I’d followed the url, a request handler function was launched. If Node.js had been launched without debugging flags, the debugger command would have been ignored, but it has worked in our case. v8 temporarily stopped JavaScript execution and sent this information to a Node-inspector, which had been connected to Node via the port: 5858. Node-inspector received it and, using a web-soсkеt protocol, which we will explore further, sent it to the browser – to browser JavaScript. Here the web interface reacted this action and gave me a pause. The same interface requested data on the stop, which I can use. At the same time, Node-inspector is responsible for translating my actions into commands for the v8 debugger. I can even use the console. If I want to respond the request, I can do the same thing that I’ve done to a built-in debugger – to call a method in a current window.

Everything is quite handy. You are recommended to use it. The only thing you should take into consideration is that we are working with a connection chain. Entering this url to the Node-inspector we connect from client browser JavaScript to server Node-inspector, the latter connects to Node.js and sometimes one of these connections gets broken. Respectively, debugging doesn’t work. In this case you can go to the debugging page again and if it hasn’t been effective, restart your Node-inspector. If this measure does not help you, too, go ahead and re-launch the whole chain: Node, Node-inspector and open the browser page once again. It will definitely work in the end.

tumblr_ng6oke7J1k1sxr61eo1_1280

The materials were borrowed from the following screencast.

We are looking forward to meeting you on our website soshace.com

D3.js and Angular/Vue.js Integration

Nowadays there’re lots of technologies in a Front-end and most of them have easily understandable tutorials. So starting with them is not a problem. But there’s always a problem when you try to use some of them together. In this article, we’re going to talk about a usage of Angular or Vue.js together with D3.js, and find out why we might have problems with the integration.

Leave a Reply