{"id":468,"date":"2016-09-30T21:08:16","date_gmt":"2016-09-30T19:08:16","guid":{"rendered":"http:\/\/h2916922.stratoserver.net:8084\/?p=468"},"modified":"2016-10-10T13:46:57","modified_gmt":"2016-10-10T11:46:57","slug":"debugging-your-icn-plugin-or-widget","status":"publish","type":"post","link":"https:\/\/www.ivojonker.nl\/?p=468","title":{"rendered":"Debugging your ICN plugins (or ICM widgets)"},"content":{"rendered":"<p>Case Manager developers are expected to be multi disciplinary. e.g. they&#8217;re expected to be experienced ECM consultants, guru in solution design, expert in Filenet P8 configuration\/development, and both Java EE as wel as Web expert.<\/p>\n<p>The thing is, most of the developers only excel in one,\u00a0and lack expert knowledge of another. In practice most will definately be able to create some java (or dojo), but more than once i&#8217;ve seen people get stuck on the debugging. So, in this article, i&#8217;ll share a few short lines on how to debug your widgets\/plugins.<\/p>\n<h2><strong>Debugging java-code that&#8217;s run on the server.<\/strong><\/h2>\n<p><em>This part assumes the use of Websphere and Eclipse.<\/em><\/p>\n<p>First of all, know that all your Case Manager Widget&#8217;s or Content Navigator plugin&#8217;s java-code runs on the server. The .ear files you&#8217;ve included within your widget.zip are installed as applications on the webserver; and the navigator plugins you&#8217;ve included are run from within the Navigator web-application -&gt; that&#8217;s run on Websphere as well.<\/p>\n<p>So following that your java code is run on Websphere there are two things we need to do to be able to debug.<\/p>\n<p><strong>1. Enable debug-mode in Websphere.<\/strong><\/p>\n<p>When enabling debug mode within Websphere, we bascially set enable debug mode in the Java Virtual machine. The easiest way to do this is by using the WAS console (https:\/\/&lt;server&gt;:9043\/ibm\/console)<\/p>\n<p>Step 1. Login to the WAS console and locate your server (server1 in the below screenshot). Click on it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-471\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-1024x296.png\" alt=\"debugging-screenshot-1\" width=\"1024\" height=\"296\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-1024x296.png 1024w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-300x87.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-768x222.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-750x217.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-400x116.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-430x124.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-150x43.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1-100x29.png 100w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-1.png 1055w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Step 2. In the screen that follows, locate \u00a0&#8220;Debugging Service&#8221; \u00a0under &#8220;Additional Properties&#8221;, click it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-475\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-2.png\" alt=\"debugging-screenshot-2\" width=\"507\" height=\"660\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-2.png 507w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-2-230x300.png 230w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-2-400x521.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-2-430x560.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-2-150x195.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-2-100x130.png 100w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Step 3. Check the &#8220;Enable service at server startup&#8221; and enter a &#8220;JVM-debug port&#8221;. Can be be arbitrary as long as it&#8217;s not in use.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-473\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-1024x439.png\" alt=\"debugging-screenshot-3\" width=\"1024\" height=\"439\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-1024x439.png 1024w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-300x128.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-768x329.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-750x321.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-400x171.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-430x184.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-150x64.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3-100x43.png 100w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-3.png 1137w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Step 4. Reboot Websphere. The debugging port won&#8217;t be upon until after reboot.<\/p>\n<p><strong>2.\u00a0Connect to the JVM debug port using Eclipse.<\/strong><\/p>\n<p>Step 1. Open the Debug Configurations screen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-476\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-4.png\" alt=\"debugging-screenshot-4\" width=\"755\" height=\"189\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-4.png 755w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-4-300x75.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-4-750x188.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-4-400x100.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-4-430x108.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-4-150x38.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-4-100x25.png 100w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><\/p>\n<p>Step 2. Add a new &#8220;Remote Java Application&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-477\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5.png\" alt=\"debugging-screenshot-5\" width=\"834\" height=\"802\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5.png 834w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5-300x288.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5-768x739.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5-750x721.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5-400x385.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5-430x414.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5-150x144.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-5-100x96.png 100w\" sizes=\"auto, (max-width: 834px) 100vw, 834px\" \/><\/p>\n<p>Step 3. Choose the Project you want to debug and enter the your websphere IP as HOST, and port 7777 as port. Then press debug. The screen will close, and the debugger will connect.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-478\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6.png\" alt=\"debugging-screenshot-6\" width=\"843\" height=\"820\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6.png 843w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6-300x292.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6-768x747.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6-750x730.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6-400x389.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6-430x418.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6-150x146.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-6-100x97.png 100w\" sizes=\"auto, (max-width: 843px) 100vw, 843px\" \/><\/p>\n<p><strong>3. Set your breakpoints and debug.<\/strong><\/p>\n<p>Place your breakpoint, execute the corresponding functionality in your application and watch the debugger kick in.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-479\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-1024x554.png\" alt=\"debugging-screenshot-7\" width=\"1024\" height=\"554\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-1024x554.png 1024w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-300x162.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-768x415.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-750x406.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-400x216.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-430x233.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-150x81.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7-100x54.png 100w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/10\/Debugging-screenshot-7.png 1429w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2><strong>Debugging your widget&#8217;s javascript.<\/strong><\/h2>\n<p>Debugging javascript is quite easy in modern browsers. Although IBM cleary notes it&#8217;s designing its products for use with FireFox and Internet Explorer, i personally prefer Chrome.<\/p>\n<p>When in chrome, simply press the F12 key. \u00a0In the screen that opens (The Developer Tools) then search for the Sources tab. This tab will list all .js files loaded, including your plugin script.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-483\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-1024x574.png\" alt=\"debugging-screenshot-8\" width=\"1024\" height=\"574\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-1024x574.png 1024w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-300x168.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-768x431.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-750x421.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-400x224.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-430x241.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-150x84.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8-100x56.png 100w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-8.png 1373w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>An easier way to locate your line of code, is by pressint CTRL+SHIFT+F, allowing you to search all code for a specific line as shown below.<\/p>\n<p><a href=\"http:\/\/h2916922.stratoserver.net:8084\/?attachment_id=484\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-484 size-large\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-1024x574.png\" alt=\"debugging-screenshot-9\" width=\"1024\" height=\"574\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-1024x574.png 1024w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-300x168.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-768x431.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-750x421.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-400x224.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-430x241.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-150x84.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9-100x56.png 100w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-9.png 1373w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>Once you&#8217;ve found your file, just click the line-numbers to place a breakpoint and you&#8217;re set!<\/p>\n<h2><strong>Debugging your\u00a0Script-adapter&#8217;s javascript.<\/strong><\/h2>\n<p>The above doesn&#8217;t really count for script adapters. As the script written in the adapters is executed through eval() or runscript. There are two workarounds.<\/p>\n<ol>\n<li>Externalize your script in a .js and call it from the script adapter.<br \/>\nNo much explanation needed i guess \ud83d\ude42<\/li>\n<li>Make use of the debugger; statement.<br \/>\nThe debugger statement will force to hold execution whenever the Developer Tools are open (all browsers supported). The below screenshots demonstrates a simple ScriptAdapter that pauses on the debugger statement.<\/li>\n<\/ol>\n<p>Additionally, if you can also drag your script-adapter from the hidden part in the page-designer onto the page. This way your script adapter will (if checked) actively show the payloads received by your script adapter.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-485\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-1024x574.png\" alt=\"debugging-screenshot-10\" width=\"1024\" height=\"574\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-1024x574.png 1024w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-300x168.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-768x431.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-750x421.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-400x224.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-430x241.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-150x84.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10-100x56.png 100w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2016\/09\/Debugging-screenshot-10.png 1373w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Case Manager developers are expected to be multi disciplinary. e.g. they&#8217;re expected to be experienced ECM consultants, guru in solution design, expert in Filenet P8 configuration\/development, and both Java EE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-468","post","type-post","status-publish","format-standard","hentry","category-geen-categorie"],"_links":{"self":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=468"}],"version-history":[{"count":8,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/468\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/468\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}