Rails compiled javascript asset debug - javascript

In a production environment, where my javascript assets are bundled, when there is a javascript error that I catch, I get with it the line and column, for example:
d86c04c8f3.js:2:9588
Now, since the file is minified, etc., it's difficult to reverse-engineer and find the problematic line in the source code. Do the rails assets bundler has a way to reverse engineer, given the line/col to find the original line? It should be possible, since the asset-builder has all the information it needs.
We need a simple option, to run the
bundle exec rake assets:precompile RAILS_ENV=production
again, but this time specify line+col, and then the rake will output what is the source file + line which corresponds to that asset line+col. This way we can easily debug exceptions that are being catched on the client side (and that are sent to the server for monitoring purposes).
EDIT1
All the solution regarding doing something on the client side are infeasible, since we don't have access to the client - we're talking about exceptions that were discovered in production mode, live mode, and that are being sent to the server for monitoring purposes.

For debugging minified scripts there're sourcemaps, once loaded in browser - you can see unminified code there.
Sprockets planned support for sourcemaps in 4.0, which is still not released yet (only a beta).
Webpack does support sourcemaps and rails 6 switched to webpacker by default, so converting scripts to packs seems logical, albeit being a massive task for large projects
Update: once you have source map for your build, you can use a tool like:
npx source-map-cli resolve d86c04c8f3.js.map 2 9588
This will tell you where in your code that position in minified file maps in the form of:
Maps to webpack:///app/javascript/components/CountrySelector.jsx:14:0
fetch(`/control/autocomplete/countries`).then(r => r.json()).then(countries => this.setState({countries}))
^

Related

How to run (or build then run?) this Mozilla Rhino Debugger?

