How to Debug Javascript in a Rails Gem

halfbloody

Jens

Posted on February 16, 2024

How to Debug Javascript in a Rails Gem

I encountered the issue when trying to get the morph feature of Turbo 8 to work. The page just kept refreshing and I didn't understand why. There were no good tutorials yet so I had to dig into the gem.

First, I opened it with

bundle open turbo-rails
Enter fullscreen mode Exit fullscreen mode

There is see that the gem has 3 javascript files:

app/assets/javascripts/turbo.js
app/assets/javascripts/turbo.min.js
app/assets/javascripts/turbo.min.js.map

I added some log statements in turbo.js but realized that I have to change the minified version turbo.min.js. For convenience, I changed the turbo.js file as it's easier to read and recompiled the min.js file with terser.

npm install terser -g
Enter fullscreen mode Exit fullscreen mode
terser turbo.js -o turbo.min.js --compress --mangle 
Enter fullscreen mode Exit fullscreen mode

After that I was able to add log statements to the gem's javascript and figure out the issue.

After you play with a gem don't forget to reset its code.

πŸ’– πŸ’ͺ πŸ™… 🚩
halfbloody
Jens

Posted on February 16, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Strong Parameters in Rails β€” down the rabbit hole
softwaredevelopment Strong Parameters in Rails β€” down the rabbit hole

December 11, 2019

When an Array is not an Array
rails When an Array is not an Array

April 14, 2020