I'm debugging some 3rd-party minified Javascript that somewhere is triggering a browser page refresh. However, I can't figure out what part of the code is causing the refresh.
Is there a way to put a breakpoint in Chrome that will be hit just before a page refresh so I can inspect the call stack to see what caused it?
Try this:
Open your Chrome Dev Tools
Navigate to the "Sources" tab
On the right panel, expand "Event Listener Breakpoints"
Expand the "Load" tree
Check the beforeunload and unload options
See if that helps; screenshot below.
Edit: Alternately, if that doesn't work, you can use Chrome to search all loaded scripts for the code that might be responsible. There's apparently a lot of ways to refresh the page with JavaScript but they mostly have a few common strings like "navigator", "location", "reload", "window".
Finally, if there's a link to the same page you are on, it's possible some JS is triggering a click on it-- unlikely, but worth exploring if nothing else has worked thus far...
(Please excuse the formatting as I'm on mobile...)
NOTE: It seems occasionally, for reasons I don't yet fully understand, this solution fails to actually cause the debugger to pause; in this situation, I found that thorn̈'s answer to this question did the trick for me.
In Firefox (not Chrome, it's important; UPD 2020: it now works in Chrome as well) Developer Tools, go to the console, enter addEventListener('beforeunload',()=>{debugger}), and execute your code. After the debugger stops at the debugger statement, look at the call stack. You'll see what triggered the event. Chrome didn't have it there.
At least, this worked for me.
In the devtool, network pane, toggle the "Preserve log", carefully check the initiator column.
You don't specify what's the 3rd party library does.
If it is a ui component like an ad or something similar, just place it inside an iframe with the sandbox attribute configured as you need.https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe (Scroll down to the sandbox attribute section)
If it is something triggered by an event, just use (in chrome dev tools only) the getEveneListener() function and follow the listener trail... (hard, but possible)
Example:
The listener property will lead you to the actual functions that will be invoked. You can than search them in the obfuscated code and add debugger to understand it's purpose.
There are many other scenarios - if you can specify more.
Related
I was profiling my app for performance, when I started to notice something strange. A 'mousemove' event was firing and calling code I hadn't added myself. Heck, I don't have a mousemove listener on my page. I thought it might be an extension, maybe AdBlock, so I disabled all of my extensions. It didn't go away.
Also, upon opening a <select> list, I noticed it calling some class 'ListPicker'... Seriously, no clue where this is coming from. Some screenshots:
Also notice the "Compile Script"... I'm not eval-ing any script on my page by default. What gives? Looking for the source, DevTools simply says this:
Can I somehow still make DevTools redirect me to the exact lines of code it was executing? It is frustrating to see strange, alien code executed on one's page and not even being able to look at the source code.
More on the mousemove events it was firing:
Upon inspecting the sources tab, I found nothing but my own files.
In addition, I noticed that always somewhere towards the end of my profiling session, this "unattributed" source would appear to be completely blocking my JavaScript:
HOWEVER, this is not even what happens. My site stays completely responsive - it wouldn't do that with 100% scripting CPU usage. However DevTools says otherwise. The last thing that really gave me nightmares was this:
NEGATIVE SCRIPTING TIME? You can even see Chrome's rendering giving up towards the left of that pie chart.
So, in all my confusion, what exactly could this be? How do I find the source of this, or does it even have one, maybe this is just a bug within the newest version of Chrome? Really appreciate if anyone could drop their thoughts.
This website (www.samy.pl) uses some technique so that no one can inspect the code (Ctrl+Shift+I) or view source (Ctrl+U). It can detect if you have opened the console or inspector the code automatically changes.
How this is possible?
You could always save the website.
In chrome open the menu -> more tools -> Save page as..
You should be able to run the html file in chrome, and use Dev Tools without it blocking you.
There is a console "clearing" API that is mentioned in this answer.
Here's what I think is happening:
First, I think Google Chrome DevTools emits an event when it is open/launched.
The page author listens for this 'launch' event with the following handler logic:
Run a chrome.devtools.inspectedWindow.eval DevTools inspection API
Set document.body.innerHTML to the winky-face div
Also, a setInterval that executes a console.clear() before the console.log() of "no source for you".
I also inspected the EventListeners tab of Chrome DevTools while reading the "no source for you"-page.
Unfortunately, the two event listeners you can view don't seem to do anything useful:
one returns false
the other wires together forms and their associated submit actions.
Hope this helped
hahaha, this is a good one, you should not expect less from samy!
Now I see why people think it is the wrong answer (the source get replaced if you do otherwise)
1.Navigate to site with inspector open there you end up with "No source for you! You found easter egg #7."
2.and then check the source to find Easter egg #2:
view-source:https://samy.pl
you will see:
/*
No source for you! Easter egg #2
*// AFTER SOME LONG WHITE SPACES HERE /.source.replace(/.{7}/g,function(w){document.write(String.fromCharCode(parseInt(w.replace(/ /g,'0').replace(/ /g,'1'),2)))});
This is the way he loads the site(by injecting js), by replacing two type of white spaces for 1 and 0 and parsing that to char code by some regex and then that to string of course :D
https://de.wikipedia.org/wiki/Whitespace_(Programmiersprache)
If you paste that part to a js console, you will get the tags that loads the page.
ps. to see the rendered source, just load the page normaly and hit F12 after disabling javascript.
Have fun!
Create an index.html somewhere, containing an <iframe src='https://samy.pl/'>. Load it in your browser and then open devtools. You will see the source inside the iframe.
Update:
Go to view-source:http://samy.pl which is the link of what the view source right click brings you to. It only works on Chrome I think.
If you are using chrome, go to the menu at the top right. Then go to more tools, and click developer tools.
After a lot of tinkering and speculating together, my roommate succeeded in the end with quite a naïve approach.
Simply open the Chrome devtools and copy out the source before it gets replaced. Giving Chrome processes low priority and doing some heavy-lifting with your CPU (compilation or other) helps.
Chop, chop.
Ah! I have found an extremely easy way to do it.
1. Open Firefox (Chrome only shows you part of it).
2. In the URL bar, type in javascript:alert(document.documentElement.outerHTML);
3. Press Enter.
4. Voilà!
New Way to find the source code! But its complicated!
Open a new tab.
Open Devtools (Inspect Tab)
Click On Toggle Device toolbar (the mobile like icon)
Click on "No Throttling" to slow down the page loading time
Select "Low - Tier Mobile"
Open the page!
When you see the icons appear on the page, you can now see the source code! :)
sorry very late
but i think i have the answer
He used this node package
to which he has contributed and forked too
the package docs say that it wont work if the devtools are undocked
You can simply use the developer tools in almost all the browsers. Just Press F12 and the developer tools section will be there.
Thanks
I am trying to use the new feature of chrome devtools "blackboxing a script".
This Chrome Devtools article lists script blackboxing functionality
What happens when you blackbox a script?
Exceptions thrown from library code will not pause (if Pause on
exceptions is enabled)
Stepping into/out/over bypasses the library code
Event listener breakpoints don't break in library code
The debugger will not pause on any breakpoints set in library code.
The end result is you are debugging your application code instead of third party resources.
I have tried to blackbox the file directly by right clicking the file from source tab and everything goes right the yellow notification shows at the top of file "This script is blackboxed in debugger". Strangely none of the above listed points work, debugger goes through blackboxed script also event listeners reference the blackboxed script. I have also enabled Developer Tools experiments at chrome://flags/
With these options set i thought i would have been ok, i also have the latest chrome at this time 39.0 beta,i have no idea what i'm missing. Did anybody go through this?
Thnx!
I had the same issue. One quick and easy way is to look at your Call Stack. As a for instance, Right-Click on one of the 'jquery' functions and select 'black box' from the menu. Nothing else needed. In this example jquery.js will be step-over from that point on.
In your screenshot, I can see a breakpoint.
If you put a breakpoint, it will always break (except if you deactivate it, of course), even with blackboxing being active.
Had the same issue and used good old
have you tried turning it off and on again?
Go to developer tools settings -> Blackboxing -> Remove all entries one by one + disable Blackbox content scripts
Blackboxed again and after that this works fine.
Is there a way to modify JavaScript code while debugging? Visual Studio has "Edit and Continue", and similar hot swapping of code can be done in Java and other languages. Can this be done with JavaScript, and if so, how?
Chrome, Safari, and some other WebKit-based browsers contain a feature in the Web Inspector known as Live Edit. If you go to the Scripts panel and are stopped on a breakpoint (or maybe even if not stopped on a breakpoint — I'm not sure), you can double click on a line and start editing that line. The changes you make will take effect on the script.
With Chrome Developer tools, this is super easy.
Just pop open inspector, click on the scripts tab, select which one you want from the dropdown menu and then you are free to edit the script and add in breakpoints. If you refresh the page, your breakpoints will stay there.
If you watch this talk but Paul Irish, he shows how you can edit a script on the fly
http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
also good:
http://blip.tv/jsconf/jsconf2011-paul-irish-5382827
If you're talking about while debugging, it's very easy to modify the running code. In your debugging console, you can enter in Javascript expressions and it will run in the context of the window, which contains all the objects and functions of your code, so you can swap them out by redefining them.
Because JavaScript can modify the DOM the you essentially have to change the JavaScript file, save it and reload. For me, I like IE so I run the webpage in a browser NOT IN DEBUG mode. Then you can change the script files, SAVE them. switch back to the browser and reload (F5) to see your changes. Supposedly IE 11 has this ability (probably like Chrome which is essentially what I am doing, changing saving reloading from what I can tell) but I can't get it to find, let alone open a js file. Super poor UI. I'm guessing the browser to open the file icon is but it is always grayed out.
I want to debug a javascript file that is embedded in the HEAD element.
I navigate to the site, see the code, and make a breakpoint:
(source: deviantsart.com)
But when I click on Reload, the script disappears and it doesn't stop at the breakpoint:
(source: deviantsart.com)
Debugging was working earlier so I know it works in general. What do I have to do so that Firebug always debugs my script?
I've noticed this behaviour before as well. It seems that it can happen if you refresh the page while the debugger is running (i.e. after you've hit your breakpoint and are stepping through code). This is far from conclusive, just something I've casually observed over time.
Also, I try to avoid having multiple tabs open with firebug active, as it seems to get confused.
Edit: just thought I'd add that I've seen this manifest itself in a few different ways:
the external script file does not appear at all in the scripts panel.
the external script file appears but firebug doesn't "see" it. You know this has happened because the line numbers beside the code where a breakpoint can be set won't be highlighted (used to be green but now appear to be just a darker shade than other lines). I've seen this happen with inline javascript on a HTML page (horrors!) as well.
the external script file is there, but you can only see a single screen full of code. Where "screen full" is the firebug panel viewport.
shut down firefox and then restart. sometimes firebug gets confused. also make sure you have the latest version.
You need activate the script tab
I'm not sure that having a <script> inside <head> (as opposed to, inside <body>) is actually legal HTML. If it's not, as I suspect, you can't fault Firebug for not supporting it well...!-)
The bugs in script processing that I know about are 1) jquery dynamic loading of scripts fails, 2) new Function() cannot be seen, 3) some kinds of document.write() cannot be seen.
Firebug processes script files in series with Firefox. This means that Firebug must be active when the page loads and it means that any exception in the path will cause the files to be mis-processed. If you opened firebug before loading and you still see problems, then the most likely fix is to install Firebug in a new Firefox profile. This causes you to get a completely fresh set of default options and you run Firebug without other extensions. As you re-add other extensions, look for problems in seeing scripts: then maybe you will discover what extension is interfering with the code path for processing scripts. I know this is a pain in the neck, but so is JS debugging without source ;-). We are working on testing with more Firebug and Firefox extensions installed to try to reduce these problems.
In our case it was the bundling of JS files.
It is not only FireFox, it is same for Chrome.
We moved the file out of the bundle and put it on the page where it needed to be referenced and it started working like charm.