Javescript

1. Use "debugger".

Write "debugger" during the Javascript code:

<a href="javascript:debug_test();">Click me</a>
<script>
function debug_test(){
var num = 5;
for(var i = 0; i < 10; i++){
    num++;
    debugger
}
}
</script>

And the execution will stop at the line where the "debugger" is written.

2. console.log, console.warn, console.error, console.info

Write like this:

<script>
var salut = "salut";
for(var i = 0; i < 10; i++){
     console.log(salut); //Qu'est qu'il y a dans la valeur? Vérifier ça avec le console du navigateur.
     console.warn(salut);
     console.error(salut);
     console.info(salut);
}
</script>

Press F12 and you can see these messages are shown on the console.

3. console.table

Write like this:

<script>
var salut = "salut";
var bonjour = "bon jour";
var aurevoir = "au revoir";
console.table([[salut,bonjour,aurevoir], [1,2,3]]);
</script>

And on the console of the browser:

You can see details of the object too in the same way:

<script>
var car = {type:"Fiat", model:"500", color:"white"};
console.table(car);
</script>

This code will display the following:

(But this code might not work on the Chrome's console. Use Firefox in that case.)

4. "console.trace" or "try and catch"

console.trace should not be remained in the code after development because it isn't a standard function. But, if you want to see the trace, you can use this code in the following way:

<script>
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
</script>

This code will show on the console:

bar
foo
<anonymous>

But you can use "try and catch" also:

<script>
try {
    hohoho("Bon jour.");
}
catch(err) {
    console.log(err);
}
</script>

This will show the stack trace.

"hohoho is not defined" Of course not defined.