CODEWITHSUNDEEP
javascriptjspgoogle-chrome-devtools
Leon Csergity
Leon Csergity

Reputation: 311

How to debug Javascript that is in the page using Chrome Dev Tool

I'm working on a project at work fixing tickets and debugging and such. And I came to a point where I need to see what the Javascript is returning and what values it gets.

The problem is as follows:

This Javascript is in the jsp file which is being shown, so its not in a separate file. Because of this Chromes Dev Tool does not show it. And it does not let me put a breakpoint in the jsp file. In the page it self. So that I may check the values and to see if everything is okey in the local scope. The code is not mine, so id like to make the least amount of changes to it as possible.

Now the question is, is there anyway other than refactoring and putting the Javascript in another file, to see whats happening while its being run. Or maybe im just missing some kind of feature that Chromes Dev tool has. Im not that experienced with all of its features to be totally honest.

Thank you in advance! And I'm sorry if something is not clear. I will edit it to make things clearer. If that is the case.

Upvotes: 0

Views: 3676

Answers (2)

Gideon Pyzer
Gideon Pyzer

Reputation: 24088

It is better to have your JavaScript in a separate file to your JSP, and just include the path in a <script> tag, so that you can take advantage of the caching capabilities in the browser.

However, you should be able to debug your JavaScript as is. If you place a debugger; statement into the JavaScript part of your JSP, when the browser evaluates the code, the debugger will detect the statement and pause, allowing you access to your client side scope.

Upvotes: 0

Edric
Edric

Reputation: 26851

What you're trying to do is add a breakpoint. Here is the reference: https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints?hl=en

What you have to do is click on the gutter at the left side of the code.

Upvotes: 1

Related Questions