Troubleshooting Javascript Errors

Intro

If you notice an issue with our player and you see a JavaScript error on the browser Developer Tools console, it doesn’t automatically mean the fault is in our plugin. Some of the JavaScript errors are so severe that they just stop any other JavaScript from working. In that case you need to troubleshoot your website.

Here is our down-to-basics approach to it which we use to troubleshoot sites where we have little access with minimal resources and maximum speed.

Troubleshooting steps

Here are the steps we use to troubleshoot JavaScript issues on any site. It requires good understanding of HTML and some troubleshooting skills. If you are unsure about that, check our general troubleshooting instructions.

Advantage is that it won’t disrupt your site and that you can do these changes on localhost most of the time, so the file editing is very quick.

1. Disable any JS concatenation or minify.
   1. Perhaps that already fixes the issue? Let us know what you use and we will post some suggestions to you.
2. Open the URL where you can see the issue.
3. Open the page HTML source code (View Source), copy it and save it as a HTML file. Store it on your site like: http://mysite.com/test.html
   1. If the video is not using FV Player Pro Vimeo or CloudFront integration, just store it on your http://localhost (if you use Windows, get XAMPP, if you use Mac, get MAMP to have your http://localhost running), but using your site domain will provide a better testing environment.
4. Now that you have the HTML version of your site ready we can check what script is causing the issues. But first open it and make sure you are able to reproduce the same issue with playback.
5. Open the HTML in some editor which supports regex well, such as Komodo Edit.
6. Replace “(<script[\s\S]*?</script>)” with “<!–DIS\1END–>” this will disable any JavaScript by putting it into a <!–DIS …. END–> HTML comment.
7. Open your HTML page again and double check on Developer Tools Network panel that no JavaScript is loading.
8. Now remove the <!–DIS …. END–> HTML comment around jquery.js, jquery-migrate.min.js, fv-flowplayer.min.js, fv_player_pro.min.js.

Does your video play now? If it does then there is indeed just some conflict in JavaScript which causes this. Now it’s time to find what JavaScript is causing that.

1. Remove the <!–DIS …. END–> HTML comment around another commented out script.
2. Does the video still play? Go back to step 1. in this section. If it doesn’t play, put the comment around that script back and proceed to next script using step 1. in this section.
3. If you got to this step, then you have removed almost every HTML comment around almost every script tag and the ones which have to stay commented for our player to keep playing the video are the ones which cause the issue.

Now is a time to look directly at the conflicting scripts.

1. Open the URL of the first commented out script, copy the content and paste it to a new <script> tag below the commented script.
2. If the script is minified you can use jsbeautifier.org to format it.
3. Now you can use the same “divide and conquer” pattern on the actual source of the script to find the lines which cause the conflict.
   1. In one of our recent Pro support tickets we found a script in the theme used a bad syntax for a jQuery selector like this: jQuery(‘a[href=#top]’).click(function(){ instead of jQuery(‘a[href=”#top”]’).click(function(){ that was causing an error reported in jquery.js. The error was so severe that it didn’t said it’s in the linked theme script.

Conclusion

This way you are able to solve any issue. Often the issue was on your site all the time but you haven’t noticed as you haven’t used any serious plugin which uses JavaScript on your site front-end before.