debugging mobile web applications with - o'reilly...

50
Debugging Mobile Web Applications with weinre for OSCON 2011 Patrick Mueller IBM Research Triangle Park, NC @pmuellr 1

Upload: nguyennga

Post on 24-Mar-2018

222 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

Debugging Mobile Web Applications with

weinrefor OSCON 2011

Patrick MuellerIBM Research Triangle Park NC

pmuellr

1

2

copy Copyright IBM Corp 2011blah blah blah

copy of this presentation available at

httpmuellerwareorgpapers

underlined text in this presentation is a link to a web page

resources

bull documentation - httpphonegapgithubcomweinre

bull source issue tracker - httpsgithubcomphonegapweinre

bull discussion - httpgroupsgooglecomgroupweinre

bull Chrome Developer Tools - httpcodegooglecomchromedevtoolsdocsoverviewhtml

bull this doc gives a good overview of Real Web Inspector

3

ldquoweinrerdquo pronunciation

bull like ldquowineryrdquo

bull not like ldquoweinerrdquo or ldquowienerrdquo

bull I donrsquot really care

4

deconstructproject presention name

bull weinre === WEb INspector REmote

bull reuses WebKitrsquos Web Inspector user interface

bull works remotely - debug a web page running on a device from your desktop

bull mobile web applications - web pages running in a mobile browser or in a native mobile app using a browsing control (eg PhoneGap)

bull debug those web applications

5

how does it work

bull access a public weinre server or run your own

bull add a ltscript src=gt into pages you want to debug the src attribute points to a js file provided by the weinre server

bull run the web application on your device

bull access the debugging user interface (a web page) from the weinre server from your desktop

bull debug

6

supported featuresbull DOM CSS inspector

bull inspect edit delete DOM elements and CSS rules

bull localStorage WebSQL inspector

bull event timeline

bull add your own events to the timeline

bull console

bull run arbitrary JavaScript code in your web page

7

DOM CSS inspector

8

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 2: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

2

copy Copyright IBM Corp 2011blah blah blah

copy of this presentation available at

httpmuellerwareorgpapers

underlined text in this presentation is a link to a web page

resources

bull documentation - httpphonegapgithubcomweinre

bull source issue tracker - httpsgithubcomphonegapweinre

bull discussion - httpgroupsgooglecomgroupweinre

bull Chrome Developer Tools - httpcodegooglecomchromedevtoolsdocsoverviewhtml

bull this doc gives a good overview of Real Web Inspector

3

ldquoweinrerdquo pronunciation

bull like ldquowineryrdquo

bull not like ldquoweinerrdquo or ldquowienerrdquo

bull I donrsquot really care

4

deconstructproject presention name

bull weinre === WEb INspector REmote

bull reuses WebKitrsquos Web Inspector user interface

bull works remotely - debug a web page running on a device from your desktop

bull mobile web applications - web pages running in a mobile browser or in a native mobile app using a browsing control (eg PhoneGap)

bull debug those web applications

5

how does it work

bull access a public weinre server or run your own

bull add a ltscript src=gt into pages you want to debug the src attribute points to a js file provided by the weinre server

bull run the web application on your device

bull access the debugging user interface (a web page) from the weinre server from your desktop

bull debug

6

supported featuresbull DOM CSS inspector

bull inspect edit delete DOM elements and CSS rules

bull localStorage WebSQL inspector

bull event timeline

bull add your own events to the timeline

bull console

bull run arbitrary JavaScript code in your web page

7

DOM CSS inspector

8

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 3: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

resources

bull documentation - httpphonegapgithubcomweinre

bull source issue tracker - httpsgithubcomphonegapweinre

bull discussion - httpgroupsgooglecomgroupweinre

bull Chrome Developer Tools - httpcodegooglecomchromedevtoolsdocsoverviewhtml

bull this doc gives a good overview of Real Web Inspector

3

ldquoweinrerdquo pronunciation

bull like ldquowineryrdquo

bull not like ldquoweinerrdquo or ldquowienerrdquo

bull I donrsquot really care

4

deconstructproject presention name

bull weinre === WEb INspector REmote

bull reuses WebKitrsquos Web Inspector user interface

bull works remotely - debug a web page running on a device from your desktop

bull mobile web applications - web pages running in a mobile browser or in a native mobile app using a browsing control (eg PhoneGap)

bull debug those web applications

5

how does it work

bull access a public weinre server or run your own

bull add a ltscript src=gt into pages you want to debug the src attribute points to a js file provided by the weinre server

bull run the web application on your device

bull access the debugging user interface (a web page) from the weinre server from your desktop

bull debug

6

supported featuresbull DOM CSS inspector

bull inspect edit delete DOM elements and CSS rules

bull localStorage WebSQL inspector

bull event timeline

bull add your own events to the timeline

bull console

bull run arbitrary JavaScript code in your web page

7

DOM CSS inspector

8

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 4: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

ldquoweinrerdquo pronunciation

bull like ldquowineryrdquo

bull not like ldquoweinerrdquo or ldquowienerrdquo

bull I donrsquot really care

4

deconstructproject presention name

bull weinre === WEb INspector REmote

