I have been fixing up a sites JS, moving it to the bottom, minifying, etc. And it's all gone okay except on the blog (of an e-commerce site), as the page loads it's causing the header to be un-styled for a second or so, but it isn't happening on any other part of the site, even though they share the same CSS/JS. The blog is image heavy, but with images disabled (and I've tried disabling scripts too), it still happens. It's only happened since I've made changes, which I can't revert simply, but the changes are all positive and should help if anything. I can't see any JS causing it (as I removed the scripts to see if it was in there) and it doesn't happen in FF.
I would share a link but it's behind a closed staging server. And I could provide code but I'm not sure what, and there's a lot.
So, I had hoped I could use Dev tools to figure out what's happening, possibly the timeline view or something. I just don't know how I'd go about doing that.
Any advice?
Ed: I used the network tab on both the staging and the live site, as you can see from the image, they're identical, the css is the first thing loaded after the actual page, and on the live site it's actually ga.js. So it's even more of a puzzle now...
Don't worry, figured it out... It was the Stylebot Chrome Extension.. No idea why it was causing it now after making those changes though, and why it didn't affect the live site. I had no styles defined in it for this domain. A bug I guess.
Cheers all the same :)
Timeline tab in the dev tools is for benchmarking / site performance testing. If you want to know what's happening as in what content is being loaded, when and where, you can use the network tab for that.
It's also a common practice to stuff console.log() everywhere with some relevant message so you know when some part of code is being run.
Related
I'm looking to either run javascript in a new tab of Chrome, or some alternative. The issue here is that it won't run, and I'm stuck, even after doing a bit of looking.
I've searched on here, and there was only one response saying it's not possible, however I don't fully understand this. After looking, I haven't found much more information on this matter.
As for any specifics - I want to toy around making a new tab extension for chrome, perhaps something fully fledged soon. Part of it includes a clock and some other things (at least for now), and I've got a clock working on the normal page if I view it normally, but this is where things get annoying. Load the extension into chrome, and.... nothing. Point is, I want to make a new tab replacement for chrome that uses JavaScript, and currently I cannot get it to run any javascript, even something simple as a clock script.
Now the initial information I found says that javascript does not work, but here's some things that would appear to contradict this:
https://developer.chrome.com/extensions/override states:
"...In addition to HTML, an override page usually has CSS and JavaScript code."
Nowhere further down do I see it making any kind of 'exception' for new tab pages where you cannot use JavaScript.
Additionally, consider the new tab page called Cardboard - it's a really pretty Google Now styled new tab page.... yet it isn't incredibly static. In fact, it has scripts, when I inspect the page! Specifically, things like google-analytics-bundle.js, dependencies.min.js and cardboard.min.js (which other than the first two, this certainly looks like a script intended for the plugin, and not from google specifically so I would assume this isn't google-approved only code or something like that).
At this point, I'm stumped. How would I be able to get javascript running on my new tab page? Is there a difference in functionality between an unpacked and packed extension that I don't see any information about? If this isn't possible, is there any other option I can have to substitute this?
i've been plagued by a problem that seem to started since Youtube's last
layout change this year.
I have for months put up and tried to ignore the freezing that happens
everytime I open a link within youtube such as an channel, an video, the homepage, etc.
I'm using Chrome version 31.0.1650.63 and I have already tested youtube without any
extensions, cookies, cache, etc but it still affects me to this day and maybe some
of you out there.
I searched every where for the solution and couldn't find any anywhere.
I did a bit of digging and testing to see what is the root of the problem and
while i'm no expertise on code or Java...I did found something.
Every time I reload a page on youtube, with it finishing loading up...this happens:
http://i.imgur.com/K9Z3vJ1.png
See that?
The purple-colored rendering, that's the cause of the lag every time I load
up something on youtube!
I notice that it repeats the same thing over and over again for like 5-15 or so
seconds before it starts loading up the thumbnails of the videos.
If you want a closer inspection of the code, here's the raw data from the timeline (that you can load up in chrome's dev timeline window):
Youtube Lag JSON Timeline file
I don't what to do with this problem and I believe it affects
me in Firefox as well but to an lesser extent then chrome.
Do any of you guys know how to resolve this problem?
Honestly I doubt that the youtube devs will fix this problem since they're the ones who caused it in the first place. (Like not being able to subscribe to some people when i'm not even at my sub limit.)
I'm sorry if you don't want to help but I don't know who else to look to besides
the experts that y'all are when it comes to web coding. If anything, I believe a userscript or something similar could help with this but how...I don't know.
I'm new to this and I apologize if the question i'm asking isn't suited for this site.
Still, thanks for reading and if you can...please reply.
That is all and thanks again.
Well I was fiddling around and looking at the source code
with chromes timeline devtools and well...
I found a temporary solution to the problem which seems to have
fixed and ended the freezing on youtube! yay~
But some things don't work with this solution and i'm at
a fault with this issue after some hours trying to figure out
how to stop the problem.
Anyways I used adblock, an extension that I have on Google Chrome, to deal
with this issue and was able to get everything fixed and working!
What I did was, in the custom filters section (check options in your
adblock extension, you should have it.) and added the following then did
some testing to see if it fixed the problem which it did!
Here are the filters I used to fix it!
||s.ytimg.com/yts/jsbin/www-pageframe-*
*www-pageframe-*.js
^^^
Yeah, that's the temporary solution as it fixes the problems but it causes the following...
You can't open the menu which contains links to your playlists, user settings, channel, etc when you click your username or profile
picture on top right of youtube.
The "..." mini-menu that you usually find on the right of a video section (to hide, subscribe, etc.) doesn't appear anymore.
Youtube's quick menu button doesn't work, however the menu is still open but you won't be able to close it. That or it's close and you
won't be able to open it...I guess.
Those are the problems I found with this temporarily solution to the freezing problem.
Yeah...but I hope this helps anyone who's having this problem somewhat well.
But it would be nice if someone has an better solution then mine hehe!
Thanks for reading and if you have a better solution, don't feel afraid to
tell! ^_^
I'll be awaiting other answers, for now...I hope this helps y'all well
in some ways hehe! =D
This certainly isn't javascript, but substituting the normal EasyList in ABP for EasyList without element hiding will fix the issue. There are downsides to this as well but for now seems to be the better solution.
I've run into an issue that crops up when I make a change to a Drupal site - www.productworld.com
This is how the problem crops up:
Make a change to site, e.g. add javascript tracking code or adding a new static webpage.
When NOT logged in as admin (viewing the site as a regular visitor), the homepage is now screwed up. It appears that the CSS and JavaScript for the homepage aren't loaded. When logged in as an admin, I see a cached version of the site, looking as it should. I use two separate browsers to confirm the problem - one where I'm logged in as Drupal admin in Chrome, and two where I view the site in Firefox as a non-logged in site visitor.
Here's some screenshots of what the site looks like when the problem crops up:
http://imgur.com/xs3hF
http://imgur.com/wMBVq
http://imgur.com/Gksb9
http://imgur.com/eZPTE
Note: the company images that you see (iWatt, Roal, Assa Abloy etc) should be in a nodequeue (a jQuery image slideshow), but instead they appear one after the other. The blue box with the gold call to action appears way down the page. This is what leads me to believe that the CSS and JS isn't loading.
3.Clearing the Drupal cache fixes the issue.
It's obviously highly undesirable to have a site that gets screwed up everytime a simple change is made to it.
If anyone has run into a similar issue, please let me know.
Thanks.
When you make changes to the site with caching enabled it will cause problems. This is because it will be using some cached copies of earlier files.
I tend to make changes to a development version of the site, then roll them out to the live site and clear the cache.
I"m wondering if anyone can give me some insight into a really strange IE9 issue I've been struggling with.
I'm finishing up production of a site for work - it works well in ff/chrome/ie7/ie8 with no script errors.
On IE9 the last step of the application causes the entire tab to whitescreen with no script errors or warnings. (changing the document mode to ie8 will fix the problem but is obviously unsuitable for production)
Unfortunately the site pretty complex with a ton of ajax, and in-page scripts so I can't really post the relevant code easily. I'm more trying to figure out how to diagnose this.
I've checked the IE error logs and they are empty. Web developer tools tells me nothing. The site is not using any plugins (Flash/Silverlight, Ect. ) just javascript w/jQuery.
There is a PDF being displayed in an iframe around the step where it fails - but a nearly identical pdf is displayed in the previous step (using the same method) without problem. The code fails around a call to the jquery UI window but I can't seem to get the exact line.
If anyone has a clue how to try to diagnose this further I'd really appreciate it. I can keep hunting for the bug but I've never seen this kind of behavior before and just am not sure what I am looking for.
Thanks for all the input on this. Sorry I got completely overwhelmed by a few projects at once so I wasn't able to post updates on the debugging steps.
It took forever but I finally realized that everything was crashing when I closed the dialog containing the first PDF.
One of my helper functions was opening the dialog and automatically destroying the contents on close. Normally this works fine as I'm either removing a div containing the page fragment, or the iframe.
In this situation I had a page fragment loaded into the dialog which contained some buttons and the pdf iframe. I called the .remove() method on the parent element containing the iframe rather than the iframe itself. For some reason this seems to work fine in every other browser - but in IE9 it pretty much kills the page rendering without any warning or message.
I strongly suspect that the culprit is the adobe plugin but I'm not entirely sure.
Here is the fix-
Html:
<div id="container">
<iframe src="loremipsum.pdf"></iframe>
</div>
Javascript:
//Ruins my entire week
$("#container").remove();
//Works as the pdf is removed directly
$("#container").find("iframe").remove().end().remove();
I ran into the same issue on IE11 while trying to remove an iframe in a div with AngularJS. Removing the iframe first would just cause the same issue, so I navigated the iframe src to a new page (about:blank) first, then removed the div which worked. Hopefully this helps someone with a similar problem.
Pseudo-code below:
$ctrl.iframeUrl = 'about:blank'; // change the iframe url here
$timeout(function(){
$ctrl.removeIframe(); // remove the iframe here
});
As a thing to try - see what's in the IE9 DOM viewer after it whitescreens. There's a decent chance that most of the stuff is there and just not rendering properly (or having something else rendered over it). At the very least, knowing whether it's losing a ton of stuff out of the DOM or not should give you some useful data.
I am unable to replicate the problem when I want to but it seems like every now and then, my site using FCKeditor will load the interface but not the content (Clicking the buttons don't do anything). No javascript errors show and once it starts doing it, it usually is tough to get back to normal. The way I found to work best is to click the refresh button multiple times in a row, then the FCKeditor loads correctly. I have only seen this in Firefox
Has anyone else run into this problem or know a solution. It is a little annoying for me but I am afraid my client would be really confused
I have experienced the phenomenon you describe in FCKEditor's successor, CKEditor. Somehow, the IFRAME that contains the WYSIWYG content doesn't get loaded. What always helps is switching to source code view and back, but that's no solution.
I have seen the problem described on the Internet but with no solution.
Caching is not the problem, I think. Sometimes, if you press "reload" 20 times, it will break at the 21th time, and work again on the 22nd time.
What minimized the number of occurrences for me was to activate the thingy to the editor's bottom that shows the element path (body > p > span, I forgot it's name). I don't now why but since I turned it on, it very rarely breaks any more.
I have had this problem. I solved it by pre-loading FCKeditor in a hidden iframe during the login process so that when it got to the pages where it was used it was already in the cache.
i would strongly advise to upgrade to CKEditor which can not only be spelled out verbally without offending anyone, but also optimizes the loading time to minimal. I find it much more responsive than his F- friend.
I encountered this problem with firefox (not reproducible) and chrome (reproducible).
The solution that worked quite well in both cases was to wait for some milliseconds before initializing CKE :
setTimeout(function() {textarea.ckeditor({customConfig : 'custom/schnonfig.js'})} , 100);