Would like to try this Rhino Debugger however having problems
I downloaded latest from here according to doc it says just simply run:
java org.mozilla.javascript.tools.debugger.Main [options] [filename.js] [script-arguments]
however..it's source code, so I probably need to build it first...(unless there are precompiled download out there?). Assuming I need to build it to get the jar file for debugger, I assume just build the build.gradle file at the root dir. Or run gradle tasks build ? When I do that I get error:
Execution failed for task ':checkstyleMain'.Unable to create a Checker: configLocation {C:\rhino\rhino-1.7.8\checkstyle.xml}, classpath {C:\rhino\rhino-1.7.8\buil
dGradle\classes\java\main;C:\rhino\rhino-1.7.8\buildGradle\resources\main}.
So..I'm a bit lost. Been ten years since I've worked with Java, but hopefully I'm missing something simple.
Any experienced Rhino JavaScript devs out there that can point me in the right direction? Should I just stick with using Eclipse? (Had that working, but I'm still curious about this debugger)
Download the latest rhino from the link you provided, at this time it is "rhino-1.7.8.zip". Unzip that and change directory to "rhino1.7.8/lib"; you need the "rhino-1.7.8.jar" in your CLASSPATH. Assuming you are in "rhino1.7.8/lib" that should be in your current folder, and you can then do
java -cp rhino-1.7.8.jar org.mozilla.javascript.tools.debugger.Main
Which should render like

Rails 4: Normal CSS/JS development workflow for asset pipeline?

I have an application originally developed in Rails 3 which I've updated to Rails 4. The asset pipeline still confuses me, and in particular, developing CSS and JS is rather painful because whatever changes I've made to mystyles.css or myscripts.js get overridden by the older versions compiled into application.css and application.js whenever I issue a rake assets:precompile.
I'm sure it's not intended that every time you tweak mystyles.scss.erb file (2 seconds in a text editor) and reload the browser (5 seconds) you should need to run rake assets:clean; rake assets:precompile (2 minutes, maybe?)
I imagine there's just some part of the upgrade process from Rails 3 to Rails 4 that I missed, or did wrong. I am using the non-stupid-digest-assets gem for a few reasons, and I hope it's not caused by that.
The answer from the official Asset Pipeline guide says:
In config/environments/development.rb, place the following line:
config.assets.prefix = "/dev-assets"
The prefix change makes Sprockets use a different URL for serving assets in development mode, and pass all requests to Sprockets. The prefix is still set to /assets in the production environment. Without this change, the application would serve the precompiled assets from /assets in development, and you would not see any local changes until you compile assets again.
In practice, this will allow you to precompile locally, have those files in your working tree, and commit those files to source control when needed. Development mode will work as expected.
I have this line commented out in my development.rb. I'll try re-enabling it and see whether that fixes things...

Faster loading with webos Enyo application

Platform and framework WEBOS ENYO 2.4
When I package up my application and test it on the emulator, the minification process seems to break some of the files.
I routinely have to run ares-package --no-minify ./Ameba-moonstone in order to get it to work.
I also noticed that moonstone library is quite large and around 400 files are downloaded on initial load .
Can you guys suggest anything I could do to get my application to load faster ?
The minification process uses uglify-js to minify the sources. You could create your own minification process using uglify-js or some other node module. The source for the minification and concatenation steps is in the enyo/tools directory. You can perhaps even do a better job minifying if you can identify moonstone modules you definitely don't need and leave them out of the build.

Typescript command line compilation without NodeJS

I was looking over Typescript and was a bit confused about how you could build your js files from the ts files via the command line.
It implies in the documentation that you can do it easily through nodeJS, which would be great if I wanted a dependency on nodeJS... So is there any way to compile it via the command line without having nodeJS or visual studio?
This may seem crazy to some, but I would just put a build script step to output the javascript at the end if possible then package it into my release, as I tend to do most of my javascript development with RubyMine and don't want a dependency on nodeJS or Visual Studio for my build server.
If you install the TypeScript Tools without Visual Studio installed on the machine, tsc.exe and its dependencies will still get installed.
You can also just xcopy deploy tsc.exe (I don't have a definitive list of its dependencies, but it's pretty straightforward to figure out, or just copy everything that gets installed to the SDK folder) to a build server. The only thing unexpected you would need is msvcr110.dll, which you may or may not need to copy to tsc.exe's path.
The link in Ryan's answer is now heavily outdated and if you use it will generate a TS1005 error.
Here's what you want https://www.microsoft.com/en-us/download/details.aspx?id=55258 and it is still put in the same Program files x86 / Microsoft SDKs directory, and for me at least was not added to my path.

How can I compile CoffeeScript from .NET?

I want to write an HttpHandler that compiles CoffeeScript code on-the-fly and sends the resulting JavaScript code. I have tried MS [JScript][1] and IronJS without success. I don't want to use [Rhino][2] because the Java dependency would make it too difficult to distribute.
How can CoffeeScript be compiled from .NET?
CoffeeScript-dotnet
Command line tool for compiling CoffeeScript. Includes a file system watcher to automatically recompile CoffeeScripts when they change. Roughly equivalent to the coffee-script node package for linux / mac.
CoffeeSharp
Includes a command line tool similar to CoffeeScript-dotnet as well as a http handler that compiles CoffeeScripts when requested from an asp.net site.
SassAndCoffeeScript
Library for Asp.net mvc that compiles sass and coffeescript files on request. Also supports minification and combination.
Manually Compile With IronJS
IronJS is a .NET javascript interpreter that can successfully load the CoffeeScript compiler and compile CoffeeScript.
Manually Compile With Node.js
Get the node binaries and add the bin directory to your path. Write a node.js script to load the CoffeeScript compiler and your CoffeeScript files and save the compiled javascript.
CoffeeScript is now fully supported by Chirpy:
http://chirpy.codeplex.com/
You specifically said that you wanted to write a runtime compiler, so this may not be exactly what you are looking for, but if the main point is to have a way to generate the javascript result, the Mindscape Web Workbench is interesting. It is a free extension for Visual Studio.NET 2010 and available in the Extension Manager. It gives Intellisense, syntax highlighting and compiles to JS as you write. I am just getting started using it but looks promising. Scott Hanselman talks about it here. It also supports LESS and Sass.
I've managed to compile CoffeeScript from .NET using IKVM, jcoffeescript and Rhino. It was straightforward, except that the JCoffeeScriptCompiler constructor overload without parameters didn't work. It ran OK with a java.util.Collections.EMPTY_LIST as parameter.
This is how I did it:
Download IKVM, jcoffeescript and Rhino.
Run ikvmc against js.jar, creating js.dll.
Run ikvmc against the jcoffeescript jar.
Add a reference to the jcoffeescript dll in Visual Studio. More references may be needed, but you will be warned about those.
Run new org.jcoffeescript.JCoffeeScriptCompiler(java.util.Collections.EMPTY_LIST).compile() in your code.
The next step would be to create a build task and/or an HTTP handler.
Check out the new coffeescript-dotnet project, which uses the Jurassic JavaScript implementation.
Since the CoffeeScript compiler now runs on Internet Explorer, after a couple of recent tweaks, it should be good to go within other MS-flavors of JavaScript as well. Try including extras/coffee-script.js from the latest version, and you should be good to go with CoffeeScript.compile(code).
I tried running the bundled extras/coffee-script.js through Windows Based Script Host (or just wscript) and it didn't report any issues. I then added this line:
WScript.Echo(CoffeeScript.compile('a: 1'));
at the end of the file and run it through wscript again and it printed the resulting JavaScript correctly.
Are you using COM objects? Can you share some more of the code responsible for initialising the MScript object reference?
CoffeeScript in Visual Studio 2010
It's Chirpy's fork (chirpy is a tool for mashing, minifing, and validating javascript, stylesheet, and dotless files)
"OK, I think I got it working on my fork, based mostly on other peoples' work. Check it out:
http://chirpy.codeplex.com/SourceControl/network/Forks/Domenic/CoffeeScriptFixes"
from http://chirpy.codeplex.com/workitem/48
I don't have a direct answer, (I hope you find one), but maybe take a look at the following to see how it might be done.
Jint - JavaScript interpreter for .NET
Using IKVM to compile Rhino would get rid of the Java runtime requirement.
jcoffeescript. I haven't looked at jcoffeescript, but I think it depends on JRuby and Rhino. You could possibly IKVM.NET this as well.
IronJS now supports CoffeeScript and is generally faster than the other .NET JS engines:
I have a blog post about wiring the two together here:
http://otac0n.com/blog/2011/06/29/CoffeeDemo-A-Simple-Demo-Of-IronJS-Using-CoffeeScript.aspx
My main editor is VS 2010 and I love the WorkBench extension. it's nice it auto compiles to js everytime you hit save on your .coffee file, also introduces you to SASS which I had read about but never got around.
They offer a pay version to that will autmaically shrink/minify your js and css files as well, since your.coffee and .scss are your source files anyway.
I'd encourage all VS users to go ahead and install this especially if you run VS 2010.
The only knock, and someone please correct me or enlighten me, is that with .coffee syntax it's not highlighted the way say html, js, c# code is. it might be because I am using a color scheme from http://studiostyl.es/ and for the record http://studiostyl.es/schemes/coffee- just shares the name coffee no special syntax highlight support for coffeescript that I am aware of. but no reason not to start using the workbench addin today!
Okay workbench website claims: syntax highlighting so again maybe it's the studiostyle.es i chose.
I know this is old but I came here to answer a very similar question: How do I get my CoffeeScript to compile using Visual Studio 2012 Express? Note that the free Express version does not allow any extensions so I could not continue to use the Mindscape Workbench extension that had served me well for quite some time.
It turns out to be very easy. Just use NuGet to install the Jurassic-Coffee package and off you go.
One advantage of using this package over mindscape workbench is that you can reference your coffee directly from the script tags in the html. It minifies and caches the compiled JS so you only do work if the requested coffee file has changed.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="home.coffee"></script>
</head>
The mindscape workbench allows you to bundle together different coffescript files which is very handy for modularising your coffeescript. You can also do this using Jurassic Coffee by utilising the #= require statement to include other coffee module files, for example:
#= require Classes\GridWrapper.coffee
class UsersGrid
constructor:->
#grid = new GridWrapper()
I think having the #= require staement in the coffee file is actually cleaner and clearer than the mindscape workbench approach, which kind of hides all this behind their interface so you forget easily what dependencies you have.
Note
There is one potential gotcha. The Nuget installer will put in an httphandler entry into your web.config that may not be compatible with IIS Express integrated managed pipeline mode.
You might therefore see the following error:
An ASP.NET setting has been detected that does not apply in Integrated
managed pipeline mode.
To fix this just remove the handler shown below.
<system.web>
//other stuff
<httpHandlers>
<add type="JurassicCoffee.Web.JurassicCoffeeHttpHandler,JurassicCoffee" validate="false" path="*.coffee" verb="*" />
</httpHandlers>
</system.web>
You could simply write a port of it to C#. I have ported Jison to C# (which is the underlying project that makes CoffeeScript run). I would think it may be a bit different, but both Jison parsers work the same.
I have not pull requested it back yet to Jison's main architecture, but will be doing so soon.
https://github.com/robertleeplummerjr
Instead of shelling out to CScript you could shell out to Node.js (here are self-contained Windows binaries)
I've tried to compile the extras/coffee-script.js file, unmodified, to jsc, the JScript.NET compiler for .NET, and I got many errors. Here are the noteworthy ones:
'require' is a new reserved word and should not be used as an identifier
'ensure' is a new reserved word and should not be used as an identifier
Objects of type 'Global Object' do not have such a member
Other errors were caused by the above said errors.
You might also want to check out jurassic-coffee, it is also a coffee-script compiler running the original compiler in jurassic.
It features sprocket style "#= require file.coffee" or "#= require file.js" wich can be used to keep .coffee files modular and combined right before compilation as well as embedding .js files.
It sports a HttpHandler with file watchers for .js and .coffee files that keeps track of what .coffee files needs to be re-compiled and pass through to the compiled *.js files for the rest.
jurassic-coffee is also available as a Nuget package
https://github.com/creamdog/JurassicCoffee
I've done an HttpHandler that uses Windows Script Host behind the scenes: https://github.com/duncansmart/LessCoffee and works great (it also compiles *.less files).
It's on NuGet: http://nuget.org/List/Packages/LessCoffee
It's based on this simple wrapper: https://github.com/duncansmart/coffeescript-windows
I wrote an inteructive shell using v8.
https://github.com/mattn/coffee-script-v8
This work as single executable file. (Don't use external files)
It can't use require(). But enough to learn coffeescript.

Categories

Resources