UNPKG

6.66 kBHTMLView Raw
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 //need close
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 //console.clear();
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 //initJSRuntime();
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