I have an unusual problem that IE F12 Dev Tools seems to be able to workaround. When my javascript is inserted into a page which contains a frameset with multiple frames, the src tag for one of the frames does not get updated and so the document it contains is not navigated and the frame contains the wrong page.
My javascript is not public domain so i can't post it here but when i fired up F12 Dev Tools to take a look and did Select Element i found that the page had somehow been refreshed and was now working. Hitting F5 or refresh on the browser does not get it working.
It seems a long shot that someone could tell me exactly how F12 refreshes the DOM. Maybe someone can tell me how i could add code (event logger?) to the page find out what is happening to it when F12 Dev Tools starts operating on it?
Related
I just find a javascript code that if you paste it in the "Console" tab in the Inspect Element of the Instagram page, it would cancel a group of pending follow requests.
Since there are about thousands of pending follow-requests, I want to use the iMacro to ease the canceling procedure.
I use iMacro to record the canceling process (go to page,copy the code, bringing the inspect element up,go to Console tab,and paste the code into it,and run!)
but here is the problem: when I play that, it can not bring the Inspect Element mode of the browser (and Console tab) to run the next steps.
I wonder if anyone knows how can I address it in the iMacro??
Thank you in advance!
This has been a problem for a long time and I've never found a solution for it and while other questions on here are similar, they are not exactly what I'm seeing.
The problem is that the SOURCE used to step through the code does NOT refresh on every page load. Yes, I have disabled the cache - but it is not the browser cache that is the problem, it is the DEBUGGER SOURCE cache.
In my webapp (Struts2 and Tomcat), I have the main page with title bar and left the menu. The center content is an iframe that loads all the appropriate JSPs. I use one 'action' for most of my navigation with different results displaying different pages. The problem is that the NAME in the chrome debugger SOURCES pane does not change as I navigate. The actual page changes, but since the name doesn't change, Chrome does NOT bring the new source into the debugger window. So what happens is if I have 'debugger;' on line 200 in the page being loaded, it stops, and shows the 'source' - but its the OLD source at line 200, not the actual source that is running! If I right-click on the old source file in the SOURCES pane, and "Reveal in Network panel" the real source is shown here as it really was loaded from my server, BUT the debug source does NOT change.
Question: How do I get around this bug in Chrome and force the source to reload in the debugger display?
UPDATE: No, this is not the same as that other question. The answer by David Fahlander seems to fit what I'm saying. The ACTUAL javascript source IS refreshing and is shown correctly in the RESOURCES and NETWORK panes. But in the SOURCE pane where actual debugging is done, the new source is NOT refreshed. And its hard to debug code you cannot see!
Maybe try the old fashioned method of adding an URL query parameter with, say current time in ms? Something that your app will ignore, but Chrome will treat it as a new page? e.g. https://example.com?time=1594125425508
Is there a way to debug the page with browser console or firebug to know how many times
a specific Javascript function is called while loading the page ?
As #SamGreenhalgh pointed out, in Google Chrome, you can simply open the Developer Tools ([Ctrl]+[Shift]+J), find your script in Sources tab, and add
console.count('some label');
right into the body of the function you wish to observe. This will print out
some label: {N}
into the console each time console.count is called at that point with that label (see documentation).
You can set a breakpoint on the function, reload the page, and count how many times you have to press the Continue button.
In the dev tools of most browsers (and in Firebug), you'd do that something like this:
Go to the page
Open the dev tools (via menus, or press F12 on most browsers, etc.)
Navigate to the "Source" pane (the name varies, but it's usually something like that)
Find the function in the scripts. (Chrome's dev tools have a great feature: Ctrl+Shift+F does a search through all loaded scripts.)
Click the gutter to the left of the function to set a breakpoint
Then reload and count. I'm not aware of an automated way to do it.
Trying to debug a problem that's IE-11 specific, I would like to see the console messages logged when a certain control is clicked. But the control refreshes the page, which makes F12 tools automatically clear the console, so whatever is logged just before that, I don't get to see!
Past versions of IE had an option to keep the console contents on navigation. Is this option available in IE11? If so, where is it? If not, is there some other way to view the console that doesn't immediately discard the message I want to see?
In with the latest F12 update to IE11 (that came as part of the Win8.1 Update) there is now a button to disable "Clear on Navigate"
Additionally, you can enable IE to record messages in the Console at all times instead of only when the Console is open.
For all the changes to the IE11 F12 dev tools see: http://support.microsoft.com/kb/2929437
Ran into this and I didn't find a good solution, but I found a hacked one that worked well enough for me to debug.
Use window.onbeforeunload to pop up a window so you can at least see the values before they are purged.
See: Prompting and preventing user from navigating away/closing a page
So, I have a script called "engine", and after much headbashing and (futile) debugging, I've found out that GC simply isn't reloading it!
This is how I include it in the webpage (inside the <head> element):
<script type="text/javascript" src="engine.js"></script>
When a put 10 console.log("asdf");'s at the start of the script, it's like they aren't there. When I went to the "resources" tab in the GC console, I saw that no changes are being applied whatsoever to that script! Hlep? Would putting a + "?" + new Date() at the end help?
The universal solution that works in Chrome, Firefox and IE is cleaning the cache via Ctrl+Shift+Del (on Mac ⌘+Shift+⌫).
Chrome solution #1
Open Developer Tools (F12 or ⌘+⌥+i, or right-click → Inspect).
Select the Network tab and tick the Disable cache checkbox.
Reload the page.
❗️Note: The cache will be disabled only when the devtools window is open.
Chrome solution #2
This only makes sense if #1 is not used.
Open Developer Tools.
Click the Settings cogwheel icon in the bottom right corner.
In the dialog that appears, select under the Network subsection the Disable cache checkbox: from now on the cache will be skipped when the devtools window is open. When the devtools windows is closed caching will work as usual.
Chrome solution #3: empty cache + hard reload
Open Developer Tools (otherwise the menu in the next step won't show).
Click and hold down the Refresh button, and then select from the dropdown Empty Cache and Hard Reload.
Modifying javascript code
A browser-agnostic solution which could be used for debugging is to append in your server-side code a randomly-generated version string as a query parameter, i.e. call your script as:
<script type="text/javascript" src="myscript.js?ver=12345"></script>
This trick will force the browser to reload the script when the value of the ver parameter changes. If you make ajax requests then you can append "?ver=" + new Date().getTime() to your URL.
NOTE: Don't forget to remove the parameter when you are finished debugging because in production you most likely do want the scripts to be cached. It is a common practice though to generate a new timestamp on each new build — this can be used in production, and will ensure that after a new deployment the clients will always get the updated scripts.
Unlike all the above solutions this one will work even when you have some sort of caching (e.g. redis, memcached, varnish) or CDN (e.g. akamai, cloudflare, cloudfront, etc) between the client and the server.
It is possible that the script is cached so the old version is loading from cache. If you want to make sure you get a new version, you can force a browser reload, clear your browser cache or change the name of the script or put a different query parameter on the end of the filename.
This bugged me as well; CTRL+F5 or SHIFT+F5 never worked...
The only things that works is opening your dev tools (hit F12), and right-click the reload icon next to the address bar and then selecting either "Hard Reload" or "Empty Cache and Hard Reload"
As I said in the comment I guess it's a cache problem, a CTRL+F5 should be enough, in case it is not go for CTRL+SHIFT+CANC and clear browsing data. However sometimes it's the server that has some kind of cache, I say that because with IBM WebSphere I often get cache problems that I can't resolve with a simple F5 on my browser. I just have to wait for my web server to "refresh" itself.
In the latest chrome stable 21st Oct 2016.
Open Developer Tools (F12 or right-click > Inspect or vertical ellipsis icon in address bar right corner > More Tools > Developer Tools).
Click the vertical ellipsis icon in the top right corner of Developer Tools navigation bar > settings.
In the Preferences section find the Network > Disable cache.