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; |