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
| <?php | |
| /** Full path to project dir on host */ | |
| isset($_SERVER['HOST_DIR']) or $_SERVER['HOST_DIR'] = realpath(__DIR__ . '/../../'); | |
| /** Full path to vagrant directory on host */ | |
| $_SERVER['VAGRANT_DIR'] = $_SERVER['HOST_DIR'] . '/vagrant'; | |
| /** Full path to project dir on virtual machine */ | |
| $_SERVER['GUEST_DIR'] = '/path/to/project/on/vm'; |
| app.filter('parseUrl', function() { | |
| var //URLs starting with http://, https://, or ftp:// | |
| replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, | |
| //URLs starting with "www." (without // before it, or it'd re-link the ones done above). | |
| replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim, | |
| //Change email addresses to mailto:: links. | |
| replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim; | |
| return function(text, target, otherProp) { | |
| angular.forEach(text.match(replacePattern1), function(url) { |
| function random_text( $type = 'alnum', $length = 8 ) | |
| { | |
| switch ( $type ) { | |
| case 'alnum': | |
| $pool = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |
| break; | |
| case 'alpha': | |
| $pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |
| break; | |
| case 'hexdec': |
| .factory( 'UserService', [ '$http', function ( $http ) { | |
| var url = '/api/users'; | |
| /** | |
| * This is the private API. | |
| */ | |
| // get a list of users | |
| function query () { | |
| return $http.get( url ); |