asked on

where do i run javascript code and debug it like java code on intellij ideas

HI,
I have a piece of js code like :

function rowHeights2(rows) {
  return rows.map(function(row) {
    return row.reduce(function(max, cell) {
      return Math.max(max, cell.minHeight());
    }, 0);
  });
}

function colWidths2(rows) {
  return rows[0].map(function(_, i) {
    return rows.reduce(function(max, row) {
      return Math.max(max, row[i].minWidth());
    }, 0);
  });
}

function drawTable2(rows) {
  var heights = rowHeights2(rows);
  var widths = colWidths2(rows);

  function drawLine2(blocks, lineNo) {
    return blocks.map(function(block) {
      return block[lineNo];
    }).join(" ");
  }

  function drawRow2(row, rowNum) {
    var blocks = row.map(function(cell, colNum) {
      return cell.draw(widths[colNum], heights[rowNum]);
    });
    return blocks[0].map(function(_, lineNo) {
      return drawLine2(blocks, lineNo);
    }).join("\n");
  }

  return rows.map(drawRow2).join("\n");
}

function repeat2(string, times) {
  var result = "";
  for (var i = 0; i < times; i++)
    result += string;
  return result;
}

function TextCell2(text) {
  this.text = text.split("\n");
}
TextCell2.prototype.minWidth = function() {
  return this.text.reduce(function(width, line) {
    return Math.max(width, line.length);
  }, 0);
};
TextCell2.prototype.minHeight = function() {
  return this.text.length;
};
TextCell2.prototype.draw = function(width, height) {
  var result = [];
  for (var i = 0; i < height; i++) {
    var line = this.text[i] || "";
    result.push(line + repeat2(" ", width - line.length));
  }
  return result;
};

function UnderlinedCell2(inner) {
  this.inner = inner;
}
UnderlinedCell2.prototype.minWidth = function() {
  return this.inner.minWidth();
};
UnderlinedCell2.prototype.minHeight = function() {
  return this.inner.minHeight() + 1;
};
UnderlinedCell2.prototype.draw = function(width, height) {
  return this.inner.draw(width, height - 1)
    .concat([repeat2("-", width)]);
};

function RTextCell2(text) {
  TextCell2.call(this, text);
}
RTextCell2.prototype = Object.create(TextCell2.prototype);
RTextCell2.prototype.draw = function(width, height) {
  var result = [];
  for (var i = 0; i < height; i++) {
    var line = this.text[i] || "";
    result.push(repeat2(" ", width - line.length) + line);
  }
  return result;
};

function dataTable2(data) {
  var keys = Object.keys(data[0]);
  var headers = keys.map(function(name) {
    return new UnderlinedCell2(new TextCell2(name));
  });
  var body = data.map(function(row) {
    return keys.map(function(name) {
      var value = row[name];
      // This was changed:
      if (typeof value == "number")
        return new RTextCell2(String(value));
      else
        return new TextCell2(String(value));
    });
  });
  return [headers].concat(body);
}

Open in new window

I am executing this code currently in a browser window like console.log(drawTable2(dataTable2(MOUNTAINS)));

currently i modified this code and than run this console.log... which actually prints out a table...
but there was an error.
I want to debug to resolve the error how can i do it ?
Like in java we have intellij idea editor which can be used to debug a code by putting break points.
Can i debug this in browser or there better tools available for this ?

Thanks

ASKER CERTIFIED SOLUTION

Radek Baranowski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rohit Bajaj

ASKER

but this is not a script which gets loaded in a jsp page or web application...
its just a plain code which i want to run

SOLUTION

Radek Baranowski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Alexandre Simões

Anyway, I read your question again, and all the comments, and as far as I understood, the functions are on the page, it's just that you are calling them from the console, right?

So that's exactly the same as if they were being called from the page.
your console.log is calling the same function.

Use Chrome, do F12, go to Source tab.
Press Ctrl+Shif+F
Serach by: drawTable2

It will find your drawTable2 function.
Just put a breakpoint on the first line.

Go to the console and execute your console.log command again.
It will stop there.

Rohit Bajaj

ASKER

No they are not on the page... I typed the functions in console

Alexandre Simões

Ok, so the only way is to use the debugger trick.
Paste this in the console:

function callme(){ 
var a = 10;
debugger;
console.log(a);
return a;
}

Open in new window

Then call it:

callme()

Open in new window

It will break there! :)