I have developed a web application which uses lots of JavaScript plugin. Consist of history.js, requirejs, jquery, bootstrap, and etc. Most of the time the application is functioning properly. But it is also frequently run into errors.
I have tried my best to track the bug. But the problem is it is very hard to reproduce the bug. It just happen randomly with different kind of problem and all the errors that I caught are report pointing to the plugin like jquery.js, history.js and etc. Not on the part of code done by me. There is no way I can get the clue to fix it.
So, what are the good method I can better tracking & fixing the bugs in JavaScript?
Thank you.
Related
I am working on a large web application.
It's been in production now for close to 2 years.
Recently, we have started getting complaints from users regarding some weird display issues.
It seems on certain screens(random as far as I can tell), when Ajax requests being made there is a weird flickering graphic that appears.
Here is a screenshot:
I don't believe this to be a CSS/JS issue.
All of our users use the latest version of chrome
We use Kendo UI and Jquery, but no other frameworks
It happens frequently, but is unrepeatable
It affects multiple users across a number of computers
Has anyone experienced this, or something similar?
This doesn't resolve the actual problem, but fixes the issue. It appears to be an issue with the Chrome setting "User Hardware Acceleration". Shutting this off fixes the problem.
Hopefully a good performance analysis and some refactoring will fix the problem and allow me to turn this feature back on.
this is my first time asking a question through stackoverflow, while I've been a reader for years. It's the first time I really couldn't find an answer to my problem through the search function and it is probably because it's specific to my website.
I don't know when or after which modification I did, some javascript modules started behaving weird. The website would load partially the first time you visit it on chrome and then will load correctly if you refresh the browser. This won't happen on Firefox where the website will always be uncomplete. All javascript modules aren't loading correctly.
Website URL: www.levicechocolat.com
What I've tried so far:
Disabling Prestashop's Smart Caché for JavaScript features. This fixed 1 script, the navigation hover menu so I'll keep it off.
Disable CSS Smart Caché didn't fix anything, I kept it on. Same for all other prestashop optimizing features, tried one by one enabling/disabling and the only change I noticed was the above mentioned so that's the unique PS optimizing feature I kept off. I'll keep HTML compression off till I solve this issue.
Read that putting JS code at the end just before the </body> tag may fix this problem but it didn't.
I'd really appreciate if you can help me to figure this out. If you need me to post a code just let me know and I will.
Thank you very much for your help. If you live in Chile or come to Chile and you help me out I'd be glad to offer you some chocolates :).
Most probably there are some issues with the theme or some modules installed.
On Chrome it's working correctly for me and I see no Javascript errors. The wierdness is happening on Firefox, the homepage is not loading correctly and in developer console I see this javascript error: ReferenceError: writeCookie is not defined
You definetly need to debug this. What I recommend doing is moving your store on a local development machine and do the following:
Activate Prestashop's development mode: edit config/defines.inc.php at line 29 change: define('_PS_MODE_DEV_', false); to true: define('_PS_MODE_DEV_', true);
From Back Office > Advanced Parameters > Performance disable all CCC (COMBINE, COMPRESS AND CACHE) options - mainly "Move JavaScript to the end" and "Compress inline JavaScript in HTML" give errors on some themes
If it's still not working right (check for errors on Firefox and Chrome) and no other javascript errors show up try to "Disable non PrestaShop modules" from Advanced Parameters > Performance > DEBUG MODE
You can also have a look at the theme's custom javascript code maybe you can spot something there.
I hope this sheds some light on your issues.
it might be an issue with http and https.
Browsers might complain or don't load at all if resources are coming from mixed sources (secured and unsecured).
If your site is unsecured (http), try loading only resources (scripts, images) from unsecured sources.
If you cannot avoid loading resources from secured sources (https), you should consider get a SSL certificate and secure your website.
I am trying to validate the JavaScript on my website. The scripts do not throw any errors and run fine on Chrome and Firefox (latest stable version). However, the animated parts absolutely do not work on IE (9)[*1][*solved]. I have used jQuery and jQueryUI for the animation and had hoped that it would be cross browser compatible.
Usually I would not have cared abut IE users, but liked the idea of folks at anybrowser.org and thought of sticking to a standard instead of using the lowest common denominator and leave the graceful degradation to the browsers / JS engines. My page is HTML5 compliant according to the w3c validator and I wanted to do the same with JavaScript, but could not find an acceptable way to do it.
Why JSLint did not work -
It will not take the page and check it like w3c validator.
So there is no way to check jQuery referenced script. (There are a few SO posts on this).
I did find an ECMA-264 test page that would check the browser, but not my JavaScript.
The question after all the preamble is: How do I validate the Javascript on my webpage? Is there an authoritative validator for JavaScript?
*1 Added: The minification has nothing to do with the script not working on IE9. Even the unminified version does not work.
*Solved: The problem with the specific page was solved by this comment.
This started as "What is Javascript?" got closed here and migrated to Programmers. Thanks to YannisRizos for helping me to split the original question to something that was acceptable between Programmers and SO.
A test suite. No really.
If you want to ensure your javascript runs perfectly in every target environment, then you write a test suite for your code and make sure it passes in all your target environments.
A test suite helps find where your code breaks when run on different platforms. And therefore helps you fix it.
But assuming you want something that is less work, http://www.jshint.com/ is your best bet.
Or http://www.jslint.com/ if you like getting yelled at.
But honestly, no validator will ever be able to ensure that your code runs without error and exactly how you expect everywhere. Simply because your code follows best practices correctly, that doesn't mean it will work in an old version of IE.
Standards evolve, but an old browser that never updates get stuck with whatever standard was out at the time that the browser maker may or may not have even implemented successfully or accurately.
Testing, automated or manual, is the only way to ensure things work universally.
I've searched a bit for this and tried to implement a self-made solution but so far haven't found to be confident with it.
What I need is to write integration tests in Ruby on Rails which interact with JavaScript and get programmatic ways to assert some behaviors. I'm using Test::Unit for the controller/models part but I'm struggling to test some jQuery/JavaScript behaviors used by my app. Mainly it consists in ajax calls and interactions in the UI which updates some sets of information.
I haven't found a solution which makes me confident and which integrates nicely with autotest and the whole red-green process, so for now most parts of my client-side code is untested and that's making me nervous (as it should be :P).
So, does anyone have suggestions for best practices on this issue? Unit testing JS is a bit tricky, as Crockford points out, because it dependes heavily on the current state of the UI and etc and as AFAIK even he hasn't found a good way to implement decent testing...
Shortly: I need to implement tests for some UI behavior which depends on Ajax, integrating with autotest or some other CI tool and haven't found a good and elegant way to do it.
Thanks all for the attention,
Best Regards
AFAIK, outside of a combination of Capybara with Selenium Web-Driver there is very few options for automated testing of JS code.
I use cucumber with capybara and selenium web-driver and because selenium-webdriver actually launches firefox or chrome to go through testing a particular page with ajax call, It does take significantly longer to run through a suite of tests.
There are some alternatives but they dont work all the time or for every situations.
For instance: Capybara with envjs
In April 2011 the thoughtbot guys updated their quest for javascript testing.
Akephalos has fallen out of favor for the following reasons:
Bugs: as previously mentioned, there are bugs in htmlunit,
specifically with jQuery’s live. Although all browser implementations
have bugs, it’s more useful if tests experience the same bugs as
actual browsers.
Compatibility: htmlunit doesn’t fully implement the feature set that
modern browsers do. For example, it doesn’t fully handle DOM ranges or
Ajax file uploads.
Rendering: htmlunit doesn’t actually render the page, so tests that
depend on CSS visibility or positioning won’t work.
Performance: when most of your tests use Javascript, test suites with
htmlunit start to crawl. It takes a while to start up a test with
Akephalos, and a large test suite can easily take 10 or 15 minutes.
So they rolled their own solution which is open source - capybara-webkit. It's still fairly new but it looks like the way to go now.
This article recommends Akephalos.
I have used cucumber and capybara with selenium. This was very frustrating because selenium did not seem to be able to see dynamically generated javascript, despite the fact that capybara was supposed to be waiting for it. That was in January 2011. Things may be different now.
Currently, I am using cucumber and capybara with akephalos. So far, it has been very difficult because 1. it is headless, so you can't see progress. Capybara's "save_and_open" call has helped to a degree. 2. jQuery and akephalos don't seem to play that nicely together. For instance, triggering on a radio button with jquery's .change() works fine in chrome, but doesn't in akephalos. Maybe this is intentional because I later heard somewhere that it doesn't work in IE. I fixed the issue by using .click() instead of .change() for the radio button but since the .change function was set up to run on a bunch of questions, I had to code specifically to get it to work for the test.
The bottom line for me is that automated javascript acceptance testing in a rails env is still immature and possibly more work that it is worth.
I am developing a web application for web designing. One part of it includes changing CSS styles on the run and saving the same back to server.
I see that, first part of my motive is implemented there in firebug, where I can view CSS style rules applied to a particular HTML element and can change them to view the effect.
An earlier question at SO lead to me firebug lite source code https://getfirebug.com/firebug-lite-debug.js , which is far less confusing than full version of firebug.
My question was that, is there any way I can get documentation of the firebug/firebug lite code which can speed things up for me.
After some googling I found out that there is Firebug API
http://getfirebug.com/developer/api/firebug1.6/
But don't know how much useful it is for me.
Any alternative way to do this is also welcome.
Firebug uses a BSD-style license, which pretty much means you can use their code in your application without too many restrictions:
http://en.wikipedia.org/wiki/BSD_licenses#Proprietary_software_licenses_compatibility
I would suggest you contact the developers of Firebug directly. I'm sure they would be interested in providing assistance with what you are trying to accomplish.
In my opinion, the ability to sync changes to a file or server is the one thing that's missing from this powerful tool, and I'm interested to see what the final result looks like.
Check out the Backfire project, which "allows you to save CSS changes made with Firebug, Webkit Developer Toolbar or any other clientside debugging tool." The project page says that it was developed to be able to support various backends. The Backfire source code is available under an MIT license.
Submitting a possible answer to my own question.
Found following which gives a small amount of information about Firebug internals.
https://developer.mozilla.org/en/Firebug_internals