Developer Tools

The “Developer Tools” widget extension provides developers with quick tools (API endpoint, JSON, etc.) to work with an entry or all entries of a content type and do a lot more. Let’s explore more about this extension.

The Developer Tools widget extension, which can be accessed on the right-hand side of the entry page, has primarily two tabs: API Details and JSON View.

  • API Details: This tab provides the REST API endpoints or queries (in any language of your choice) that you can readily use to access/fetch the current entry or all entries of the content type. You simply need to select the Platform, copy the endpoint/query, add the environment name, and use it as required to fetch the entry.

REST API.PNG

  • JSON View: The JSON view tab displays the JSON data of your entry. You can then copy this JSON and use it as per requirement or import it to other content types.

JSON view.PNG

Create Developer Tools Custom Widget

To create a Developer Tools custom widget, log in to your Contentstack account and perform the following steps:

  1. Go to your stack and click on CONTENT
  2. Hover over the “Settings” icon and select Extensions
  3. Click on + Add Extension and select Create new Add_Extension.png
  4. On the Select Extension Type screen, select Custom Widget 
    select-custom-widget.png
  5. On the Create New Extension page, enter the following details:

    • Title: Enter a name for your extension, for example, Developer Tools.
    • Hosting method: Select Hosted by Contentstack. When you select Hosted by Contentstack, the Extension source code field appears below.
    • External source code: In this field, you need to enter the code for the extension. To get the code, contact our support team. Our support team will provide you the code.
    • Paste this code in the Extension source code field.
    • Config Parameter: Provide values for the default environment and host inside this field as shown below:
      {
          "environment": "development",
          "host": "cdn.contentstack.io"
      }
    • Scope: Select the content type for which you want to use this extension. The default value is All Content Types. You can select multiple content types.
  6. Click on Save to save your settings.

Now that you have added the extension to you content type, let's use the extension in our entry and see how it works.

Use the Extension

  1. Click on the content type for which you have enabled this custom widget.
  2. Click on an entry. You will see the Widgets dropdown at the top. Click on it and select Developer Tools.

    Add Widget.PNG

  3. The selected widget expands on the sidebar.

    Developer tool options.PNG

  4. You can then select either of the following options:

    1. API Details: This tab provides the REST API endpoints or queries (in any language of your choice) that you can readily use to access/fetch the current entry or all entries of the content type.

      Under Platform, select either REST API or the platform (iOS, Android, Javascript, etc.) to view the REST API endpoint for fetching the entry. You can copy this endpoint/query (and enter the environment name) and use it as required.

      The widget provides endpoints/queries for both Get this entry as well as Get all entries.
    2. JSON view: The JSON view tab allows you to see the JSON format of the entry you're working on, which can then be copied and exported to other content types.
      JSON View.PNG

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

top-arrow