I've a test website on http://insstock.info/xxx/
With two sliders inserted into it:
Nivo Slider
DIV Content Jquery slider (Exact below of Nivo Slider)
second slider is expected to flip the content one by one; the code and scripts are set accordingly!
It is showing no error in Chrome developer tool Console panel!
Can anyone Please help me to making this second slider work?
A couple of suggestions that I run through when I experience this behavior.
1) Clear the Chrome Cache
Chrome caches aggressively and frequently will return stale resources. You can clear the cache either by using Ctrl+Shift+Del, or prevent its use on the page by opening up Chrome Developer tools, clicking the gear icon in the bottom right, and checking "Disable Cache". Then reload the page with Ctrl+Shift+R. This will ensure you have the latest version of your resources.
2) Check the Network tab for any resources which are failing to load
3) Step through your code in the debugger to try to identify where things go wrong.
4) Start removing pieces more and more pieces of your code until you have a very small set that is exhibiting the issue. This is a great strategy for debugging generally, since it is much easier to debug something small than something big.
Related
My Angular JS app is loading slowly on Firefox browser. As a result of this, some of the hidden elements are showing up on the page during page load before getting hidden again. I am using AngularJS material also. I tried moving the script tags to the head. This is fixing the issue in Firefox but in Chrome it is loading slowly. Any suggestions on how to fix this?
For hidden elements, try ng-cloak
If you look at the developer tools, you can see that some browser-extensions can increase page load time also... best to compare without any browser extensions in both browsers
My Angular 2 Application is slow to respond (1-5 seconds) to key input, button clicks, tabbing across inputs, etc. only when Chrome Developer Tools is open. Material 2 animations also become slow and choppy.
I've been developing this application for three months, and use Chrome DevTools every day. This issue cropped up seemingly overnight.
What I know:
I stashed all pending application changes to revert my application to a time when this was not a problem. The issue persisted.
Chrome DevTools doesn't seem to slow down any other application (ie. google inbox, google maps) in the same browser session.
Maddeningly, when I run the DevTools' Timeline "Record" to try to gain visibility into the issue, the issue disappears and the page reacts at normal speed again! I assume this is the best clue that I have, but I don't know the internal workings of DevTools well enough to know how "Timeline Record" changes things.
I've restarted Chrome and deleted all cached data.
Nothing of the sort happens in Firefox or IE when I open the Developer tools in those.
Any recommendations on where to look next would be greatly appreciated!
Final answer:
Remove all breakpoints
Even if they're not getting hit this fixed it for me and got performance back to normal.
May be a bigger issue if you have logging breakpoints - so try deleting those first if you're attached to your breakpoints.
Previous answers:
I came up with a workaround - although still not really figured out what is actually wrong.
I also discovered a bunch of tools I didn't even know existed that I'd skipped over before - they're under More tools.
Start by opening the Performance Monitor. This shows a nice CPU graph isolated for your Chrome tab - the Windows task manager is as useless as it ever was.
This is the behavior I got when choosing a date from mat-calendar. No other logic running - just selecting a date. I removed everything from app-component and just put a mat-calendar and it took ten seconds to change the date!
Other controls are generally fine. I could open dialogs, use combo boxes etc. and nice and fast. But selecting a date gave me this nonsense:
I tried emptying local storage, clearing cache, etc. and then I changed port number for my website. I simply changed dev.example.com:44300 to dev.example.com:44301 - in other words Chrome now thought it was a different website.
This is what it looked like after I switched port number.
I also got the same effect using a reverse proxy server - which put my local machine on the internet - so I could try to duplicate the issue from other machines. I could not.
So hope that helps someone - still no clue what's in the cache for this server that is having such a massive impact on performance. But for sure it's not just my code.
Here's a few other things to try:
Test with --aot flag
This didn't make a difference to me, but good to narrow things down.
Add some controls that don't do anything (as a control)
This way you can find if some specific action or control is causing the slow down. You should of course be able to toggle these instantly.
Just toggle them on and off, hide something.
<mat-radio-group>
<mat-radio-button [value]="false">
bloop
</mat-radio-button>
<mat-radio-button [value]="false">
bloop bloop
</mat-radio-button>
</mat-radio-group>
Enable Rendering debugging options
Make sure you aren't re-rendering the whole page constantly
The rendering option above will show this to some extent, but one thing I like to do is just add a random text box - type in it and if the text subsequently disappears you know that control has been rerendered.
<!-- yes, just a standard text box -->
<input type="text"/>
Just hide things with *ngIf="false"
Hide controls (yours and third party) and see if anything is causing problems.
For me I'm currently suspecting mat-calendar is causing issues - but I'm still thoroughly confused as to why enabling 'Record' makes the problem non existent.
I've fixed the issue, but I'll never know what was causing it. Likely a setting that I had accidentally changed.
I deleted the Chrome App and reinstalled, everything is back to normal. I'm going to leave this question open in case anyone else has this problem or wants to contribute.
It is normal for every web app to run slowly with Chrome dev tools opened.
Especially if you have inspect tab open, that it's like a new page opened in the same time + has animations on any block render.
We had this issue today at a colleagues workstation. Turned out that it was a chrome-extension (don't remember, something with "ghost" in its name). So maybe try out using guest-mode and check whether the issue still occurs. If it doesn't, successively reactivate the extensions to see which one is causing the problems. If it still occurs, follow the other proposed approaches.
I'm going to try to explain an issue that scratch my head...
When I open this website for the first time after opening Firefox (v43.0.3), the UI freeze during about 20 seconds and I don't undersand why. For example you can see that the background image appear after almost 20 seconds...
So, I used firebug net panel to try to understand where the problem comes from and I notice that the page load event is very long but I can't see any tasks executing during this event.
here is a screenshot of firebug Net Panel
When I open the website with Chrome it works fine, does someone has ever encounter that kind of problem ?
I hope that makes sense, thank you in advance.
You're making 31 requests (according to my NET panel - FireBug) which add to 323ms (at least in my case). Your background image is loading ~1s after. Maybe if you'd try to reorganize all that sprites you're requesting into less files - but it seems fair as loading time for me.
I once had a problem with Firebug itself. I had to turn it off and\or uninstall to get the page load normally on Firefox.
In my case it was an effect of problem between Firebug and Telerik Kendo JS Library.
Maybe you have a problem similar issue.
Thanks for your answers, indeed it seem's to comes from my firefox configuration or addons/plugins.
I use a Firefox pre-configured by my socity, so I installed a portable firefox to try if it works and the website is loading normaly.
Now I just have to find from whitch config or addons/plugins the problem comes from, thanks again !
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.
I have downloaded and installed IE8. I was playing around with the debugger, but I could not figure out how to load external javascript files. It displays the javascript from the main page, but I need to debug the script in the external files. I have googled various articles that show a screenshot of an IE8 debugger with a drop-down for selecting which script to debug, but my debugger does not feature this. Can anyone help me with this? Thanks.
Here is what I am seeing when I open up IE8. You just click the URL and it brings up a list of all scripts, which you can then click to load. If for some reason your browser is not showing the Script tab, maybe you should uninstall and reinstall it.
If the toolbar isn't wide enough (at least 800 at 92dpi) then the drop down arrow will be hidden (you can still click on the main area though). You can change that size by shrinking the size of the console on the right hand side their is a horizontal splitter bar between the script and console panes just click and drag on it.