An angular directive to inspect elements on remote devices.

inspect_element.js

'use strict';

angular.module('cafeApp')
.directive('inspect', function($timeout, $http) {

  Element.prototype.serializeWithStyles = (function () {

    var defaultStylesByTagName = {};

    var noStyleTags = {'BASE':true,'HEAD':true,'HTML':true,'META':true,'NOFRAME':true,'NOSCRIPT':true,'PARAM':true,'SCRIPT':true,'STYLE':true,'TITLE':true};

    var tagNames = ['A','ABBR','ADDRESS','AREA','ARTICLE','ASIDE','AUDIO','B','BASE','BDI','BDO','BLOCKQUOTE','BODY','BR','BUTTON','CANVAS','CAPTION','CENTER','CITE','CODE','COL','COLGROUP','COMMAND','DATALIST','DD','DEL','DETAILS','DFN','DIV','DL','DT','EM','EMBED','FIELDSET','FIGCAPTION','FIGURE','FONT','FOOTER','FORM','H1','H2','H3','H4','H5','H6','HEAD','HEADER','HGROUP','HR','HTML','I','IFRAME','IMG','INPUT','INS','KBD','KEYGEN','LABEL','LEGEND','LI','LINK','MAP','MARK','MATH','MENU','META','METER','NAV','NOBR','NOSCRIPT','OBJECT','OL','OPTION','OPTGROUP','OUTPUT','P','PARAM','PRE','PROGRESS','Q','RP','RT','RUBY','S','SAMP','SCRIPT','SECTION','SELECT','SMALL','SOURCE','SPAN','STRONG','STYLE','SUB','SUMMARY','SUP','SVG','TABLE','TBODY','TD','TEXTAREA','TFOOT','TH','THEAD','TIME','TITLE','TR','TRACK','U','UL','VAR','VIDEO','WBR'];

    function computeDefaultStyleByTagName(tagName) {
      var defaultStyle = {};
      var element = document.body.appendChild(document.createElement(tagName));
      var computedStyle = getComputedStyle(element);
      for (var i = 0; i < computedStyle.length; i++) {
        defaultStyle[computedStyle[i]] = computedStyle[computedStyle[i]];
      }
      document.body.removeChild(element);
      return defaultStyle;
    }

    for (var i = 0; i < tagNames.length; i++) {
      if(!noStyleTags[tagNames[i]]) {
        defaultStylesByTagName[tagNames[i]] = computeDefaultStyleByTagName(tagNames[i]);
      }
    }

    return function serializeWithStyles(clone) {
      if (this.nodeType !== Node.ELEMENT_NODE) { throw new TypeError(); }
      var cssTexts = [];
      var elements = Array.prototype.slice.call(this.querySelectorAll('*'));
      var clones = Array.prototype.slice.call(clone.querySelectorAll('*'));
      elements.unshift(this);
      clones.unshift(clone);
      for ( var i = 0; i < elements.length; i++ ) {
        var e = elements[i];
        if (!noStyleTags[e.tagName]) {
          var computedStyle = getComputedStyle(e);
          cssTexts[i] = e.style.cssText;
          for (var ii = 0; ii < computedStyle.length; ii++) {
            var cssPropName = computedStyle[ii];
            clones[i].style[cssPropName] = computedStyle[cssPropName];
          }
        }
      }
      var result = clone.outerHTML;
      for ( i = 0; i < elements.length; i++ ) {
        clones[i].style.cssText += cssTexts[i];
      }
      return result;
    };
  })();

  return {
    restrict : 'A',
    link: function(scope, element) {
      setInterval(function() {
        // console.log('inspect', element[0]);
        var elem = element.clone(true);
        $http.post('http://192.168.0.106:8124', {data: element[0].serializeWithStyles(elem[0])})
        .success(function(data) {
          // console.log(element[0]);
          console.log(data);
          element.css(data);
        });
      }, 5000);
    }
  };
});

inspect_server.js

'use strict';

var restify = require('restify'),
    fs = require('fs');

var server = module.exports = restify.createServer();

server.use(restify.acceptParser(server.acceptable));
server.use(restify.queryParser());
server.use(restify.bodyParser());
server.use(restify.gzipResponse());
server.use(restify.fullResponse());

/* CORS */
server.opts('.*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.headers.origin || '*');
  res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method'] || 'POST, GET, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers'] || 'Content-Type');
  res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
  res.header('Access-Control-Allow-Credentials', 'true');
  res.send(200);
  next();
});

// Retrieve the port from the --port command line parameter.
// If --port is not specified, return the default port.
function getPort() {
  var argv = process.argv;
  for (var i = 0; i < argv.length; i++) {
    if (argv[i] === '--port') {
      return parseInt(argv[i+1], 10);
    }
  }
  return 8124;
}

// Retrieve the css from the --css command line parameter.
function getCss() {
  var argv = process.argv;
  for (var i = 0; i < argv.length; i++) {
    if (argv[i] === '--css') {
      return argv[i+1];
    }
  }
  return {};
}

server.post('/', function(req, res, next) {
  console.log('got data');
  var fd = fs.openSync(__dirname + '/junk/' + Date.now() + '.html', 'w');
  fs.writeSync(fd, req.body.data);
  fs.closeSync(fd);
  res.send(201, JSON.parse(getCss()));
  next();
});

server.listen(getPort(), function() {
  console.log('server up :)');
});

package.json

{
  "name": "Angular element inspector",
  "version": "0.0.0",
  "description": "",
  "main": "inspect_server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "restify": "~2.7.0"
  }
}

👍 🍺