bull reuses WebKitrsquos Web Inspector user interface

bull works remotely - debug a web page running on a device from your desktop

bull mobile web applications - web pages running in a mobile browser or in a native mobile app using a browsing control (eg PhoneGap)

bull debug those web applications

5

how does it work

bull access a public weinre server or run your own

bull add a ltscript src=gt into pages you want to debug the src attribute points to a js file provided by the weinre server

bull run the web application on your device

bull access the debugging user interface (a web page) from the weinre server from your desktop

bull debug

6

supported featuresbull DOM CSS inspector

bull inspect edit delete DOM elements and CSS rules

bull localStorage WebSQL inspector

bull event timeline

bull add your own events to the timeline

bull console

bull run arbitrary JavaScript code in your web page

7

DOM CSS inspector

8

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 5: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

deconstructproject presention name

bull weinre === WEb INspector REmote

bull reuses WebKitrsquos Web Inspector user interface

bull works remotely - debug a web page running on a device from your desktop

bull mobile web applications - web pages running in a mobile browser or in a native mobile app using a browsing control (eg PhoneGap)

bull debug those web applications

5

how does it work

bull access a public weinre server or run your own

bull add a ltscript src=gt into pages you want to debug the src attribute points to a js file provided by the weinre server

bull run the web application on your device

bull access the debugging user interface (a web page) from the weinre server from your desktop

bull debug

6

supported featuresbull DOM CSS inspector

bull inspect edit delete DOM elements and CSS rules

bull localStorage WebSQL inspector

bull event timeline

bull add your own events to the timeline

bull console

bull run arbitrary JavaScript code in your web page

7

DOM CSS inspector

8

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 6: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

how does it work

bull access a public weinre server or run your own

bull add a ltscript src=gt into pages you want to debug the src attribute points to a js file provided by the weinre server

bull run the web application on your device

bull access the debugging user interface (a web page) from the weinre server from your desktop

bull debug

6

supported featuresbull DOM CSS inspector

bull inspect edit delete DOM elements and CSS rules

bull localStorage WebSQL inspector

bull event timeline

bull add your own events to the timeline

bull console

bull run arbitrary JavaScript code in your web page

7

DOM CSS inspector

8

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 7: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

supported featuresbull DOM CSS inspector

bull inspect edit delete DOM elements and CSS rules

bull localStorage WebSQL inspector

bull event timeline

bull add your own events to the timeline

bull console

bull run arbitrary JavaScript code in your web page

7

DOM CSS inspector

8

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 8: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

DOM CSS inspector

8

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 9: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

sql localStorage inspector

9

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 10: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

event timeline

10

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 11: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

console

11

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 12: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

not supported

bull JavaScript debugging no breakpoints pausing stepping

bull most of the networking diagnostics

bull most of the resource diagnostics

bull profiling

bull audits

12

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 13: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

why is ltXYZgt not supported

bull in some cases the work has not been done yet

bull in other cases not possible or very hard usually because

bull weinre is written using plain old JavaScript

bull no JavaScript APIs for breakpointsstepping JavaScript code

bull no JavaScript APIs for low-level resource information

13

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 14: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

demo

find a demo on YouTubehttpwwwyoutubecomresultssearch_query=weinre

14

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 15: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

terminology

bull debug target - the web page you want to debug

bull debug client - the web page showing the Web Inspector user interface

bull debug server - the HTTP server which services as a message switchboard between the debug target and debug client

15

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 16: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

using weinre

bull Two options

bull use debugphonegapcom hosted by Nitobi (thanks)

bull download the server and run it yourself

16

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 17: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

debugphonegapcom

17

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 18: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

pick a guid unique id

bull weinre does not use any kind of security between debug clients and targets

bull the unique id keeps other peoplersquos debug clients from connecting to your debug target

bull if you want to collaboratively debug share your unique id with a colleague

18

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 19: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

run your own server

bull download unzip the ldquojarrdquo build from httpsgithubcomphonegapweinredownloads

bull run ldquojava -jar weinrejar --boundHost -all-rdquo

bull requires Java

bull add the following to your web page and reload itltscript src=http[server-ip]8081targettarget-script-minjsgtltscriptgt

19

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 20: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

run your own server (continued)

bull browse to httplocalhost8080

bull the ldquoRemoterdquo panel should list your web application in green

bull that means itrsquos connected

bull start debugging

20

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 21: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

connected to your server

21

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 22: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

hard part using your own server the serverrsquos ip address

bull aka ldquobound hostrdquo

bull --boundHost -all- option allows all ip address on the box to act as server default is localhost

bull serverrsquos ip address goes in the ltscript src=gt element embedded in your web application

bull that ip address must be reachable from your device to your server

bull probably not 127001 or localhost (maybe for emulator)

22

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 23: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

whatrsquos your serverrsquos ip address

bull Windows command line ipconfig

bull MacLinux command line ifconfig

bull weinre on your desktop httplocalhost8080client

23

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 24: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

weinre knows your bound hosts

24

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 25: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

problem your ip address changessolution dynamic dns service

bull your ip address probably changes every day

bull meaning you need to change the URL in your web pages every day

