├── .gitignore ├── LICENSE ├── README.md ├── lib ├── page-connection.js ├── page.js ├── v8 │ └── css.js └── v9 │ └── css.js ├── package.json └── proxy.js /.gitignore: -------------------------------------------------------------------------------- 1 | logs 2 | *.log 3 | node_modules 4 | .DS_Store 5 | *.sw[o,p] 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Arty Gus 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | The project is dead, another effort is taken at [RemoteDebug/remotedebug-ios-webkit-adapter](https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter) 2 | 3 | # devtools-compat-proxy 4 | A DevTools compatibility layer for iOS devices 5 | -------------------------------------------------------------------------------- /lib/page-connection.js: -------------------------------------------------------------------------------- 1 | const WebSocket = require('ws'), 2 | colors = require('colors'), 3 | events = require('events'), 4 | util = require('util'); 5 | 6 | var PageConnection = function(pageJson) { 7 | this.pageJson = pageJson; 8 | this.serviceRequestID = 0; 9 | 10 | this.messageBuffer = new Map(); 11 | this.requestBuffer = new Map(); 12 | 13 | this.messageHandlers = new Map(); 14 | 15 | events.EventEmitter.call(this); 16 | } 17 | 18 | util.inherits(PageConnection, events.EventEmitter); 19 | 20 | util._extend(PageConnection.prototype, { 21 | connect: function() { 22 | // device socket 23 | this.remoteSocket = new WebSocket(this.pageJson.webSocketDebuggerUrl); 24 | 25 | this.remoteSocket.on('error', function(e) { 26 | console.error('page socket error: %s', e.code); 27 | }); 28 | 29 | this.remoteSocket.on('message', this.onRemoteMessage.bind(this)); 30 | 31 | // server socket 32 | this.server = new WebSocket.Server({port: 9322}); 33 | 34 | this.server.on('error', function(e) { 35 | console.error('proxy socket error: %s', e.code); 36 | }); 37 | 38 | this.server.on('connection', function(clientSocket) { 39 | this.proxySocket && this.proxySocket.close(); 40 | 41 | clientSocket.on('message', this.onProxyMessage.bind(this)); 42 | 43 | // devtools socket 44 | this.proxySocket = clientSocket; 45 | }.bind(this)); 46 | }, 47 | 48 | close: function() { 49 | this.remoteSocket.close(); 50 | this.server.close(); 51 | }, 52 | 53 | request: function(method, params) { 54 | return new Promise(function(resolve, reject) { 55 | var request = { 56 | id: --this.serviceRequestID, 57 | method: method, 58 | params: params 59 | }; 60 | 61 | this.requestBuffer.set(request.id, { resolve: resolve, reject: reject }); 62 | this.remoteSocket.send(JSON.stringify(request)); 63 | }.bind(this)); 64 | }, 65 | 66 | trigger: function(method, params) { 67 | var request = { 68 | method: method, 69 | params: params 70 | }; 71 | 72 | this.proxySocket.send(JSON.stringify(request)); 73 | }, 74 | 75 | onRemoteMessage: function(rawMsg) { 76 | var msg = JSON.parse(rawMsg); 77 | 78 | if ('id' in msg) { 79 | if (this.messageBuffer.has(msg.id)) { 80 | if ('result' in msg) { 81 | var eventName = ['remote', this.messageBuffer.get(msg.id)].join('::'); 82 | 83 | this.emit(eventName, msg.result); 84 | 85 | if (this.messageHandlers.has(eventName)) { 86 | this.messageHandlers.get(eventName)(msg); 87 | rawMsg = JSON.stringify(msg); 88 | } 89 | } else if ('error' in msg) { 90 | console.log('error in remote message', rawMsg); 91 | } else { 92 | console.log('unhandled type of remote message', rawMsg); 93 | } 94 | 95 | this.messageBuffer.delete(msg.id); 96 | this.proxySocket.send(rawMsg); 97 | } else if (this.requestBuffer.has(msg.id)) { 98 | if ('result' in msg) { 99 | this.requestBuffer.get(msg.id).resolve(msg.result); 100 | } else if ('error' in msg) { 101 | this.requestBuffer.get(msg.id).reject(msg.error); 102 | } else { 103 | console.log('unhandled type of request message', rawMsg); 104 | } 105 | 106 | this.requestBuffer.delete(msg.id); 107 | } else { 108 | console.log('unhandled remote message', rawMsg); 109 | } 110 | } else { 111 | // event? 112 | this.proxySocket.send(rawMsg); 113 | } 114 | }, 115 | 116 | onProxyMessage: function(rawMsg) { 117 | var msg = JSON.parse(rawMsg), 118 | eventName = ['proxy', msg.method].join('::'); 119 | 120 | this.messageBuffer.set(msg.id, msg.method); 121 | this.emit(eventName, msg.params); 122 | 123 | if (this.messageHandlers.has(eventName)) { 124 | this.messageHandlers.get(eventName)(msg); 125 | rawMsg = JSON.stringify(msg); 126 | } 127 | 128 | this.remoteSocket.send(rawMsg); 129 | }, 130 | 131 | registerMessageHandler: function(method, callback) { 132 | this.messageHandlers.set(method, callback); 133 | } 134 | 135 | }); 136 | 137 | 138 | module.exports = PageConnection; 139 | -------------------------------------------------------------------------------- /lib/page.js: -------------------------------------------------------------------------------- 1 | const PageConnection = require('./page-connection'), 2 | Css = require('./v9/css'); 3 | 4 | var Page = function(json) { 5 | this.conn = new PageConnection(json); 6 | this.conn.connect(); 7 | 8 | new Css(this.conn); 9 | } 10 | 11 | Page.prototype = { 12 | 13 | } 14 | 15 | module.exports = Page; 16 | -------------------------------------------------------------------------------- /lib/v8/css.js: -------------------------------------------------------------------------------- 1 | function Css(conn) { 2 | this.conn = conn; 3 | this.conn.on('remote::CSS.enable', this.injectStylesheets.bind(this)); 4 | this.conn.registerMessageHandler('remote::CSS.getMatchedStylesForNode', this.getMatchedStylesForNodeHandler.bind(this)); 5 | } 6 | 7 | Css.prototype = { 8 | mapSelectorList: function(selectorList) { 9 | var range = selectorList.range; 10 | 11 | for (var i = 0; i < selectorList.selectors.length; i++) { 12 | selectorList.selectors[i] = { 13 | value: selectorList.selectors[i] 14 | } 15 | if (range !== undefined) 16 | selectorList.selectors[i].range = range; 17 | } 18 | 19 | delete selectorList.range; 20 | }, 21 | 22 | mapCssProperty: function(cssProperty) { 23 | if (cssProperty.status == 'disabled') { 24 | cssProperty.disabled = true; 25 | } else if (cssProperty.status == 'active') { 26 | cssProperty.disabled = false; 27 | } 28 | 29 | delete cssProperty.status; 30 | }, 31 | 32 | mapStyle: function(cssStyle, ruleOrigin) { 33 | for (var i in cssStyle.cssProperties) 34 | this.mapCssProperty(cssStyle.cssProperties[i]); 35 | 36 | 37 | if (ruleOrigin !== 'user-agent') 38 | cssStyle.styleSheetId = cssStyle.styleId.styleSheetId; 39 | 40 | delete cssStyle.styleId; 41 | delete cssStyle.sourceLine; 42 | delete cssStyle.sourceURL; 43 | delete cssStyle.width; 44 | delete cssStyle.height; 45 | }, 46 | 47 | mapRule: function(cssRule) { 48 | if ('ruleId' in cssRule) { 49 | cssRule.styleSheetId = cssRule.ruleId.styleSheetId; 50 | delete cssRule.ruleId; 51 | } 52 | 53 | this.mapSelectorList(cssRule.selectorList); 54 | this.mapStyle(cssRule.style, cssRule.origin); 55 | 56 | delete cssRule.sourceLine; 57 | }, 58 | 59 | mapStylesheetHeader: function(stylesheetHeader) { 60 | stylesheetHeader.isInline = false; 61 | stylesheetHeader.startLine = 0; 62 | stylesheetHeader.startColumn = 0; 63 | }, 64 | 65 | getMatchedStylesForNodeHandler: function(msg) { 66 | var result = msg.result; 67 | 68 | for (var i in result.matchedCSSRules) { 69 | this.mapRule(result.matchedCSSRules[i].rule); 70 | } 71 | 72 | for (var i in result.inherited) { 73 | for (var j in result.inherited[i].matchedCSSRules) { 74 | this.mapRule(result.inherited[i].matchedCSSRules[j].rule); 75 | } 76 | } 77 | 78 | return msg; 79 | }, 80 | 81 | injectStylesheets: function() { 82 | this.conn.request('CSS.getAllStyleSheets', {}).then(function(msgResult) { 83 | for (var header of msgResult.headers) { 84 | this.mapStylesheetHeader(header); 85 | this.conn.trigger('CSS.styleSheetAdded', {header: header}); 86 | } 87 | }.bind(this)); 88 | }, 89 | } 90 | 91 | module.exports = Css; 92 | -------------------------------------------------------------------------------- /lib/v9/css.js: -------------------------------------------------------------------------------- 1 | function Css(conn) { 2 | this.conn = conn; 3 | this.conn.on('remote::CSS.enable', this.injectStylesheets.bind(this)); 4 | this.conn.registerMessageHandler('remote::CSS.getMatchedStylesForNode', this.getMatchedStylesForNodeHandler.bind(this)); 5 | this.conn.registerMessageHandler('proxy::CSS.setStyleText', this.setStyleText.bind(this)); 6 | 7 | this.styleIdBuffer = new Map(); 8 | } 9 | 10 | Css.prototype = { 11 | // helpers 12 | makeStyleKey: function(styleSheetId, range) { 13 | return [styleSheetId, JSON.stringify(range)].join('_'); 14 | }, 15 | 16 | // mappings 17 | mapSelectorList: function(selectorList) { 18 | var range = selectorList.range; 19 | 20 | for (var selector of selectorList.selectors) { 21 | selector.value = selector.text; 22 | delete selector.text; 23 | 24 | if (range !== undefined) 25 | selector.range = range; 26 | } 27 | 28 | delete selectorList.range; 29 | }, 30 | 31 | mapCssProperty: function(cssProperty) { 32 | if (cssProperty.status == 'disabled') { 33 | cssProperty.disabled = true; 34 | } else if (cssProperty.status == 'active') { 35 | cssProperty.disabled = false; 36 | } 37 | 38 | delete cssProperty.status; 39 | }, 40 | 41 | mapStyle: function(cssStyle, ruleOrigin) { 42 | for (var cssProperty of cssStyle.cssProperties) 43 | this.mapCssProperty(cssProperty); 44 | 45 | 46 | if (ruleOrigin !== 'user-agent') { 47 | cssStyle.styleSheetId = cssStyle.styleId.styleSheetId; 48 | var styleKey = this.makeStyleKey(cssStyle.styleSheetId, cssStyle.range); 49 | this.styleIdBuffer.set(styleKey, cssStyle.styleId); 50 | } 51 | 52 | delete cssStyle.styleId; 53 | delete cssStyle.sourceLine; 54 | delete cssStyle.sourceURL; 55 | delete cssStyle.width; 56 | delete cssStyle.height; 57 | }, 58 | 59 | mapRule: function(cssRule) { 60 | if ('ruleId' in cssRule) { 61 | cssRule.styleSheetId = cssRule.ruleId.styleSheetId; 62 | delete cssRule.ruleId; 63 | } 64 | 65 | this.mapSelectorList(cssRule.selectorList); 66 | this.mapStyle(cssRule.style, cssRule.origin); 67 | 68 | delete cssRule.sourceLine; 69 | }, 70 | 71 | mapStylesheetHeader: function(stylesheetHeader) { 72 | stylesheetHeader.isInline = false; 73 | stylesheetHeader.startLine = 0; 74 | stylesheetHeader.startColumn = 0; 75 | }, 76 | 77 | // event handlers 78 | injectStylesheets: function() { 79 | this.conn.request('CSS.getAllStyleSheets', {}).then(function(msgResult) { 80 | for (var header of msgResult.headers) { 81 | this.mapStylesheetHeader(header); 82 | this.conn.trigger('CSS.styleSheetAdded', {header: header}); 83 | } 84 | }.bind(this)); 85 | }, 86 | 87 | // message handlers 88 | getMatchedStylesForNodeHandler: function(msg) { 89 | var result = msg.result; 90 | 91 | for (var i in result.matchedCSSRules) { 92 | this.mapRule(result.matchedCSSRules[i].rule); 93 | } 94 | 95 | for (var i in result.inherited) { 96 | for (var j in result.inherited[i].matchedCSSRules) { 97 | this.mapRule(result.inherited[i].matchedCSSRules[j].rule); 98 | } 99 | } 100 | }, 101 | 102 | setStyleText: function(msg) { 103 | var styleKey = this.makeStyleKey(msg.params.styleSheetId, msg.params.range); 104 | msg.params.styleId = this.styleIdBuffer.get(styleKey); 105 | delete msg.params.styleSheetId; 106 | delete msg.params.range; 107 | } 108 | } 109 | 110 | module.exports = Css; 111 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "devtools-compat-proxy", 3 | "version": "0.0.1", 4 | "description": "A DevTools compatibility layer for iOS devices", 5 | "main": "proxy.js", 6 | "dependencies": { 7 | "colors": "^1.1.2", 8 | "request": "^2.61.0", 9 | "ws": "^0.7.2" 10 | }, 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1", 13 | "start": "node proxy.js" 14 | }, 15 | "author": "Arty Gus", 16 | "license": "MIT" 17 | } 18 | -------------------------------------------------------------------------------- /proxy.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const request = require('request'), 4 | Page = require('./lib/page.js'); 5 | 6 | request('http://localhost:9222/json', function (error, response, body) { 7 | if (!error && response.statusCode == 200) { 8 | var json = JSON.parse(body); 9 | 10 | for (var pageJson of json) { 11 | new Page(pageJson); 12 | } 13 | } else { 14 | console.log('is device connected on :9222?'); 15 | } 16 | }) 17 | --------------------------------------------------------------------------------