{"id":35781,"date":"2023-08-17T11:16:47","date_gmt":"2023-08-17T05:46:47","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=35781"},"modified":"2023-08-17T17:24:32","modified_gmt":"2023-08-17T11:54:32","slug":"debug-the-javascript-code-from-dynamics-365-field-service-mobile-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/08\/debug-the-javascript-code-from-dynamics-365-field-service-mobile-app\/","title":{"rendered":"Debug the JavaScript code from Dynamics 365 Field Service Mobile App"},"content":{"rendered":"<p>Microsoft Dynamics 365 Field Service Mobile app provides the ability to work on the task and resolve issues using the mobile platform. Additionality it provides the feature to add custom JavaScript code on the form to execute some custom business logic. When the JavaScript web resource is added to the form, the developer can easily debug the related code from the web browser using the developer tool.<\/p>\n<p>When using the <a href=\"https:\/\/www.inogic.com\/services\/techno-functional-consulting\/microsoft-dynamics-365-crm-field-service\/\" target=\"_blank\" rel=\"noopener\">Microsoft Dynamics 365 Field Service<\/a> Mobile App, encountering errors can be frustrating, especially without the ability to debug the JavaScript code.<\/p>\n<p>Fortunately, in the latest release of Field Service, the app now offers remote debugging support i.e. <strong>\u201cEnable Remote Debugging for model-driven apps\u201d option<\/strong> is newly added to <strong>mobile app settings<\/strong>, which allows us to debug our code remotely using USB debugging from the mobile platform as well.<\/p>\n<p><strong>To remotely debug a JavaScript file, we need to follow below steps: <\/strong><\/p>\n<p><strong>Step 1:<\/strong> To Activate Developer options and USB debugging on our mobile device, we need to go to the settings app on our Android device (Phone setting) and search for Build Number. Once we find it, we need to tap it <strong>seven times<\/strong> to enable Developer options. We will receive a message that \u201cYou are now a developer\u201d.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-35788\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/1Field-Service-mobile-app.jpeg\" alt=\"Field Service mobile app\" width=\"504\" height=\"1085\" \/><\/p>\n<p><strong><em>Note:<\/em><\/strong><em> If we are unable to locate the build number, we can use below reference link,<\/em><\/p>\n<p><a href=\"https:\/\/developer.android.com\/studio\/debug\/dev-options#enable\" target=\"_blank\" rel=\"noopener\"><em>https:\/\/developer.android.com\/studio\/debug\/dev-options#enable<\/em><\/a><em>.<\/em><\/p>\n<p><strong>Step 2:<\/strong> To proceed, now we can activate USB debugging in our device&#8217;s system settings under the Developer options.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-35787\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/2Field-Service-mobile-app.jpeg\" alt=\"Field Service mobile app\" width=\"511\" height=\"1097\" \/><\/p>\n<p><strong>Step 3:<\/strong> To enable remote debugging, we need to navigate to the settings area from the mobile app where we can see the \u201c<strong>Enable Remote Debugging for model-driven apps<\/strong>\u201d option. Now we need to enable the same to enable debugging from our Dynamics 365 Field Service Mobile app<\/p>\n<p><a href=\"https:\/\/www.maplytics.com\/blog\/category\/field-service\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-35795\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/map-esri-2.png\" alt=\"map-esri\" width=\"700\" height=\"200\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/map-esri-2.png 700w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/map-esri-2-300x86.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/map-esri-2-660x189.png 660w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-35786\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/3Field-Service-mobile-app.jpeg\" alt=\"Field Service mobile app\" width=\"505\" height=\"929\" \/><\/p>\n<p><strong>Step 4:<\/strong> Once confirmed from the received confirmation dialogue we need to connect our Android device to our development machine, for that we need to use a USB cable. The first time we attempt to connect, we may receive a prompt on a phone from DevTools, to proceed, we need to accept the prompt requesting permission to enable USB debugging on our Android device.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-35785 aligncenter\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/4Field-Service-mobile-app.jpeg\" alt=\"Field Service mobile app\" width=\"510\" height=\"1123\" \/><\/p>\n<p><strong>Step 5:<\/strong> Now open the browser from the developer\/remote machine and navigate to Chrome and add the URL as \u201cchrome:\/\/inspect\/#devices\u201d. To access the debugging link, simply open our Field Service mobile app on our Android device. Our organization&#8217;s URL can be found in the &#8220;Remote Target&#8221; section on Chrome.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35784\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5Field-Service-mobile-app.jpeg\" alt=\"Field Service mobile app\" width=\"1920\" height=\"954\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5Field-Service-mobile-app.jpeg 1920w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5Field-Service-mobile-app-300x149.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5Field-Service-mobile-app-1024x509.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5Field-Service-mobile-app-768x382.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5Field-Service-mobile-app-1536x763.jpeg 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5Field-Service-mobile-app-660x328.jpeg 660w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><strong>Step 6<\/strong>: Now we can debug our code, by clicking on &#8220;Inspect&#8221; as shown in the above screenshot. Once clicked on inspect, we will be able to see the mobile app on the browser and can find added JavaScript libraries of the form.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35783\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6Field-Service-mobile-app.jpeg\" alt=\"Field Service mobile app\" width=\"910\" height=\"518\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6Field-Service-mobile-app.jpeg 910w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6Field-Service-mobile-app-300x171.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6Field-Service-mobile-app-768x437.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6Field-Service-mobile-app-660x376.jpeg 660w\" sizes=\"(max-width: 910px) 100vw, 910px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35782\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7Field-Service-mobile-app.jpeg\" alt=\"Field Service mobile app\" width=\"1224\" height=\"641\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7Field-Service-mobile-app.jpeg 1224w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7Field-Service-mobile-app-300x157.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7Field-Service-mobile-app-1024x536.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7Field-Service-mobile-app-768x402.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7Field-Service-mobile-app-660x346.jpeg 660w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7Field-Service-mobile-app-380x200.jpeg 380w\" sizes=\"(max-width: 1224px) 100vw, 1224px\" \/><\/p>\n<p><strong><em>Note:<\/em><\/strong><em> We can perform operations on mobile apps from the web browser as well as from the mobile device. <\/em><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>By enabling the \u201c<strong>Enable Remote Debugging for<a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-apps-model-driven-apps\/\" target=\"_blank\" rel=\"noopener\"> model-driven apps<\/a><\/strong>\u201d option of the Dynamics 365 Field Service Mobile app and using the above configuration, we can effectively debug the JavaScript code from our Field Service Mobile app as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Microsoft Dynamics 365 Field Service Mobile app provides the ability to work on the task and resolve issues using the mobile platform. Additionality it provides the feature to add custom JavaScript code on the form to execute some custom business logic. When the JavaScript web resource is added to the form, the developer can easily\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2023\/08\/debug-the-javascript-code-from-dynamics-365-field-service-mobile-app\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[27,2576],"tags":[2028],"class_list":["post-35781","post","type-post","status-publish","format-standard","hentry","category-field-service-2","category-model-driven-app","tag-model-driven-apps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/35781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=35781"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/35781\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=35781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=35781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=35781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}