app-inspector/index.html at master · macaca-bot/app-inspector · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>App Inspector</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/cayman.css">
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">App Inspector</h1>
      <h2 class="project-tagline">Mobile UI viewer in browser.<br>View the UI in a tree view, and generate XPath automatically.</h2>
      <a href="https://github.com/macacajs/app-inspector" class="btn">View on GitHub</a>
      <a href="cn" class="btn">中文</a>
    </section>

<section class="main-content">

<h1 id="started">Getting Started</h1>

<h2 id="requirements">Requirements</h2>
<p>
  To install app-inspector, <a target="_blank" href="https://nodejs.org/">Node.js</a> environment is required.
</p>
<p>
  <a target="_blank" href="https://macacajs.github.io/cli-usage.html">macaca-cli</a> is recommended to install.
</p>

<pre>
<code>$ npm install macaca-cli -g</code>
</pre>

<p>
  Your environment needs to be setup for the particular mobile platforms that you want to view. Install Android SDK for Android, Xcode for iOS.
  <br>
  Verify the environment with macaca-cli.
</p>

<pre>
<code>$ macaca doctor</code>
</pre>

<p>
  If you saw some green log information, it means your platform environment is ready.
  Then you can install app-inspector and use it.
</p>

<h2 id="installation">Installation</h2>

<pre>
<code>$ npm install app-inspector -g</code>
</pre>

<h2 id="usage">Usage</h2>
<h3>Launch from cli</h3>
<pre>
<code>$ app-inspector -u YOUR-DEVICE-ID</code>
</pre>
<div>
  See <a href="#get-id">Get the Device ID</a> to lean how to get the device ID.
</div>

<h3>Open Interface</h3>
<p>
  You will see the log information like below
</p>
<blockquote>
  inspector start at: http://192.168.10.100:5678
</blockquote>
<p>
  Then open the link http://192.168.10.100:5678 in your browser.
</p>

<img src="http://ww4.sinaimg.cn/large/7dfcf2f7gw1f77ev6csw5g20s50iwe81.gif">

<br>

<h1 id="get-id">Get the Device ID</h1>
<h2 id="get-id-ios">iOS</h2>
<h3>From command line</h3>
<pre>
<code>$ xcrun simctl list</code>
</pre>
<p>
  The command above will list all your iOS simulator devices infomation.
  Your can find the UDID like XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.
</p>
<h3>From Xcode</h3>
<p>
  Open your simulator, choose <strong>Hardware - devices - manage devices</strong>. You will find the identifier in device information.
</p>

<h2 id="get-id-android">Android</h2>
<h3>From command line</h3>
<p>Launch your device firstly, then use adb to list all your devices.</p>
<pre>
<code>$ adb devices</code>
</pre>
<pre>
<code>123ABCDEFG	device
192.168.0.100:5555	device</code>
</pre>

<h2>iOS Real Device</h2>

<pre>
<code>$ DEVELOPMENT_TEAM_ID=TEAM_ID npm i app-inspector -g</code>
</pre>

<img src="http://wx1.sinaimg.cn/large/6d308bd9gy1fg7cnt9hf6j20t70h7782.jpg">

</section>

<section class="site-footer">
© 2015-2016 <a href="https://github.com/macacajs">Macaca</a>
<br>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</section>
  </body>
</html>