Slide 1

Slide 1 text

)षؿט൫௉ ੀࠅ5BPCBP6&%

Slide 2

Slide 2 text

0WFSWJFX 1: Develop environment 2: Remote debugging 3: Tips for mobile develop

Slide 3

Slide 3 text

开䕆环ྤ Chrome  (模拟开发阶段调试预览)   flexCombo  (CDN本地环境) Apache  (透明代理、本机DEMO) Remote  Debug  (远程调试)

Slide 4

Slide 4 text

$ISPNF

Slide 5

Slide 5 text

GMFY$PNCP npm install flex-combo sudo flex-combo -u /apps/et/trip-html5/act -c utf8 The Flex-combo is a javascript and css file combo server. It support various kinds of combo format by modify configuration(eg. yahoo combo). Default, it's a taobao format combo.

Slide 6

Slide 6 text

em, about debug.

Slide 7

Slide 7 text

8PSL'MPX Step: 1: Code 2: Preview in Browser 3: Enter URL on mobile Device 4-11: Repeat #3 (for 8 and more Devices) 12: Change Code 13: Preview in Browser 14-21: Refresh 8 Devices 22: Run into debugging need

Slide 8

Slide 8 text

1$ $ISPNF

Slide 9

Slide 9 text

1$ 'JSFGPY

Slide 10

Slide 10 text

1$ *& 啧啧,IE...

Slide 11

Slide 11 text

1$ %FTLUPQ Console HTML Inspector JavaScript Debug Network Inspector Performance Tips Modify CSS/JavaScript Memory Inspector Database Inspector etc.

Slide 12

Slide 12 text

.PCJMF ) Console HTML Inspector JavaScript Debug Network Inspector Performance Tips Modify CSS/JavaScript Memory Inspector Database Inspector etc.

Slide 13

Slide 13 text

.PCJMF )

Slide 14

Slide 14 text

a really true story.

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

5PPMTGPS.PCJMF%FW%FCVH

Slide 19

Slide 19 text

1. Safari Mobile Debugger 2. Webkit Remote Debugger 3. iWebInspector 4. Opera Dragonfly 5. Chrome for Android Web Inspector 6. Firefox for Android Remote Debugging 7. Socketbug 8. weinre 9. jsconsole.com, jsbin.com 10. Adobe Edge Inspect

Slide 20

Slide 20 text

"QBDIF ProxyRequests On ProxyVia On Order deny,allow Deny from all Allow from all http:/ /httpd.apache.org/docs/2.2/mod/mod_proxy.html

Slide 21

Slide 21 text

"QBDIF ProxyRequests On ProxyVia On Order deny,allow Deny from all Allow from all http:/ /httpd.apache.org/docs/2.2/mod/mod_proxy.html

Slide 22

Slide 22 text

)5519)3.FTTBHF'MPX

Slide 23

Slide 23 text

.PCJMF1SPYZ

Slide 24

Slide 24 text

.PCJMF1SPYZ

Slide 25

Slide 25 text

䔍ࠦॆ៽䕏时䝀调 • Chrome Remote Debugging on Android • iOS Remote Debugging with Safari • jsConsole Online • Webkit Inspector Remote(Weinre)

Slide 26

Slide 26 text

3FNPUF%FCVH

Slide 27

Slide 27 text

$ISPNF3FNPUF%FCVHHJOHPO"OESPJE 1. Install the Android SDK 2. Enable USB debugging on your device 3. Connect your device via USB

Slide 28

Slide 28 text

$ISPNF3FNPUF%FCVHHJOHPO"OESPJE + Remote debugging on Device (using GDT) - Requires ADK/ADB, USB Cable (or hack) - Not for Android < 4 ICS, no Android 2/3! - A Lot to Setup/Maintain (for just a fraction) = Limited use for real world needs

Slide 29

Slide 29 text

J043FNPUF%FCVHHJOH 1. Enable Web Inspector on your Phone 2. Connect your iPhone or iPad to your Mac 3. In Safari’s Preferences pane under Advanced, check the Show Develop menu in the menu bar checkbox. 4. Select the Develop menu, and your iDevice should be a menu option.

Slide 30

Slide 30 text

J043FNPUF%FCVHHJOH + Convenient: Build in - No CSS/DOM Editing - No Breakpoints - JS Logs are truncated = Limited use for real world needs

Slide 31

Slide 31 text

KT$POTPMF jsconsole.com is a simple JavaScript command line tool. However, it also provides the ability to bridge across to other browser windows to remotely control and debug that window - be it in another browser or another device altogether.

Slide 32

Slide 32 text

KT$POTPMF + Remote DOM on Device + Any Browser/OS + Sits online, no local stuff to maintain + Truly remote - Console only - Needs JS inside your code to connect - Still need to go device by device = Powerful partial solution

Slide 33

Slide 33 text

XFJOSF Weinre is a project of the Apache Foundation and stands for Web Inspector Remote and is exactly what it’s name suggests, a tool in the same vein as Firebug or Webinspector but, able to run and debug web pages remotely. So, if you have used tools such as the Firefox Developer Tools or Chrome Dev Tools, using Weinre will be second nature. Weinre Install • Start Server. • Add Bookmarklet. • Increase Auto-Lock Time(iOS Setting) to Prevent Disconnect. npm -g install weinre weinre --boundHost 127.0.0.1 --httpPort 9090 Another Option http://debug.phonegap.com

Slide 34

Slide 34 text

XFJOSF

Slide 35

Slide 35 text

EFCVHQIPOFHBQDPN

Slide 36

Slide 36 text

XFJOSF + Remote DOM on Device + iOS, Android & BlackBerry + Node.js port now much less hairy to setup than former Java based one - Needs JS inside your code to connect - Still need to go device by device = Powerful partial solution

Slide 37

Slide 37 text

J8FC*OTQFDUPS

Slide 38

Slide 38 text

J8FC*OTQFDUPS

Slide 39

Slide 39 text

0QFSB%SBHPOGMZ

Slide 40

Slide 40 text

KTCJODPN

Slide 41

Slide 41 text

4PDLFU#VH

Slide 42

Slide 42 text

tools for network debug.

Slide 43

Slide 43 text

'JEEMFS The free web debugging proxy for any browser, system or platform. • Monitor HTTP/HTTPs traffic from any browser • Inspect and debug traffic from any client • Tamper client requests and server responses • Test the performance of your web sites and apps • Decrypt HTTPS web sessions • Extend Fiddler as much as you want

Slide 44

Slide 44 text

'JEEMFS

Slide 45

Slide 45 text

'JEEMFS

Slide 46

Slide 46 text

are u using mac?

Slide 47

Slide 47 text

$IBSMFT Charles is a web proxy (HTTP Proxy / HTTP Monitor) that runs on your own computer. Your web browser (or any other Internet application) is then configured to access the Internet through Charles, and Charles is then able to record and display for you all of the data that is sent and received. $50

Slide 48

Slide 48 text

$IBSMFT • SSL Proxying – view SSL requests and responses in plain text • Bandwidth Throttling to simulate slower Internet connections including latency • AJAX debugging – view XML and JSON requests and responses as a tree or as text • AMF – view the contents of Flash Remoting / Flex Remoting messages as a tree • Repeat requests to test back-end changes • Edit requests to test different inputs • Breakpoints to intercept and edit requests or responses • Validate recorded HTML, CSS and RSS/atom responses using the W3C validator

Slide 49

Slide 49 text

Thanks!