I have the following app.js file:
https://gist.github.com/manifestinteractive/393a4aae0c4ed4fb6bc2
When I look at files I am loading statically in the public folder via the operating system, they look correct, however, if I go to view them via the browser as intended for delivery through node express engine, the contents are duplicated. Basically, it is taking the file and appending it to itself, which of course breaks the javascript.
Anyone know why this would be happening? Suck a weird bug and I can't for the life of me put my finger on the cause.
For the record, I have tried looking everywhere for a solution. I've just not seen anyone talk about it. A quick test shows that I can manually change the JavaScript file at the source, and refresh the code in the browser, and it will reflect the changes correctly, but it will still be displayed twice.
Thought it might be some weird issue where maybe I had multiple instances of Node running or something, as that MIGHT explain it... but nothing :(
If I find what it is, I will follow up with the issue immediately, but for the time being, I am likely just doing something stupid someone here might yell at me for... and I would gladly welcome it :)
Related
So far Gurus here helped me a lot so far and I am back again with my little queries again.
I have a js that is being called from a webserver through a internal site I am taking care of. js has lots of very helpful debugging comments through
console.log($output)
that are being displayed on the console. I was wondering if there is any way i can redirect these comments to a log file on server.
I know it is hard but not impossible... I thought of doing something like
> exec 1>>${LOG_FILE}
but then it means it will get outputs from every file will be going to that file.
I only need the output from one file... is it possible?? plus do I need to run it through cron? because I don't have permission to change anything in js itself.
-Thanks
Because of a system of dependencies that are less formalized than I'd like, I now have a very, very large "master" JS file that contains a pretty large kitchen sink for use in every page in my app; that is, once you've logged in.
It only takes a few seconds to load, but those few seconds aren't great for a first-time experience at the logged-in homepage. So, I'd like to find a way of loading my script on my login page, so that when the browser requests it on the homepage, it either gets a 304 Not Modified response, or simply knows not to re-request it. Here's what I've tried.
Just including the <script>
This unfortunately doesn't work because the script in question doesn't have "definition guards" in place. Including it on the page messes up the login page because of certain <div>s it expects to have present. It's built through dojo, and I don't want to hack the built file, so I don't want to surround its code in such a check.
Grab it with XHR
I actually had this fix in place for a while, and it appears to work okay in Chrome; once the login page is completely loaded, my script then sends out an XHR to "js/masterFile.js" and does nothing with it. The assumption is that as long as the cache headers are okay, the browser will hold onto it when it later needs that file as a script. As I said, it turns out most browsers don't seem to work this way. Some reuse the "text" they got from the XHR, others seem to cache scripts differently from other content; it's possible that's a security-related issue to them.
Load it in an iframe
This is kind of entering rocky territory, as I don't like iframes, and it's an extra request. But, doing this would at least let the browser cache the script in the right way. It introduces a lot of code complication though, and I'm hesitant to settle on this.
If it helps at all, the scripts are AMD-compatible; but, the master script in question is a "boot layer" that contains the basic definitions of require/define.
Well, I just found a possible way of doing this; I don't currently have time to thoroughly test it, but it appears to work on a basic level.
<script src="myMasterScript.js" type="text/definitelynotjavascriptnopenosir"></script>
This works in an interesting way. I can see that the request is made for the script source, AND if it's valid JavaScript, it will execute. (As found from just referring to the JQuery CDN) However, the browser's console will essentially squelch any kind of errors that occur from running it; ie, "Oh. Maybe I wasn't supposed to run that".
For my own purposes, I still need to figure out, based on the JQuery scenario, whether this might still mess up the page to some degree.
I hate to be the guy who makes a stackoverflow account just to ask a question (I owe a lot to stackoverflow), but this really has me utterly stumped.
For months I've been plagued with a mysterious bug that causes a bizarre rendering error in my three.js VR projects when running on Android.
I've always been able to solve it by basically rebuilding everything from scratch virtually line-by-line to see what causes the problem. I've never had any luck pinpointing the cause however.
Today, I found a way to reproduce the problem - I took google's Google Cardboard three.js example (which you can find at vr.chromeexperiments.com (I'm not allowed more than two links until I get my 10 reputation)), added in some spheres (so that there was something to watch for in regards to the aliasing) and found that it was running fine.
Renaming the root folder from 'WTF' (can you tell this is frustrating me? :P)to 'WTFF' will result in the rendering error appearing. Copying the folder, renaming the original 'WTFF' and naming the copy 'WTF' will result in the original displaying the rendering error, and the copy displaying correctly. That is, the error is caused by the project's root folder not having the name it had when the project was first created. I'm editing everything in notepad++.
Am I missing something here? The only files here are plaintext .js and .html, and a few images. Why does the root folder's name have any influence at all on how WebGL content is rendered? Is there some way around this error? Does anybody know what's causing it? I'm pretty familiar with three.js, but I've never done anything directly in WebGL, so there might be something under the hood that I'm not aware of perhaps that involves the folder structure?
I didn't include any code since the problem doesn't seem to have anything to do with the actual code within the file (this problem has cropped up in every three.js project I've worked on). But let me know if you think it might help.
Thanks so much in advance! :)
Update: I went away for half an hour and came back - now the original WTF-named folder structure is also displaying the error. I'm forcing a reload with window.location.reload(true);, so I have absolutely no idea what is going on anymore.
So I think I may have found the solution:
While I'm not sure of the exact underlying causes, it seems the problem lies within Chrome for Android, and not within WebGL or Three.js.
It seems that Chrome for Android is caching the WebGL content and doing something with it that causes this error to crop up if the folder structure changes.
The problem can be fixed by clearing the Chrome cache (Settings -> Application Manager -> Chrome -> Clear Cache).
I hope this helps anyone who encounters this problem in the future!
My problem is quite generic: I know that I have a JavaScript issue somewhere. Now I don't know how to start searching where the problem could be. Usually I use the Firefox built-in or the Firebug Debugger. I know how to use it in general. But what I don't know is where to start. Where should I set breakpoints? I often have this kind of problem.
As an example which is my current problem: I have a page with an unordered list. Every second list item is empty for some reason. I can see that the page gets loaded with proper list items. But then some JavaScript seems to add those empty items. It's a Yii application that inserts some JavaScript directly into the HTML but let the browser also load jquery.js, bootstrap.js and yii.js. I haven't added any own JavaScript.
Now, as I said, I don't know where to start to find the problem. It might be that I have done something wrong with some configuration. But it could also be bug. I just want to figure it out somehow.
With my current issue, the best would be to have a breakpoint on a function like onInsertEmptyListItemToCounfuseDeveloper() ...
I don't want a solution to my current issue. I'd like to know in general, where and how to start finding JavaScript related problems. Especially, with third-party JS. With some applications (CMS, shops,...) there are sometimes a lot of JS files. This makes it more worser.
I hope this question is answerable and you can provide some experiences.
Not speaking 'bout the CMS right now, but in general my method is
1) If you did not add any of your onw scripts, just 3rd party, delete them all of your project e.g.
You've added jquery.js, bootstrap.js, yii.js so you remove them and then you test if all works fine, if so, add first one, for me it would've been jquery.js, test again, if no bug visible add second and so on. In this case you'll see in which file is some bug or sort of unexpected behaviour.
2) Here is the worst part, in the found file you should find the problem part. So, download the full version, not production, open it in editor, and start searching... The good news are that you don't have to look through all file, just find the event listeners in your devtolls or firebug and follow them.
All of this is just my experience , so if someone know better methods, I would like to hear 'em too.
It would depend on the code. Generally, if I have a function that is suspicious, I put breakpoints or console.log() at the beginning and end of the function and see if both are executed. Then I follow the logic down to figure out which piece is broken. It really depends on the code though.
I have a filegroup configured with Chirpy:
<FileGroup Name="1.min.js" Minify="False">
<File Path="test/temp1.js" />
<File Path="test/temp2.js" />
</FileGroup>
Now I set my master page to download this script 1.min.js. So far so good but the problem is when I edit some of the script in temp1.js, I have to come in this mash.chirp.config and save this file too for 1.min.js to take updated changes from temp1.js. This is tedious for me. If I forget to save at both place it causes countless minutes to figure out why is it not worknig. Is there any better approach to this?
I feel your pain and have had the same issues. Basically, the way I resolved this is to just tell the page to load the JS file directly. This seems to also play well with the js debugger because the files haven't been minified to a single line.
Then after the js file is complete, I add it to my mash.js.chirp.config file to be combined and minified. I know it's not the answer you were hoping for, but despite having to process it in this manor during development, the payout in the end feels worth it to me.
If you really wanted to force it, you could add code to the web projects properties, in the after build command line to invoke the chirpy console to compile this file. I've used the code for this before, but couldn't find it right now. Some info is here though; Oh and I wouldn't name your file .min.js unless you set minify = true. It could come back to bite you later on if you forget you did that.
I found the link to force the compiler;
http://www.annhoang.net/twitter-bootstrap-in-visual-studio-2010-with-chirpy-and-dotless/