UNPKG

9.65 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Weex Devtool - App List</title>
6 <script src="vendor/qrcode.min.js"></script>
7 <style>
8 body {
9 background: #f1f2f3;
10 font-family: "STHeiti", "Microsoft YaHei", monospace;
11 }
12
13 #container {
14 margin: 30px 0 60px 0;
15 }
16
17 .device-wrap {
18 display: inline-block;
19 position: relative;
20 padding: 25px 31px 0px 31px;
21 box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3);
22 border-radius: 5px;
23 margin: 15px;
24 min-height:270px;
25 overflow: hidden;
26 background: #fff;
27 padding-bottom: 60px;
28 }
29
30 .line {
31 margin: 15px 0;
32 }
33
34 .line span {
35 font-size: 16px;
36 color: #737373;
37 width: 106px;
38 display: inline-block;
39 }
40
41 .line b {
42 font-size: 16px;
43 font-weight: bolder;
44 margin-left: 8px;
45 width: 170px;
46 overflow: hidden;
47 display: inline-block;
48 text-overflow: ellipsis;
49 text-align: right;
50 vertical-align: top;
51 }
52
53 .btn:first-child {
54 border-right: 1px solid #fff;
55 }
56
57 .btn {
58 display: inline-block;
59 padding: 5px;
60 text-decoration: none;
61 width: 50%;
62 text-align: center;
63 background: #000;
64 z-index: 2;
65 color: #fff;
66 border: 0;
67 box-sizing: border-box;
68 font-size: 18px;
69 line-height: 40px;
70 cursor: pointer;
71 }
72
73 .btn:hover {
74 color: #fff;
75 background: #333;
76 }
77
78 fieldset {
79 margin: 20px;
80 min-height: 300px;
81 border: none;
82 border-top: 1px solid #bbb;
83 border-bottom: 2px solid #000;
84 }
85
86 legend {
87 margin: 0 auto;
88 border: 1px solid #bbb;
89 padding: 8px 30px;
90 font-size: 20px;
91 varter-spacing: 4px;
92 border-radius: 5px;
93 }
94
95 .btn-ctn {
96 position: absolute;
97 left: 0;
98 right: 0;
99 bottom: 0px;
100 font-size: 0;
101 }
102
103 .tips {
104 width: 20px;
105 height: 20px;
106 position: absolute;
107 border-radius: 50%;
108 border: 1px solid #aaa;
109 right: 35px;
110 bottom: 76px;
111 text-align: center;
112 line-height: 23px;
113 font-weight: bold;
114 cursor: help;
115 color: #aaa;
116 /* background: rgb(76,183,238); */
117 z-index: 4;
118 }
119
120 .tips:hover + .mask {
121 transform: scale(45);
122 }
123
124 .tips:hover + .mask + .help {
125 opacity: 1;
126 }
127
128 .mask {
129 position: absolute;
130 width: 20px;
131 height: 20px;
132 position: absolute;
133 border-radius: 50%;
134 background: rgb(76, 183, 238);
135 right: 10px;
136 top: 8px;
137 transition: 0.8s;
138 z-index: 1;
139 }
140
141 .help {
142 transition: 1s;
143 opacity: 0;
144 position: absolute;
145 top: 0;
146 left: 0;
147 bottom: 0;
148 right: 0;
149 color: #fff;
150 z-index: 3;
151 pointer-events: none;
152 }
153
154 .help > div {
155 width: 42%;
156 border: 1px solid #fff;
157 display: inline-block;
158 padding: 10px 3%;
159 height: 110px;
160 font-size: 15px;
161 margin: 15px 4% 0 4%;
162 text-align: center;
163 line-height: 1.2;
164 box-sizing: border-box;
165 vertical-align: top;
166 position: relative;
167 }
168
169 .arrow {
170 position: absolute;
171 width: 0;
172 border-style: solid;
173 border-width: 10px 8px;
174 border-color: #fff transparent transparent transparent;
175 bottom: -20px;
176 left: 50%;
177 margin-left: -10px;
178 }
179
180 .help-ctn {
181 padding-left: 50px;
182 display: none;
183 }
184
185 .help-ctn section {
186 margin-bottom: 30px;
187 }
188
189 .help-ctn b {
190 border: 1px solid #000;
191 display: inline-block;
192 vertical-align: top;
193 width: 125px;
194 padding: 5px 10px;
195 text-align: center;
196 }
197 .help-ctn em{
198 color:#f60;
199 font-style: normal;
200 }
201
202 .help-ctn div {
203 display: inline-block;
204 margin-left: 20px;
205 vertical-align: middle;
206 line-height: 1.4;
207 max-width: 70%;
208 }
209
210 .qrcode {
211 display: inline-block;
212 vertical-align: middle;
213 }
214
215 #qrcode img:hover {
216 -webkit-transform: scale(2);
217 }
218
219 .qrcode-desc {
220
221 line-height: 1.4;
222 margin-top: 20px;
223 }
224
225 .qrcode-section {
226 margin: 20px 0;
227 width: 23%;
228 display: inline-block;
229 padding: 0 50px;
230 vertical-align: top;
231 }
232 .selector{
233 width: 70px;
234 font-size: 18px;
235 }
236 .mr-top-10{
237 margin:10px 0;
238
239 }
240 .mr-top-10 b{
241 vertical-align: middle;
242 }
243
244 .mr-bottom-10{
245 margin-bottom:10px;
246 }
247 .mr-bottom-10 b{
248 vertical-align: middle;
249 }
250 hr {
251 margin: 0 20px;
252 }
253 .switch {
254 position: relative;
255 width: 70px;
256 display: inline-block;
257 -webkit-user-select:none;
258 -moz-user-select:none;
259 -ms-user-select: none;
260 }
261 .switch-checkbox {
262 display: none;
263 }
264 .switch-label {
265 display: block;
266 overflow: hidden;
267 cursor: pointer;
268 border: 1px solid #999999;
269 border-radius: 20px;
270 }
271 .switch-inner {
272 width: 200%;
273 margin-left: -100%;
274 -moz-transition: margin 0.3s ease-in 0s;
275 -webkit-transition: margin 0.3s ease-in 0s;
276 -o-transition: margin 0.3s ease-in 0s;
277 transition: margin 0.3s ease-in 0s;
278 }
279 .switch-inner > div {
280 float: left;
281 width: 50%;
282 height: 20px;
283 padding: 0;
284 line-height: 20px;
285 font-size: 14px;
286 color: white;
287 text-align:left;
288 font-family: Trebuchet, Arial, sans-serif;
289 font-weight: bold;
290 -moz-box-sizing: border-box;
291 -webkit-box-sizing: border-box;
292 box-sizing: border-box;
293 }
294 .switch-inner .switch-active {
295 padding-left: 10px;
296 background-color: #4280eb;
297 color: #FFFFFF;
298 }
299 .switch-inner .switch-inactive {
300 padding-right: 6px;
301 background-color: #EEEEEE;
302 color: #999999;
303 text-align: right;
304 }
305 .switch-switch {
306 width: 18px;
307 margin: 3px 4px;
308 background: #FFFFFF;
309 border: 1px solid #999999;
310 border-radius: 20px;
311 position: absolute;
312 top: 0;
313 bottom: 0;
314 right: 42px;
315 -moz-transition: all 0.3s ease-in 0s;
316 -webkit-transition: all 0.3s ease-in 0s;
317 -o-transition: all 0.3s ease-in 0s;
318 transition: all 0.3s ease-in 0s;
319 }
320 .switch-checkbox:checked + .switch-label .switch-inner {
321 margin-left: 0;
322 }
323 .switch-checkbox:checked + .switch-label .switch-switch {
324 right: 0px;
325 }
326 </style>
327</head>
328
329<body>
330<fieldset>
331 <legend>App List</legend>
332 <div id="container"></div>
333</fieldset>
334<div class="help-ctn" id="help_ctn">
335 <section>
336 <b>Debugger</b>
337
338 <div>点击这个按钮将会打开js debugger页面，您可以通过debugger页面调试js(诸如打断点 查看js log 和查看调用堆栈)</div>
339 </section>
340 <section>
341 <b>Inspector</b>
342
343 <div>点击这个按钮将会打开inspector页面，您可以通过这个页面查看weex页面的element属性结构，包含高亮元素，展示样式表，以及显示native的log。同时可以打开一个远程的手机镜像，便于查看界面。
344 <br>另外调试方块中的<em>ElementMode</em>可以用来选择element树显示<em>原始的native组件树</em>还是显示面向前端同学的<em>DSL(HTML)组件树</em>。
345 </div>
346 </section>
347 <section>
348 <b>Remote Debug</b>
349
350 <div>开启Remote Debug后weex的js将会在chrome的v8里运行（仍然会在native端渲染），只有开启Remote Debug才能断点调试js（点击Debugger按钮会自动打开Remote Debug）<br>不开启RemoteDebug 可以通过inspector页面查看weex页面elements树
351 </div>
352 </section>
353</div>
354<div id="qrcode_container">
355 <div class="qrcode-section">
356 <div id="switchQrcode" class="qrcode"></div>
357 <div class="qrcode-desc">this qrcode could be used with playground to start Debugger.
358 </div>
359 </div>
360</div>
361
362<script src="lib/App.js"></script>
363</body>
364
365</html>
\No newline at end of file