If 'if' condition is false, statements do not execute in chrome, but execute in Firefox

Question

This is the plnkr of my scenario. When I debug this code in chrome, statement in second 'if' is not executed. But when I debug it in Firefox, the statement in second 'if' is executed.

angular.module('optionsExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    debugger;
    if(true){
        $scope.name = 'Foo';
    }
      if(false){
        $scope.name = 'lol';
    }

  }]);

Firefox version: 35.0.1 Chrome version: 41.0.2272.101 m

Why does it happen?

Update:

Also tested in Firefox 36.0.4, Same problem.

Answer 1

This maybe a bug or it may just be how they designed it. But this seems to do with how the debugger deals with if statement conditions it can readily evaluate, and the code styling used (K&R, Allman, 1TBS, etc)

Lines of code that can have breakpoints set to them are shaded green, and ones that cannot are shaded gray by the debugger.

Simply put the debugger does not highlight if statement lines (and maybe even other control statement lines) that it can readily tell have a true/false condition. When setting a breakpoint the breakpoint will be put on the next breakable line of code instead.

In the case of blocks that use 1TBS/OTBS or K&R style formatting the debugger will highlight the first breakable line within the if block instead of the actual if statement line. This gives the false impression that the code inside false condition if statements are going to be executed next.

In the case of blocks that use Allman style formatting the debugger will not highlight any part of the if statement or code block when stepping through. And if you try to put a code break on the if statement it will skip the entire block and put the breakpoint on the next breakable line.

When the if statements do not use conditions that the debugger can readily read as true/false the debugger acts as expected.

Demo to test

debugger;
var one = true;
var two = false;

//Allman Style
if(one)
{
  console.log("Truth");   
}
if(two)
{
  console.log("false");   
}

if(true)
{
  console.log("Truth");   
}
if(false)
{
  console.log("false");   
}

//1TBS/OTBS Style
if(one){
   console.log("Truth");   
}
if(two){
   console.log("false");   
}
if(true){
   console.log("Truth");   
}
if(false){
   console.log("false");   
}