Javascript - Stop function from executing with function

Question

I want to insert my debugger function inside another JS function and halt the execution.

I know return false/true does the job, but I want my debugger function to do that automatically.

Example:

<script type="javascript">
    function validateFirstName () {
        //validating first name field
        var fn = $('#firstname').val();
        if(fn == "") {
            $("#errorMsg").html("Please insert first name");
            $("#firstname").focus();
            return false;
        }

        debugger(); //I want to stop everything here

        // if validation passes, redirect browser:
        window.location = 'nextpage.html';
    }

    function debugger () {
        console.log("Some custom message here");
        return false;
    }
</script>

You'll notice I put my debugger function inside the validateFirstName() function.

I assumed that return false in my debugger() function will stop the validateFirstName() from executing. But it doesn't.

Without adding return false inside the validateFirstName() function, how can I use my debugger() function to stop all execution?

Answer 1

replace

debugger(); //I want to stop everything here

with

return debugger(); //I want to stop everything here

the above example will always stop on true or false.

This will continue to the window.location if it's true and stop if it's false.

if(!debugger())
  return;

in your case it seems to be a function inside of a function so you might as well use

if(!debugger())
  return false;

Seems what you really want to do is set a breakpoint on the executing code.
In Chrome Browser press Ctrl+Shift+I
Then Go to Sources Tab
Click the Arrow pointing right (looks like a play button) on top of the counting line numbers to see list of websites
Find your website click on the folder
Find whatever script that you want
Now click anywhere in the code to close the side bar
Now finally click on any number on the side thats counting down the lines
That will set a breakpoint which means it will stop on that code if you make the code go there by doing something on your website, or forcing the code to run using the Console tab or simply in your address bar typing javascript: function_to_call();

Answer 2

You could throw from debugger () like this.

function debugger () {
    console.log('Some custom message here');
    throw 'Debugging Code';
}

Although this will do what you want it to, I don't recommend it. Basically what's happening is you are throwing an error which isn't being caught in your code (the browser will catch it, but that is probably not as clean).

Answer 3

You could throw an error:

function validateFirstName () {
        //validating first name field
    var fn = $('#firstname').val();
    if(fn==""){
      $("#errorMsg").html("Please insert first name");
          $("#firstname").focus();
      return false;
        }

debugger(); //I want to stop everything here

// if validation passes, redirect browser:
window.location='nextpage.html';

}


function debugger () {
    throw new Error("Some custom message here");
}

try{
    validateFirstName();
}catch(e){
   console.log(e);
}

Answer 4

If you are using a modern browser like Chrome, why not just use debugger instead?

that will trigger the debugger in your developer tools.

like this:

debugger; //I want to stop everything here

notice the missing ()