14

This answer https://stackoverflow.com/a/10929430/749227 to this question Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool? is spot on for debugging dynamic scripts.

The issue I am facing is that I have a page that has a script on it, and after it loads an ajax request fires which returns with some HTML and a script that get put into the page. With the //# sourceURL=myDynamicDocumentFragment.html bit added, I can debug the dynamic script just fine.

But once it's loaded, then the other script that is part of the outer page that initially loaded goes off the rails. I can set breakpoints on blank lines and can't set them on legitimate lines. The debugger will stop on them but it won't be at the place in the code where I'd expect.

What it appears to be is that the dev tools window is showing the original script, and the debugger itself is running on something else - some updated version of code that includes both the outer page's script and the dynamic script that was added later. Or maybe it just hiccups with respect to line numbers it's displaying and what those map to in the code it's actually running.

I wish I had a good simple code snippet to demonstrate the issue, but I don't. Has anyone seen this, and does anyone know of a way to have Chrome 'refresh' the dev tools scripts/debugger without refreshing the page? (it has to be w/o refreshing the page since things work fine when the page loads - it's only after the dynamic script is dropped in that the wheels come off)

Note: I've tagged with Chrome since that's what I'm using (v 38). I don't know how other browsers fare.

Community
  • 1
  • 1
jinglesthula
  • 4,446
  • 4
  • 45
  • 79
  • 1
    Do you try to set breakpoint not from devtools source panel but inserting `debugger;` statement right into your code? – Boris Zagoruiko Dec 05 '14 at 09:19
  • @GlenSwift hm - that may work. It's a terribly inconvenient workflow though. I'd love to see what the underlying cause of it going off the rails is - kind of treat the cause rather than band-aid the symptom or solve the problem rather than work around it :S That may indeed be better than just not being able to do anything, though - thanks for the suggestion. – jinglesthula Dec 05 '14 at 21:23
  • Use `console.log` in your script. – Alex Dec 08 '14 at 14:00
  • Yes, I use `console.log` frequently. What I would like to know is how to get the Chrome debugger to not lose its marbles :) – jinglesthula Dec 08 '14 at 15:43
  • I know that problem and it looks like this is an issue with the Chrome Debugger. I used to work with Firefox and Firebug a while ago but I can't recall if that worked there. The simplest solution is to move your scripts to separate files if that is possible for you. – Daniele Torino Dec 09 '14 at 10:00
  • @DanieleTorino ah - moving the embedded scripts to a separate file sounds like it might just work (and the js should probably be there in the first place). I'll give that a go and see how it works. If you add that as an answer, I'll accept it. – jinglesthula Dec 09 '14 at 19:40
  • Thank you, but no. It's not really a solution to the problem, just a workaround - if there is a way to debug this properly I'd like to know as well. – Daniele Torino Dec 10 '14 at 09:27
  • Good point - it would be better to have the root cause of the issue sorted out, especially since there are probably cases where a developer may not have the option of an external script. – jinglesthula Dec 10 '14 at 15:58

2 Answers2

0

You can find scripts injected into head or evaluated, here is a break point added on youtube evaluated (another js file).

You can find this in chrome as well, adding console.log (click on message shown), and voila you have source code you can add break points.

Here mozila print debugging/breakpoint over evaluated script on utube page:

enter image description here

Update

Sorry, I understand chrome was out of the scope, my engrish :)

How I did debugging on chrome over injected scripts, but there are cases when you cannot attach to execution if script is active (page load plus few milliseconds), you need to search for workarounds. Added this at the begin of the script injected: 

//@ sourceURL=jseinjectedsource.js
console.log("evaluated");

and voila console:

enter image description here

Better check this way better than my explanation chrome developer

SilentTremor
  • 4,747
  • 2
  • 21
  • 34
  • I have been busy and haven't given the project a go in Firefox yet to see how it does. Note that the question is specifically about Chrome's debugger in the described situation. – jinglesthula Dec 09 '14 at 19:42
0

Check to see if your script is using a source map (if you're using TypeScript this is typically on by default for VS projects). I've found Chrome to be really bad with source maps, often refusing to update them, or stop displaying them after the source map line is removed from the code.

Griffork
  • 683
  • 1
  • 5
  • 21
  • Yes - a source map is exactly what I'm using. I realized I'd left part of the example code out and have edited the question to add it in. What I'm really after is how to get them to work :) Knowing that other people have had the same issue does make me think it might be just a Chrome bug. If so, hopefully they fix it soon. – jinglesthula Apr 17 '15 at 14:34
  • I didn't find a solution to this when I ran into it several years ago, and instead decided to turn off source maps, so I don't have a working solution, but if you're happy to experiment I can throw ideas at you. – Griffork Apr 19 '15 at 00:17
  • The first is running chrome with the `--nolazy` command line flag (you must choose all open chrome windows for this to take effect). It stops v8 from compiling your code, and the issue is possibly that the line numbers that compiled code spits out doesn't get transformed by the source map. – Griffork Apr 19 '15 at 00:20
  • Instructions here (look for v8 flags): http://www.chromium.org/developers/how-tos/run-chromium-with-flags – Griffork Apr 19 '15 at 00:25
  • And, a follow-up here's some related chrome bugs: https://code.google.com/p/chromium/issues/detail?id=451015 https://code.google.com/p/v8/issues/detail?id=2838 – Griffork Apr 19 '15 at 00:47
  • @jinglesthula did you get the opportunity to give --nolazy a go? – Griffork Apr 30 '15 at 02:02