Giter Site home page Giter Site logo

aburka / xray-rails Goto Github PK

View Code? Open in Web Editor NEW

This project forked from brentd/xray-rails

0.0 1.0 0.0 233 KB

A development tool that reveals your UI's bones

License: MIT License

Ruby 47.71% CoffeeScript 12.73% CSS 32.95% HTML 5.68% Shell 0.05% JavaScript 0.88%

xray-rails's Introduction

Xray-rails

Gem Version Build Status

Reveal your UI's bones

The dev tools available to web developers in modern browsers are great. Many of us can't remember what life was like before "Inspect Element". But what we see in the compiled output sent to our browser is often the wrong level of detail - what about visualizing the higher level components of your UI? Controllers, view templates, partials, JS templates, etc.

Xray is the missing link between the browser and your app code. Press cmd+shift+x (Mac) or ctrl+shift+x to reveal an overlay of the files that rendered your UI, and click anything to open the file in your editor. See Xray in action.

Screenshot

Current Support

Xray is intended for Rails 3.1+ and Ruby 1.9+.

So far, Xray can reveal:

  • Rails views and partials
  • Javascript templates if using the asset pipeline with the .jst extension

Installation

Xray depends on jQuery.

This gem should only be present during development. Add it to your Gemfile:

group :development do
  gem 'xray-rails'
end

Then bundle and delete your cached assets:

$ bundle && rm -rf tmp/cache/assets

Restart your app, visit it in your browser, and press cmd+shift+x (Mac) or ctrl+shift+x to reveal the overlay.

Note about config.assets.debug

By default, Xray will insert itself into your views automatically. To do this, config.assets.debug = true (Rails' default) must be set in development.rb.

Otherwise, you can insert Xray's scripts yourself, for example like so in application.js:

//= require jquery
//= require xray

Configuration

By default, Xray will check a few environment variables to determine which editor to open files in: $GEM_EDITOR, $VISUAL, then $EDITOR before falling back to /usr/local/bin/subl.

You can configure your editor of choice either by setting one of these variables, or in Xray's UI, or in an ~/.xrayconfig YAML file:

:editor: '/usr/local/bin/mate'

For something more complex, use the $file placeholder.

:editor: "/usr/local/bin/tmux new-window 'vim $file'"

How this works

  • At run time, HTML responses from Rails are wrapped with HTML comments containing filepath info.
  • A middleware inserts xray.js, xray.css, and the Xray bar into all successful HTML response bodies.
  • When the overlay is shown, xray.js examines the inserted filepath info to build the overlay.

Disabling Xray in particular templates

Xray augments HTML templates by wrapping their contents with HTML comments. For some environments such as Angular.js, this can cause Angular templates to stop working because Angular expects only one root node in the template HTML. You can pass in the option xray: false to any render statements to ensure Xray does not augment that template. Example:

render 'show', xray: false

Contributing

If you have an idea, open an issue and let's talk about it, or fork away and send a pull request.

A laundry list of things to take on:

  • Reveal views from Ember, Knockout, Angular, etc.
  • Overlapping boxes are a problem - parent views in real applications will often be obscured by their children.
  • The current scheme for associating a JS constructor with a filepath is messy and can make stack traces ugly.

Worth noting is that I have plans to solidify xray.js into an API and specification that could be used to aid development in any framework - not just Rails and the asset pipeline.

xray-rails's People

Contributors

brentd avatar mattbrictson avatar mason-stewart avatar dunn avatar joesteele avatar joshuaflanagan avatar jrmehle avatar shemerey avatar nextekcarl avatar alenia avatar flemse avatar kdiogenes avatar mattheworiordan avatar parndt avatar tricknotes avatar thenonameguy avatar takitake avatar fukayatsu avatar hsatac avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.