A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$ if your browser aliases it:
~ 108 byte version
| /** | |
| * Console.log with call location and grouping to reduce log noise. | |
| * Apply directly to code once. | |
| * | |
| * Original: http://remysharp.com/2014/05/23/where-is-that-console-log/ | |
| */ | |
| var groupable = typeof console.groupCollapsed !== 'undefined'; | |
| ['log', 'warn'].forEach(function(method) { | |
| var old = console[method]; | |
| console[method] = function() { |
| <?php namespace App\Providers; | |
| use Illuminate\Support\ServiceProvider; | |
| use Request; | |
| use View; | |
| use App; | |
| abstract class ApplicationsServiceProvider extends ServiceProvider | |
| { | |
| public function register() |
| // first run npm install ngrok - then put var ngrok = require('ngrok'); at the top of your gulpfile | |
| var ngrok = require('ngrok'); | |
| var browserSync = require('browser-sync') | |
| browserSync({ | |
| server: "./app" | |
| }, function (err, bs) { | |
| ngrok.connect(bs.options.get('port'), function (err, url) { | |
| // https://757c1652.ngrok.com -> 127.0.0.1:8080 | |
| }); | |
| }); |
| dialog { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| right: auto; | |
| padding: 30px; | |
| transform: perspective(500px) translate(-50%, -50%); | |
| background: linear-gradient(to bottom, #FFF, #F4F4F4) #FFF; | |
| border: none; | |
| border-radius: 3px; |