Javascript Debugging in Chrome Console

Question

I have below piece of code.

<div id="start_3333"  onclick="doCalc(3333, this)"></div>

function doCalc(this)
{
  var id = $(this).attr(id);
Console.log(id);
}

This div gets inserted for every row in data tables. I would like to test this function doCalc in console window of Chrome by typing doCalc(3333) but getting undefined error. how do I pass "this" object in Chrome's console window so that I can debug and check what value is getting transferred to "id" variable within the function.

Answer 1

I would suggest a different implementation:

<div id="start_3333"></div>

$("#start_3333").click(function(event) {
    console.log($(event.target).attr("id"));
});

Answer 2

1. Get a reference to your div: var $myRef = $('start_3333');
2. Run your function: doCalc($myRef);

and of course as I commented above, make the 'c' in 'console' lowercase because JavaScript is case sensitive.

Answer 3

To answer the general question.

Go into the Elements tab of the debugger, and find the element you want to use. If you click on it, it will display == $0 next to the element. This means that you can use the variable $0 in the console to refer to that element. Also, the previous item that you clicked on becomes $1 , the one before that is $2 , and so on. So you can then type

doCalc(3333, $0)

in the console to run your function with that element as the argument.

This won't work for your function, since it's not declared to take two arguments. Your function should be something like:

function doCalc(num, element) {
    var id = element.id;
    console.log(id);
}