{"id":12102,"date":"2020-11-24T17:56:13","date_gmt":"2020-11-24T17:56:13","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=12102"},"modified":"2023-05-22T19:27:56","modified_gmt":"2023-05-22T19:27:56","slug":"how-to-debug-javascript-in-filemaker","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/how-to-debug-javascript-in-filemaker\/","title":{"rendered":"How to Debug JavaScript in FileMaker"},"content":{"rendered":"
\"How<\/figure>

It\u2019s easy to debug and experiment with JavaScript code in a web browser, yet difficult to debug JavaScript in FileMaker. Here\u2019s a workaround.<\/strong><\/p>

JavaScript<\/h3>

Utilizing JavaScript in your FileMaker solution can open up an array of new possibilities for design and functionality. With a little bit (or a lot!) of HTML, CSS, and JavaScript, you can access design frameworks like Bootstrap<\/a>, or integrate different charting features using one of the many JavaScript-based chart libraries available. <\/p>

JavaScript is a favorite among web developers, as most web browsers have built-in tools for debugging and experimenting with code. By right-clicking in the browser window, you can select the \u201cInspect,\u201d or \u201cInspect Element\u201d option to open developer tools in a side panel.<\/p>

\"\"<\/figure>

Safari Development Tools<\/p>

Debugging custom HTML, CSS, and JavaScript in FileMaker, however, is a little trickier. Since everything in FileMaker is routed through a text field, you don\u2019t get the built-in debugging tools of either a browser or an IDE, so you have to write your code elsewhere and copy\/paste it into your solution when it\u2019s ready. When you want to make changes, you have to jump back and forth between your IDE and your solution, going through too many steps to test small changes. <\/p>

It is possible, however, to enable developer tools for web viewers in FileMaker<\/a>, but it\u2019s sort of a hidden feature, and requires that you\u2019re on MacOS since FileMaker uses the same developer tools as Safari.<\/p>

Here\u2019s how to show web development tools in FileMaker:<\/h3>
  1. Make sure to quit FileMaker completely<\/li>\n\n
  2. Open the terminal and type or copy\/paste the following command in a single line. Note: .pro12 is the correct parameter for FileMaker 19<\/em>:<\/li><\/ol>
    defaults write com.filemaker.client.pro12\n WebKitDebugDeveloperExtrasEnabled -bool YES<\/code><\/pre>
    3. Test it out!<\/p>
    Right click on the web viewer and you should see at least two options: \u201cReload\u201d and \u201cInspect\u201d. Click \u201cInspect\u201d and the developer tools will open in a separate window. If it opens as a panel, you can pop it out using the button in the top left corner for easier viewing.  <\/p>
    \"\"<\/figure>
    Development Tools in FileMaker<\/p>
    \"\"<\/figure>
    Development Tools in Window Mode<\/p>
    There are a few caveats: <\/p>