1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <title>Weex Devtool - JS Debugger</title>
|
6 | <script src="lib/EventEmitter.js"></script>
|
7 | <script src="lib/WebsocketClient.js"></script>
|
8 | <style>
|
9 | body {
|
10 | font-size: large;
|
11 | line-height: 2;
|
12 | }
|
13 |
|
14 | .shortcut {
|
15 | font-family: "Monaco", monospace;
|
16 | font-size: medium;
|
17 | color: #eee;
|
18 | background-color: #333;
|
19 | padding: 4px;
|
20 | border-radius: 4px;
|
21 | letter-spacing: 3px;
|
22 | }
|
23 |
|
24 | b {
|
25 | background: #ebebeb;
|
26 | padding: 4px;
|
27 | border-radius: 4px;
|
28 | }
|
29 |
|
30 | #warning {
|
31 | color: red;
|
32 | }
|
33 |
|
34 | p label {
|
35 | vertical-align: middle;
|
36 | margin-right: 12px;
|
37 | }
|
38 |
|
39 | p select {
|
40 | vertical-align: middle;
|
41 | font-size: 16px;
|
42 | }
|
43 | </style>
|
44 | </head>
|
45 | <body>
|
46 | <h2></h2>
|
47 | <div>
|
48 | <p>Press <span class="shortcut" id="shortcut">Inspect Element</span> to open Developer Tools. Please select <b>Sources</b> tag to start!</p>
|
49 |
|
50 | <p>
|
51 | <label>Log Level</label>
|
52 | <select name="" id="logLevel">
|
53 | <option value="debug">debug</option>
|
54 | <option value="log">log</option>
|
55 | <option value="info">info</option>
|
56 | <option value="warn">warn</option>
|
57 | <option value="error">error</option>
|
58 | </select>
|
59 | </p>
|
60 | <p id="warning"></p>
|
61 | </div>
|
62 | <div id="Document"></div>
|
63 | <script>
|
64 | if(/mac/i.test(navigator.platform)){
|
65 | document.getElementById('shortcut').innerHTML='⌘+⌥+J';
|
66 | }
|
67 | else if(/win/i.test(navigator.platform)){
|
68 | document.getElementById('shortcut').innerHTML='F12';
|
69 | }
|
70 | else if(/linux/i.test(navigator.platform)){
|
71 | document.getElementById('shortcut').innerHTML='Ctrl+shift+I';
|
72 | }
|
73 | var worker;
|
74 | var timer;
|
75 | window.device=window.device||sessionStorage.getItem('device');
|
76 | window.setElementMode=function(mode){
|
77 | var websocket = new WebsocketClient('ws://' + location.host + '/debugProxy/list');
|
78 | var message={
|
79 | method:'WxDebug.setElementMode',
|
80 | params:{
|
81 | deviceId:device.deviceId,
|
82 | data:mode
|
83 | }
|
84 | };
|
85 | websocket.send(message);
|
86 |
|
87 | }
|
88 | var sessionId=new URLSearchParams(location.search).get('sessionId');
|
89 | var websocket = new WebsocketClient('ws://' + window.location.host + '/debugProxy/debugger/' +sessionId );
|
90 | websocket.on('*', function (message) {
|
91 | if (worker) {
|
92 | worker.postMessage(message);
|
93 | }
|
94 | });
|
95 | websocket.on('socketOpened', function () {
|
96 | if(location.hash=='#new'){
|
97 | websocket.send({method: 'WxDebug.enable'});
|
98 | location.hash=''
|
99 | }
|
100 | else{
|
101 | websocket.send({method: 'WxDebug.reload'});
|
102 | }
|
103 | clearTimeout(timer);
|
104 | timer = setTimeout(function () {
|
105 | document.getElementById('warning').innerHTML = 'Warning:The session with native was closed,please restart your native app!'
|
106 | }, 2000)
|
107 | });
|
108 | websocket.on('WxDebug.refresh', function () {
|
109 | location.reload();
|
110 | });
|
111 | websocket.on('WxDebug.initJSRuntime', function (message) {
|
112 | clearTimeout(timer);
|
113 | document.getElementById('warning').innerHTML = "";
|
114 | destroyJSRuntime();
|
115 | var logLevel = localStorage.getItem('logLevel');
|
116 | if (logLevel) {
|
117 | message.params.env.WXEnvironment.logLevel = logLevel;
|
118 | }
|
119 | document.getElementById('logLevel').value = message.params.env.WXEnvironment.logLevel;
|
120 | message.sessionId=sessionId;
|
121 | initJSRuntime(message);
|
122 |
|
123 | });
|
124 | function destroyJSRuntime() {
|
125 | if (worker) {
|
126 | worker.terminate();
|
127 | worker.onmessage = null;
|
128 | worker = null;
|
129 | }
|
130 | }
|
131 | function initJSRuntime(message) {
|
132 | worker = new Worker('/lib/Runtime.js');
|
133 | worker.onmessage = function (message) {
|
134 | message = message.data;
|
135 | var domain = message.method.split('.')[0];
|
136 | var method = message.method.split('.')[1];
|
137 | if (domain == 'WxRuntime') {
|
138 | if (method === 'clearLog') {
|
139 |
|
140 | }
|
141 | else if (method === 'dom') {
|
142 | document.getElementById('Document').innerHTML = resolve(message.params);
|
143 | }
|
144 | }
|
145 | else {
|
146 | websocket.send(message);
|
147 | }
|
148 | };
|
149 | worker.postMessage(message)
|
150 | }
|
151 |
|
152 |
|
153 | document.getElementById('logLevel').onchange = function (evt) {
|
154 | localStorage.setItem('logLevel', evt.target.value);
|
155 | if (worker) {
|
156 | worker.postMessage({method: 'WxDebug.changeLogLevel', params: evt.target.value});
|
157 | }
|
158 | }
|
159 |
|
160 | function resolve(root) {
|
161 | var html = `<${root.type} ${resolveStyle(root.style)}`;
|
162 | var value = '';
|
163 | for (var key in root.attr) {
|
164 | if (root.attr.hasOwnProperty(key)) {
|
165 | if (root.type == 'text' && key == 'value') {
|
166 | value = root.attr[key];
|
167 | }
|
168 | html += ` ${key}="${root.attr[key]}"`;
|
169 | }
|
170 | }
|
171 | html += '>';
|
172 | if (value) {
|
173 | html += value;
|
174 | }
|
175 | else {
|
176 | for (var i = 0; root.children && i < root.children.length; i++) {
|
177 | html += resolve(root.children[i]);
|
178 | }
|
179 | }
|
180 | html += `</${root.type}>`;
|
181 | return html;
|
182 | }
|
183 | function resolveStyle(styles) {
|
184 | var styleText = '';
|
185 |
|
186 |
|
187 | for (var key in styles) {
|
188 | if (styles.hasOwnProperty(key)) {
|
189 | styleText += key.replace(/([a-z])([A-Z])/g, function (m, a, b) {
|
190 | return a + '-' + b.toLowerCase();
|
191 | }) + ':' + resolveStyleValue(styles[key]) + ';';
|
192 | }
|
193 | }
|
194 | if (styleText) {
|
195 | styleText = ` style="${styleText}"`;
|
196 | }
|
197 | return styleText;
|
198 | }
|
199 | var cssNumber = {
|
200 | columnCount: true,
|
201 | fillOpacity: true,
|
202 | flexGrow: true,
|
203 | flexShrink: true,
|
204 | fontWeight: true,
|
205 | lineHeight: true,
|
206 | opacity: true,
|
207 | order: true,
|
208 | orphans: true,
|
209 | widows: true,
|
210 | zIndex: true,
|
211 | zoom: true
|
212 | };
|
213 | function resolveStyleValue(value) {
|
214 | if (isNaN(value) || cssNumber[value]) {
|
215 | return value;
|
216 | }
|
217 | else {
|
218 | return value + 'px';
|
219 | }
|
220 | }
|
221 | </script>
|
222 | </body>
|
223 | </html> |
\ | No newline at end of file |