H5 Mobile 开发调试实践

H5 Mobile 移动端开发及调试工具、技巧实践分享

Transcript

1. )षؿט൫௉ ੀࠅ
   5BPCBP
   6&%
2. 0WFSWJFX 1: Develop environment 2: Remote debugging 3: Tips for mobile develop
3. 开䕆环ྤ Chrome  (模拟开发阶段调试预览)   flexCombo  (CDN本地环境) Apache  (透明代理、本机DEMO) Remote  Debug  (远程调试)
4. $ISPNF
5. 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.
6. em, about debug.
7. 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
8. 1$
   $ISPNF
9. 1$
   'JSFGPY
10. 1$
    *& 啧啧，IE...
11. 1$
    %FTLUPQ Console HTML Inspector JavaScript Debug Network Inspector Performance Tips Modify CSS/JavaScript Memory Inspector Database Inspector etc.
12. .PCJMF
    ) Console HTML Inspector JavaScript Debug Network Inspector Performance Tips Modify CSS/JavaScript Memory Inspector Database Inspector etc.
13. .PCJMF
    )
14. a really true story.
18. 5PPMT
    GPS
    .PCJMF
    %FW%FCVH
19. 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
20. "QBDIF ProxyRequests On ProxyVia On <Proxy *> Order deny,allow Deny from all Allow from all </Proxy> http:/ /httpd.apache.org/docs/2.2/mod/mod_proxy.html
21. "QBDIF ProxyRequests On ProxyVia On <Proxy *> Order deny,allow Deny from all Allow from all </Proxy> http:/ /httpd.apache.org/docs/2.2/mod/mod_proxy.html
22. )5519)3
    .FTTBHF
    'MPX
23. .PCJMF
    1SPYZ
24. .PCJMF
    1SPYZ
25. 䔍ࠦॆ៽䕏时䝀调 • Chrome Remote Debugging on Android • iOS Remote Debugging with Safari • jsConsole Online • Webkit Inspector Remote(Weinre)
26. 3FNPUF
    %FCVH
27. $ISPNF
    3FNPUF
    %FCVHHJOH
    PO
    "OESPJE 1. Install the Android SDK 2. Enable USB debugging on your device 3. Connect your device via USB
28. $ISPNF
    3FNPUF
    %FCVHHJOH
    PO
    "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
29. J04
    3FNPUF
    %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.
30. J04
    3FNPUF
    %FCVHHJOH + Convenient: Build in - No CSS/DOM Editing - No Breakpoints - JS Logs are truncated = Limited use for real world needs
31. 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.
32. 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
33. 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
34. XFJOSF <script src="http://127.0.0.1:9090/target/target-script-min.js#anonymous"></script>
35. EFCVHQIPOFHBQDPN
36. 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
37. J8FC*OTQFDUPS
38. J8FC*OTQFDUPS
39. 0QFSB
    %SBHPOGMZ
40. KTCJODPN
41. 4PDLFU#VH
42. tools for network debug.
43. '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
44. 'JEEMFS
45. 'JEEMFS
46. are u using mac?
47. $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
48. $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
49. Thanks!