TehnoBlog.org

Google Chrome: missing jquery.qtip.min.map file explained

explaining and solving the problem with qtip missing map file / jquery.qtip.min.map not found

Google Chrome Browser Logo

Are you a Web Developer? Did you notice recently when you start Dev Console (F12 or CTRL+SHIFT+I or right click on any page and choose ‘Inspect Element’) a missing jQuery component jquery.qtip.min.map file? And you are puzzled because your entire web project does not use qtip library at all, so why all of a sudden you see it? Read this article for an explanation…

GOOGLE CHROME WORLD

First of all, first step you should perform is to verify that this is not happening in Firefox, Internet Explorer or any other browser, except Google Chrome. Once you verify this (great!), you can be 100% sure that the error about missing resource is not related to your script/project files!

http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0//var/www/qtip2/build/tmp/tmp-11954ltx3nmo/jquery.qtip.min.map 404 (Not Found)

cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0//var/www/qtip2/build/tmp/tmp-11954ltx3nmo/jquery.qtip.min.map:1

Good news, in case that your project is actually using minimized version of a qTip tooltip (or any other jQuery or JavaScript) plugin, is that this error will not show up to your users/visitors in any case, unless they fire up Dev Tools debugging console and try to inspect your programming and designing skills. However, question about why it occurs if your project does not use it remains a true mystery.

WHY, HOW, AND FOR WHAT REASON IS THIS HAPPENING?

Explanation is really simple: Have you recently installed any Chrome Extension, by the way? Yes? Of course you did, and chances are that that extension is, in fact, using qTip plugin in compressed/minified form.

Google Chrome Extensions, or Apps for short, are just like any other Web App out there. Built around usual web components such as HTML, CSS, Flash and JavaScript files. Then, when you install an actual extension into Chrome, you are in fact using many of these files and libraries.

jQuery MAP files, along the source files are used as a pointers when you debug your js script errors, so that in Dev Console you do not see an actual minimal version of the code with strange variables and functions named like a,b,c,x,z. This helps developers to easily spot and debug the actual code, otherwise it would be rather unpleasant and impossible for an average human to read such a condensed code in the first place.

Recently, I have installed a Clear Cache extension for Chrome. This extension is really helpful, but gave me this little headache for some time while I was trying to figure why is my project suddenly having unidentified script in it. In the extension’s options page there are a lot of Tooltip mouse hover help hints, which are generated with this plugin.

SOLUTION

Open up your installation folder of Google Chrome (or if you are like me, using Chrome Portable version, just open the folder you installed/extracted it in) and search for a jquery.qtip.min.map file. Found it? You should not be surprised by now :)

jquery.qtip.min.map Fix (Click to enlarge)

Open it in your favorite code editor (Notepad ++ pictured above) and simply delete this line. Problem should be solved! If your are solving this problem in your project, you should download jQuery map and source files and include them along with your version of jQuery. Remember, never mix up different map and source files with different jQuery libraries!

Hope this will help you track this issue and fix a mysterious error ;)