e7a33bc32d0cc27d6d4701c280ea1483570333ba
wiki/howto/development/super-dev-mode.md
| ... | ... | @@ -0,0 +1,110 @@ |
| 1 | +# Super Dev Mode |
|
| 2 | + |
|
| 3 | +## What is Super Dev Mode? |
|
| 4 | + |
|
| 5 | +Modern browsers (Current versions of Chrome/FireFox and IE11+) support so called source maps. |
|
| 6 | +Source maps are used to map generated JavaScript code back to it's original source. |
|
| 7 | +For GWT this means, the JavaScript output of the GWT compiler is mapped back to the original Java Source code. |
|
| 8 | +This enables the browser to run JavaSript while showing Java code in the developer tools/debugger. |
|
| 9 | +This is implemented by GWT as Super Dev Mode (SDM). |
|
| 10 | + |
|
| 11 | +## How to use Super Dev Mode? |
|
| 12 | + |
|
| 13 | +Super Dev Mode is the default when using GWT 2.7. The project has a committed launch configuration "SailingGWT sdm.launch" that starts Super Dev Mode instead of Dev Mode (launch configuration "SailingGWT.launch"). |
|
| 14 | +When starting this configuration it will take much more time that the startup of classic Dev Mode but it will have much better performance later. |
|
| 15 | +When opening an entry point page you will see a popup while the Java code is compiled to JavaScript on the fly. This will also take some time. |
|
| 16 | +When changing some frontend code the compile will be much faster on refresh, as Super Dev Mode incrementally compiles only what changed. |
|
| 17 | + |
|
| 18 | +You can add "GWT.debugger();" statements to your Java code. |
|
| 19 | +This will force the JavaScript debugger to stop at this statement. |
|
| 20 | +So you don't have to manually open the file in the dev tools and set a break point. |
|
| 21 | + |
|
| 22 | +In addition, there's a composite launch configuration "SailingGWT All SDM.launch" that will start SDM for the SailingGWT modules as well as the Security UI modules. |
|
| 23 | + |
|
| 24 | +## Using Eclipse debugger for GWT SuperDevMode |
|
| 25 | + |
|
| 26 | +Debugging Java Code in the browser is very inconvenient (e.g. you have to manually open the files you already opened in Eclipse). |
|
| 27 | +Using Using Eclipse debugger for GWT SuperDevMode [[SDBG|http://sdbg.github.io/]] you can use Eclipse to debug SDM code running in Chrome. We have created an update site that does daily checks for new master commits on the Github project. So, for the couraged among you, use http://p2.sapsailing.com/p2/sdbg as your update site. All others will probably want to use http://sdbg.github.io/p2. |
|
| 28 | + |
|
| 29 | +### Starting a SDM debug session in Eclipse |
|
| 30 | + |
|
| 31 | +To start SDM debugging in Eclipse, do the following: |
|
| 32 | + |
|
| 33 | +* Start the backend as you would always do. |
|
| 34 | +* Start GWT Super Dev Mode by launching "SailingGWT sdm.launch" or "SailingGWT All SDM.launch". |
|
| 35 | +* Do not Click on the URLs provided in "Development view"! |
|
| 36 | +* Run "Debug SailingGWT SDM on Chrome.launch" |
|
| 37 | +* A new instance of Chrome is started and you will see a debug session running in Eclipse |
|
| 38 | +* Your Eclipse break points will now work in the running debug session. |
|
| 39 | +* You are free to change the URL or navigate to other pages in the automatically openend browser window (debugging will go on) |
|
| 40 | + |
|
| 41 | +### Noteworthy information & Troubleshooting |
|
| 42 | + |
|
| 43 | +If you are faced with an error stating that your Chrome installation isn't found, do the following: |
|
| 44 | + |
|
| 45 | +* Edit your "eclipse.ini" file |
|
| 46 | +* Add a new line: -Dchrome.location=<PATH/TO/CHROME/BINARY> |
|
| 47 | + * This line must be added after "-vmargs" |
|
| 48 | + * There must not be any quotation marks around the path (even if there are whitespaces in the path) |
|
| 49 | +* Save the file and restart Eclipse |
|
| 50 | + |
|
| 51 | +Be aware that some of the Eclipse debugger features do NOT work with this kind of debug session or work differently: |
|
| 52 | + |
|
| 53 | +* Logical views of certain data structures (e.g. Collections) aren't supported |
|
| 54 | +* Exception break points do not work (use a break point in the specific Exception constructor instead) |
|
| 55 | +* Variable naming is not 1:1 what you expect in the Java world |
|
| 56 | +* Stacks look different but clicking on Stack elements should |
|
| 57 | +* [[Stack Traces logged in Chrome do not use source maps|https://code.google.com/p/chromium/issues/detail?id=357958]], so you see the JavaScript Stack Trace instead. |
|
| 58 | + |
|
| 59 | +## Debugging SDM on Android devices |
|
| 60 | + |
|
| 61 | +### Requirements |
|
| 62 | + |
|
| 63 | +To enable [[https://developer.chrome.com/devtools/docs/remote-debugging|remote debugging for your Android device]] do the following steps: |
|
| 64 | + |
|
| 65 | +* Go to the System settings |
|
| 66 | +* If you do not see the "Developer options" menu, go to "About the device" and tap multiple times on "Build number" until a message appears |
|
| 67 | +* Go to the "Developer options" menu |
|
| 68 | +* Activate "USB debugging" |
|
| 69 | +* A notification apears in the system notification center while USB-debugging is turned on |
|
| 70 | + |
|
| 71 | +Other requirements: |
|
| 72 | + |
|
| 73 | +* You need Android 4.0+ to make remote debugging work |
|
| 74 | +* You need a recent version of Chrome installed on both, the Android device and your development system |
|
| 75 | + |
|
| 76 | +To be able to discover your Chrome browser running on the Android device from your development system you need to do the following: |
|
| 77 | + |
|
| 78 | +* Connect your device with USB-debugging turned on to your development system |
|
| 79 | +* Open Chrome on the Android device |
|
| 80 | + |
|
| 81 | +### Debugging via Desktop Chrome |
|
| 82 | + |
|
| 83 | +Do the following to start a debugging session via Chrome installed on your development system: |
|
| 84 | + |
|
| 85 | +* Open Chrome on your development system and navigate to [[chrome://inspect/#devices]] |
|
| 86 | +* Only the first time you need to configure the needed ports: |
|
| 87 | + * Check "Discover USB Devices |
|
| 88 | + * Click the button "Port forwarding ..." |
|
| 89 | + * Add an Entry for Port "8888" for address "localhost:8888" |
|
| 90 | + * Add an Entry for Port "9876" for address "localhost:9876" |
|
| 91 | + * Close the dialog |
|
| 92 | +* Enter the URL (e.g. [[http://localhost:8888/gwt/Home.html]]) nearby the connected Chrome browser of your device and press open |
|
| 93 | +* The specified URL will be opended in a new tab on your android device |
|
| 94 | +* A new window with an instance of the developer tools will appear on the development system |
|
| 95 | + * If it doesn't open automatically press "inspect" for the browser tab |
|
| 96 | +* You can now go to "Sources" and debug the source-mapped JS source as it is a local browser tab |
|
| 97 | + |
|
| 98 | +### Debugging via SDBG |
|
| 99 | + |
|
| 100 | +To debug SDM on your Android Chrome via SDBG do the following: |
|
| 101 | + |
|
| 102 | +* Get to know your Device ID |
|
| 103 | + * Navigate to [[chrome://inspect/#devices]] using your desktop Chrome while the device is connected with USB-Debugging turned on |
|
| 104 | + * The Device ID is shown next to the device name |
|
| 105 | + * Take the Device ID without the prefixed "#" |
|
| 106 | +* Copy the launch configuration templates "Debug SailingGWT SDM on Android.launch.template" and "Forward SailingGWT Ports for Android.launch.template" as *.launch files |
|
| 107 | +* Replace <YOUR-DEVICE> with your concrete Device ID |
|
| 108 | +* Launch "Forward SailingGWT Ports for Android.launch" |
|
| 109 | +* Launch "Debug SailingGWT SDM on Android.launch" |
|
| 110 | +* You should now be able to debug in Eclipse as described above |
wiki/super-dev-mode.md
| ... | ... | @@ -1,110 +0,0 @@ |
| 1 | -# Super Dev Mode |
|
| 2 | - |
|
| 3 | -## What is Super Dev Mode? |
|
| 4 | - |
|
| 5 | -Modern browsers (Current versions of Chrome/FireFox and IE11+) support so called source maps. |
|
| 6 | -Source maps are used to map generated JavaScript code back to it's original source. |
|
| 7 | -For GWT this means, the JavaScript output of the GWT compiler is mapped back to the original Java Source code. |
|
| 8 | -This enables the browser to run JavaSript while showing Java code in the developer tools/debugger. |
|
| 9 | -This is implemented by GWT as Super Dev Mode (SDM). |
|
| 10 | - |
|
| 11 | -## How to use Super Dev Mode? |
|
| 12 | - |
|
| 13 | -Super Dev Mode is the default when using GWT 2.7. The project has a committed launch configuration "SailingGWT sdm.launch" that starts Super Dev Mode instead of Dev Mode (launch configuration "SailingGWT.launch"). |
|
| 14 | -When starting this configuration it will take much more time that the startup of classic Dev Mode but it will have much better performance later. |
|
| 15 | -When opening an entry point page you will see a popup while the Java code is compiled to JavaScript on the fly. This will also take some time. |
|
| 16 | -When changing some frontend code the compile will be much faster on refresh, as Super Dev Mode incrementally compiles only what changed. |
|
| 17 | - |
|
| 18 | -You can add "GWT.debugger();" statements to your Java code. |
|
| 19 | -This will force the JavaScript debugger to stop at this statement. |
|
| 20 | -So you don't have to manually open the file in the dev tools and set a break point. |
|
| 21 | - |
|
| 22 | -In addition, there's a composite launch configuration "SailingGWT All SDM.launch" that will start SDM for the SailingGWT modules as well as the Security UI modules. |
|
| 23 | - |
|
| 24 | -## Using Eclipse debugger for GWT SuperDevMode |
|
| 25 | - |
|
| 26 | -Debugging Java Code in the browser is very inconvenient (e.g. you have to manually open the files you already opened in Eclipse). |
|
| 27 | -Using Using Eclipse debugger for GWT SuperDevMode [[SDBG|http://sdbg.github.io/]] you can use Eclipse to debug SDM code running in Chrome. We have created an update site that does daily checks for new master commits on the Github project. So, for the couraged among you, use http://p2.sapsailing.com/p2/sdbg as your update site. All others will probably want to use http://sdbg.github.io/p2. |
|
| 28 | - |
|
| 29 | -### Starting a SDM debug session in Eclipse |
|
| 30 | - |
|
| 31 | -To start SDM debugging in Eclipse, do the following: |
|
| 32 | - |
|
| 33 | -* Start the backend as you would always do. |
|
| 34 | -* Start GWT Super Dev Mode by launching "SailingGWT sdm.launch" or "SailingGWT All SDM.launch". |
|
| 35 | -* Do not Click on the URLs provided in "Development view"! |
|
| 36 | -* Run "Debug SailingGWT SDM on Chrome.launch" |
|
| 37 | -* A new instance of Chrome is started and you will see a debug session running in Eclipse |
|
| 38 | -* Your Eclipse break points will now work in the running debug session. |
|
| 39 | -* You are free to change the URL or navigate to other pages in the automatically openend browser window (debugging will go on) |
|
| 40 | - |
|
| 41 | -### Noteworthy information & Troubleshooting |
|
| 42 | - |
|
| 43 | -If you are faced with an error stating that your Chrome installation isn't found, do the following: |
|
| 44 | - |
|
| 45 | -* Edit your "eclipse.ini" file |
|
| 46 | -* Add a new line: -Dchrome.location=<PATH/TO/CHROME/BINARY> |
|
| 47 | - * This line must be added after "-vmargs" |
|
| 48 | - * There must not be any quotation marks around the path (even if there are whitespaces in the path) |
|
| 49 | -* Save the file and restart Eclipse |
|
| 50 | - |
|
| 51 | -Be aware that some of the Eclipse debugger features do NOT work with this kind of debug session or work differently: |
|
| 52 | - |
|
| 53 | -* Logical views of certain data structures (e.g. Collections) aren't supported |
|
| 54 | -* Exception break points do not work (use a break point in the specific Exception constructor instead) |
|
| 55 | -* Variable naming is not 1:1 what you expect in the Java world |
|
| 56 | -* Stacks look different but clicking on Stack elements should |
|
| 57 | -* [[Stack Traces logged in Chrome do not use source maps|https://code.google.com/p/chromium/issues/detail?id=357958]], so you see the JavaScript Stack Trace instead. |
|
| 58 | - |
|
| 59 | -## Debugging SDM on Android devices |
|
| 60 | - |
|
| 61 | -### Requirements |
|
| 62 | - |
|
| 63 | -To enable [[https://developer.chrome.com/devtools/docs/remote-debugging|remote debugging for your Android device]] do the following steps: |
|
| 64 | - |
|
| 65 | -* Go to the System settings |
|
| 66 | -* If you do not see the "Developer options" menu, go to "About the device" and tap multiple times on "Build number" until a message appears |
|
| 67 | -* Go to the "Developer options" menu |
|
| 68 | -* Activate "USB debugging" |
|
| 69 | -* A notification apears in the system notification center while USB-debugging is turned on |
|
| 70 | - |
|
| 71 | -Other requirements: |
|
| 72 | - |
|
| 73 | -* You need Android 4.0+ to make remote debugging work |
|
| 74 | -* You need a recent version of Chrome installed on both, the Android device and your development system |
|
| 75 | - |
|
| 76 | -To be able to discover your Chrome browser running on the Android device from your development system you need to do the following: |
|
| 77 | - |
|
| 78 | -* Connect your device with USB-debugging turned on to your development system |
|
| 79 | -* Open Chrome on the Android device |
|
| 80 | - |
|
| 81 | -### Debugging via Desktop Chrome |
|
| 82 | - |
|
| 83 | -Do the following to start a debugging session via Chrome installed on your development system: |
|
| 84 | - |
|
| 85 | -* Open Chrome on your development system and navigate to [[chrome://inspect/#devices]] |
|
| 86 | -* Only the first time you need to configure the needed ports: |
|
| 87 | - * Check "Discover USB Devices |
|
| 88 | - * Click the button "Port forwarding ..." |
|
| 89 | - * Add an Entry for Port "8888" for address "localhost:8888" |
|
| 90 | - * Add an Entry for Port "9876" for address "localhost:9876" |
|
| 91 | - * Close the dialog |
|
| 92 | -* Enter the URL (e.g. [[http://localhost:8888/gwt/Home.html]]) nearby the connected Chrome browser of your device and press open |
|
| 93 | -* The specified URL will be opended in a new tab on your android device |
|
| 94 | -* A new window with an instance of the developer tools will appear on the development system |
|
| 95 | - * If it doesn't open automatically press "inspect" for the browser tab |
|
| 96 | -* You can now go to "Sources" and debug the source-mapped JS source as it is a local browser tab |
|
| 97 | - |
|
| 98 | -### Debugging via SDBG |
|
| 99 | - |
|
| 100 | -To debug SDM on your Android Chrome via SDBG do the following: |
|
| 101 | - |
|
| 102 | -* Get to know your Device ID |
|
| 103 | - * Navigate to [[chrome://inspect/#devices]] using your desktop Chrome while the device is connected with USB-Debugging turned on |
|
| 104 | - * The Device ID is shown next to the device name |
|
| 105 | - * Take the Device ID without the prefixed "#" |
|
| 106 | -* Copy the launch configuration templates "Debug SailingGWT SDM on Android.launch.template" and "Forward SailingGWT Ports for Android.launch.template" as *.launch files |
|
| 107 | -* Replace <YOUR-DEVICE> with your concrete Device ID |
|
| 108 | -* Launch "Forward SailingGWT Ports for Android.launch" |
|
| 109 | -* Launch "Debug SailingGWT SDM on Android.launch" |
|
| 110 | -* You should now be able to debug in Eclipse as described above |