18

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.

Sachin Jain
  • 21,353
  • 33
  • 103
  • 168
  • 1
    Are you using the `debugger;` statement? – Dan Pichelman May 16 '13 at 17:02
  • 1
    I don't want to change my code for debugging purpose because at later point of time I need to remove these debugger lines too. So I am thinking of a solution to ask the browser to stop at breakpoints just like it stops in source tab. – Sachin Jain May 17 '13 at 04:08
  • possible duplicate of [How to set breakpoint in inline Javascript in Google Chrome browser for linux?](http://stackoverflow.com/questions/5156388/how-to-set-breakpoint-in-inline-javascript-in-google-chrome-browser-for-linux) – Brad Koch May 24 '15 at 19:00

3 Answers3

39

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

trent
  • 169
  • 7
CalleKhan
  • 1,608
  • 1
  • 14
  • 16
  • 1
    Note that [link-only answers](http://meta.stackoverflow.com/tags/link-only-answers/info) are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Jan 09 '14 at 14:27
  • @fazzyx Thanks for the link. I also agree to kleopatra about answers being end point of search. So either you should update your answer with relevant content or just put link in comment. – Sachin Jain Jan 09 '14 at 14:46
  • does `type` is essential to mention in ` – xkeshav Jan 08 '15 at 06:09
  • I guess not if u use html5 – CalleKhan Jan 09 '15 at 13:16
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
Sachin Jain
  • 21,353
  • 33
  • 103
  • 168
  • 1
    It is possible to put break points and works but when the script is inside the template tag the chromium simply ignores them and unfortunately will not pause the script at the break points. – Eddie Feb 05 '15 at 07:55
1

@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.

TechMaze
  • 477
  • 2
  • 9