I want to use Modernizr.load function with v3, as v3 adds some tests not present with previous 2.8.x versions. I used this load function without any issue on those previous versions.
I go the page http://v3.modernizr.com/, check the tests I want to use, but I cannot find the APIs nor in the list of selectable APIs, nor in the code when I download the development version.
But still, it is present on their documentation on http://v3.modernizr.com/docs/
Have i done something wrong? Should I download another js file?
Modernizr.load was removed from v3.0
Related
I need access to the bootstrap entry points but also want access to the nice features that the Firefox Add-on SDK provides.
What's the best way to go about this?
After more investigation, the most elegant option seems to be the use of the experimental --templatedir=TEMPLATEDIR option that appears perfectly suited for doing precisely this (using a custom bootstrap.js file). This allows me to hook into those install/uninstall functions (if necessary) and use the rest of the SDK like normal.
Edit: someone asked me to give a clarification on how cfx is to be used with --templatedir.
Copy somewhere the directory called app-extension that contains the bootstrap.js, application.ini, and install.rdf files in it from the downloaded SDK.
Run your cfx xpi command like regular but add --templatedir=path/to/cloned/directory to the options.
You can use the Loader. This is the same thing that the SDK uses and you can actually set it up to be able to load SDK modules. Although IIRC this isn't well documented and there are some subtle details on how you need to do the setup or some SDK modules will not work correctly.
I suggest you read the linked documentation above and then use the SDK bootstrap.js as a base and strip it down as needed (e.g. remove all those fancy test stuff).
Also, to give another example, #erikvold (who works or worked on the SDK team as well) implemented minimal support for internally loading (some) SDK modules in Scriptish.
I'm seeing error messages about a file, min.map, being not found:
GET jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
Screenshot
Where is this coming from?
If Chrome DevTools is reporting a 404 for a .map file (maybe jquery-1.10.2.min.map, jquery.min.map or jquery-2.0.3.min.map, but can happen with anything) first thing to know is this is only requested when using the DevTools.
Your users will not be hitting this 404.
Now you can fix this or disable the sourcemap functionality.
Fix: get the files
Next, it's an easy fix. Head to http://jquery.com/download/ and click the Download the map file link for your version, and you'll want the uncompressed file downloaded as well.
Having the map file in place allows you do debug your minified jQuery via the original sources, which will save a lot of time and frustration if you don't like dealing with variable names like a and c.
More about sourcemaps here: An Introduction to JavaScript Source Maps
Dodge: disable sourcemaps
Instead of getting the files, you can alternatively disable JavaScript source maps completely for now, in your settings. This is a fine choice if you never plan on debugging JavaScript on this page.
Use the cog icon in the bottom right of the DevTools, to open settings, then:
You can remove the 404 by removing the line
//# sourceMappingURL=jquery-1.10.2.min.map
from the top part of your jQuery file.
The top part of the jQuery file will look like this.
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//# sourceMappingURL=jquery-1.10.2.min.map
*/
Just change that to
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license */
Purpose of a source map
Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files.
(Read more on this here)
As announced at jQuery 1.11 and 2.1 Released, the source map comment will be removed so the issue will not appear in newer versions of jQuery.
Here is the official announcement:
One of the changes we’ve made in this beta is to remove the sourcemap
comment. Sourcemaps have proven to be a very problematic and puzzling
thing to developers, generating scores of confused questions on forums
like StackOverflow and causing users to think jQuery itself was
broken.
Anyway, if you need to use a source map, it still be available:
We’ll still be generating and distributing sourcemaps, but you will
need to add the appropriate sourcemap comment at the end of the
minified file if the browser does not support manually associating map
files (currently, none do). If you generate your own jQuery file using
the custom build process, the sourcemap comment will be present in the
minified file and the map is generated; you can either leave it in and
use sourcemaps or edit it out and ignore the map file entirely.
Here you can find more details about the changes.
Here you can find confirmation that with the jQuery 1.11.0/2.1.0 Released the source-map comment in the minified file is removed.
Download the map file and the uncompressed version of jQuery.
Put them with the minified version:
Include minified version into your HTML:
Check in Google Chrome:
Read Introduction to JavaScript Source Maps
Get familiar with Debugging JavaScript
The new versions of jQuery require this file http://code.jquery.com/jquery-1.10.2.min.map
The usability of this file is described here http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
Update:
jQuery 1.11.0/2.1.0
// sourceMappingURL comment is not included in the compressed file.
If you want to get source map file different version, you can use this link
http://code.jquery.com/jquery-x.xx.x.min.map
Instead x.xx.x put your version number.
Note: Some links, which you get on this method, may be broken :)
As I understand the browser, Chrome at least, it doesn't disable the source mapping by default. That means your application's users will trigger this source-mapping request by default.
You can remove the source mapping by deleting the //# sourceMappingURL=jquery.min.map from your JavaScript file.
After following the instructions in the other answers, I needed to strip the version from the map file for this to work for me.
Example: Rename
jquery-1.9.1.min.map
to
jquery.min.map
I was presented with the same issue. The cause for me was Grunt concatenating my JavaScript file.
I was using a ;\n as a separator which caused the path to the source map to 404.
So dev tools was looking for jquery.min.map; instead of jquery.min.map.
I know that isn't the answer to the original question, but I am sure there are others out there with a similar Grunt configuration.
jQuery 1.11.0/2.1.0 the // sourceMappingURL comment is not included in the compressed file.
Assuming you've checked the file is actually present on the server, this could also be caused by your web server restricting which file types are served:
In Apache this could be done with with the <FilesMatch> directive or a RewriteRule if you're using mod_rewrite.
In IIS you'd need to look to the Web.config file.
I just bought WebStorm 5 and so far have been really enjoying its Inspection features. One hitch I've run in to when developing my Chrome extension is that it doesn't recognize the chrome variable:
Is there a way I can add the chrome variable to the Inspector so that it can autocomplete as I type? I'm guessing I would need to add Chromium as an External Library but I'm unsure where to start.
First Time Setup
Open the Settings dialog (File > Settings)
Click Languages & Frameworks > Javascript > Libraries
Click Download
Make sure TypeScript community stubs is selected
Select chrome from the list (you can find it quickly by just typing chrome)
Click Download and Install
Click OK to close the Settings dialog.
Steps 2-6 illustrated below:
In Subsequent Projects
In any subsequent project, you just:
Open the Settings dialog again (File > Settings)
Click Languages & Frameworks > Javascript > Libraries again
Check chrome-DefinitelyTyped
Click OK to close the dialog.
Steps 2-4 shown below:
UPDATE 2:
It's now supported out of the box, see the complete answer below.
UPDATE:
There is a more complete stub file that can be added as a library to get code completion. It's a part of the Closure Compiler project. Download chrome_extensions.js.
See also the feature request for WebStorm to add this library automatically from the IDE.
You need to get the JavaScript library for the Chrome API somewhere, or use a stub to get basic completion.
Library or a stub can be configured in WebStorm.
I found the JSON files with the Extension API. One can write a script that will build JS stubs from these JSON files, the stubs can look like the basic version linked on GitHub above, but with the automatic generation they will contain almost complete API and JSDoc comments so that documentation like here can be viewed directly in the IDE.
JSON => JavaScript object stubs mapping is pretty straightforward in this case and writing this kind of converter should not take more than a day (or several hours for the skilled coder).
If someone goes ahead and implements it, please post the link to the results here.
WebStorm should one day accept json definitions directly to enable autocomplete for the functions defined. Meanwhile, you can use the program at https://github.com/QuickrWorld/jsgen to convert the json files to js to enable auto-complete for the chrome extension APIs.
For writing AppScript, functions and classes such as DriveApp, SpreadsheetApp, there is a plugin in WebStorm or Intellij called google-app-script.
The installation method is the same as above. On the other hand, you should mark or open the .gs file as JavaScript. (July 2017)
I have an asp.net mvc 3 project that I am developing in Visual Studio 2010. In the scripts section I have a library that I wrote. I made a change to the library. However, I notice that the change does not show up when the program is run in the browser. When I look in the debugger of firefox it shows the old version loading. I have tried cleaning the project, rebuilding, building, closing firefox, ctrl f5 on the page. How can I get the current version of the script to load?
There are two commonly accepted ways of doing this:
Option 1
Best option, in my opinion. Give the script a version number. Must remember to change the version number with every release
<script src="mylib_v4.3.js"></script>.
Option 2
The other is nowhere near as good because it can kill caching. Some browsers will re-request the script each invocation. (I really don't know the which browsers have which behavior.)
<script src="mylib.js?version=4.3"></script>
Option 3
The other option is to keep your scripts in a version directory.
Actually, in my PHP code I have
<script src="/js/ver##VERSION##/mylib.js"></script>
and my php code does a replace of ##VERSION## with the release version. This way my build scripts create a directory tree to upload and set paths right. If you have server side support, this method works very well.
Add a "version parameter" to the script reference :
<script src="/scripts/myscript.js?version=0.2"></script>
That method has the advantage of also doing the job when the your application is being used by clients, and you want to force their browsers to get the newest version when you update your app.
Clear your browser cache and disable it.
I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.
The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo
Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...
Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.
Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.
Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.
What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.