Debug javascript inside jsp page with Chrome?

Question

Is there a way to debug javascript which is inside a jsp page, like this with chrome:

<script>
var error = "${error}";

if(error != ""){
    alert(error);
}
</script>

In the developer Tools Window I can only find .js files.

Solution 1

Put magic word debugger, open developer tools, and reload the page to debug it. It works like breakpoint:

<script>
var error = "${error}";

debugger

if(error != ""){
    alert(error);
}
</script>

Solution 2

You aren't going to see a JSP file in your browser, as JSPs are server-side and are interpreted there and ultimately turned into HTML that is then sent to your browser. In the Chrome Dev Tools, your Sources tab should list the page itself (your page's markup in its entirety) in the sources list on the left (it may be named whatever you named your page, or it may be named something generic like (program)). You can find your JavaScript code in there (since the JS that you put in your JSP should have ultimately been rendered to the page) and you should be able to place breakpoints in it and do anything else you could with a plain .js file.

Comments

[PogoMips]

where can I see the values of the variable then? The code of the jsp page does not show in the Developer Tools