bull pro-tip use a dynamic dns service with an update client

bull now you can use a host name that never changes

25

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 26: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

server command-line options

bull see httpphonegapgithubcomweinreRunninghtml

bull ldquo--boundHost -all-rdquo allows you to connect to the server from another machine (default only allows connections from same machine)

bull ldquo--httpPort ltnumbergtrdquo allows you to change the server port

26

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 27: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

running the Mac application

bull a Mac application is also available

bull runs the server in a window which also displays the Web Inspector user interface

bull built using Eclipse SWT - theoretically possible to port to Windows Linux

27

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 28: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

mac app

28

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 29: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

bookmarklet

bull possible to inject weinre target code into any web page with a bookmarket

bull instructions available on weinrersquos main server page (when you run the server)

bull not trivial to install on iOS or Android and requires modern version of Android

29

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 30: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

collaborative debug

bull multiple debug clients can connect to a single debug target

bull must use a shared unique id

bull not well tested

bull not a design feature just the way the web works

30

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 31: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

future

31

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 32: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

should be dim

bull WebKit now has Remote Web Inspector baked inhttpwwwwebkitorgblog1620webkit-remote-debugging

bull RIM shipping Remote Web Inspector for Playbook

bull Apple Donrsquot know or if I did Irsquod have to kill you then myself

bull Google ldquoIm afraid we have no plans right now to enable this featurerdquohttpbitlyr1clCt (webkit-dev mailing list)

32

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 33: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

easier better PhoneGap integration

bull examples

bull auto-inject weinre JavaScript code into your app

bull diagnostics for PhoneGap-provided events

bull run weinre server IN your app

33

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 34: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

current issues logged

bull port the server to nodejs use socketio for communications

bull allows removal of the ldquomessage queuerdquo code in Java and JavaScript

bull allows WebSocket usage for better latency less overhead (instead of XHR)

bull allows reuse of code between server and browser (wouldnrsquot be much though)

34

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 35: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

current issues logged

bull extension system that works

bull there is an extension mechanism in place today based on Web Inspectorrsquos extension mechanism

bull allows adding new panels and any other hacking

bull hardimpossible to use needs a re-write

35

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 36: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

current issues logged

bull provide better error handling

bull error support not great for mobile devices - ldquoonerrorrdquo not yet ubiquitous

bull can hook event handlers to provide trycatch with diagnostics for callbacks

bull catching errors at initial load time is still hard

36

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 37: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

until then

bull if you need something fixed or added

bull write a bug - httpsgithubcomphonegapweinreissues

bull ask a question - httpsgroupsgooglecomgroupweinre

bull DIY fork it - httpsgithubcomphonegap

37

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 38: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

innards

38

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 39: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

target server communication

39

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 40: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

communication

40

bull Web Inspector

bull defines JSON-able messages sent between client and target

bull provides service framework to hook in message handlers

bull provides hooks at start-up time to start your own infrastructure

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 41: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

consolelog(ldquohello worldrdquo)

41

interface ConsoleNotify method addConsoleMessage args [ message hello world level 1 source 3 type 0 parameters [ hasChildren false description hello world type string ] ]

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 42: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

message interface methods

bull specified in WebKit via

bull old WebIDL-ish files (weinre currently using this version) converted to JSON in weinre build

bull new JSON files

bull data sent in messages not defined - ldquoread the sourcerdquo

42

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 43: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

to implement weinre

bull target must respond to clientrsquos messages correctly

bull target must send events correctly

bull basically implement the target code - for Real Web Inspector this is mainly C++ with some in JavaScript (we reuse their JavaScript)

bull set up message queue and dispatch interface in target and client

43

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 44: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

HTTP usage

bull client and target use the same JavaScript framework for message sending receiving

bull message queue-ish REST-ish implemented with XHR (not WebSocket)

bull requires Cross-Origin Resource Sharing (CORS) to let target communicate cross-origin to weinre server

bull target and client do not communicate directly always through server

44

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 45: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

HTTP XHR message flow

45

servertarget client

GET messages GET messages

POST message POST message

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 46: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

source

46

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 47: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

reused components

47

bull Apache CLI - command line parser used by the server

bull Eclipse Jetty - HTTP server used by the server (itrsquos not a war)

bull Apache Wink JSON4J - JSON code for Java from used by server

bull WebKitrsquos Web Inspector - user interface used by the client

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 48: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

Web Inspector reuse

48

JavaScript 116 files 48000 lines 17 MBCSS 9 files 6200 lines 140 KBHTML 1 file 175 lines 12 KB

bull Almost all of this is for the ldquoclientrdquo - the debugger user interface

bull WebKit-specific wonrsquot run on FireFox IE Opera etc

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 49: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

JavaScript modules

bull almost all JavaScript

bull written as CommonJS modules using modjewel

bull written as in classical OO style using scooj preprocessor

bull looking at automagically porting from scooj to CoffeeScript using js2coffee

49

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50

Page 50: Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

build script

bull monster Ant script

bull downloads pre-reqs (if not already downloaded)

bull compile Java (optional can also use Eclipse to do that)

bull bundle all the junk together

bull if we port the server to nodejs will convert to a Makefile

50