How to add breakpoints in your inline javascript in chrome

Question

I want to debug my javascript code and able to successfully place breakpoints at required places under sources tab.

However, I have run into an issue where I want to debug my inline javascript code. Do we have any chrome debugging tool feature using which I can debug my inline javascript code.

I am fine with using Firebug too for debugging purpose.

PS: By inline javascript code, I mean JS code inside body tag and in the same file.

Answer 1

Another way can be using the dynamic script method. Chrome provides simple parser command which can tag dynamically loaded JS.

<script type="text/javascript">
[...]
//# sourceURL=dynamicScript.js 
</script>

This line tells the chrome debugger that this whole script inside the script tag should be interpreted as a dynamicScript.js file. You can find the file on the debugger list and easily set up breakpoints or check the code.

Note : @ is replaced by # to avoid errors on unsupported browsers

Breakpoints in Dynamic JavaScript

Answer 2

I have found the solution. We can put breakpoints on inline javascript too.

Solution:

• Go to source tab in chrome dev tool and you can see all the sources there.
• Your HTML code will be present with similar directory structure as it is followed in your URL.
• And then you can open your HTML and place breakpoint in your inline javascript code

Answer 3

@blunderboy If you have following type of JS includes inside your BODY tag it will never show up in your directory structure, so in that case your solution wont work.

<div>
<script src="myJSfile.js">
</script>
</div>

this happens in jquery mobile where everything outside a page div is not loaded, so you have to include JS inside the page div.

I would have marked answer by @fazzyx as correct answer as that is how at least chrome would show even those included files.