JavaScript Troubleshooting

How to debug JavaScript in an iframe

If you suspect the JavaScript in an Instant Articles iframe is misbehaving, remote debugging tools are the first things to try. Remote debugging tools provide an interactive remote JavaScript console, similar to the console in your browser's developer tools, where you can remotely execute code within the iframe, or access logs and uncaught exceptions.

Here are a few free, open-source remote JavaScript tools:

These tools allow you to drop in a piece of JavaScript to relay console messages and exceptions to a server where you can access the output. Some tools have hosted servers available, while others require you to set up your own server. See each of the individual links above for detailed instructions on how to use the tools.

As an example, let's use jsconsole.com to test some JavaScript:

  1. Go to http://jsconsole.com/?:listen to generate a unique key.
  2. Copy the script code snippet and paste it into the source code of the iframe you are debugging. It should look something like this:
<iframe>
  <script src="http://jsconsole.com/remote.js?YOUR-UNIQUE-KEY-HERE"></script>
  <script>
    // Your js here
  </script>
</iframe>

Now, when your script outputs to the console or throws exceptions, the output appears on jsconsole.com. You can also execute code from here, which will then run in the iframe on your device.

Two words of caution:

  1. These JavaScript tools are not developed or supported by Facebook.
  2. Take extra care if you are using a hosted service, to ensure you don't accidentally send sensitive or confidential information to a publicly available endpoint.

Additional Information

For additional tips and updates, see the Instant Articles Troubleshooting Guide.