Getting Started with Make.com DevTool

Getting Started with Make.com DevTool

The Make.com DevTool is a browser extension that helps you inspect, debug, and optimize custom app development directly in the Make.com environment. This how-to guide walks you through installation, setup, and everyday use so you can test your data structures and resolve issues faster.

What is the Make.com DevTool?

The Make.com DevTool is a small utility that connects your browser to the Make DevTool panel. It listens for data sent from your custom app and displays detailed information about requests, responses, and data structures used in your scenarios.

By using this DevTool, you can:

  • See detailed logs of data structures sent from your custom app.
  • Inspect individual operations and their payloads.
  • Test and debug Make.com apps without leaving your browser.
  • Speed up development and troubleshooting.

How the Make.com DevTool Works

The DevTool is implemented as a JavaScript snippet that your custom app calls to send data to the Make DevTool panel. Each time your app runs, it can post data representing structures, requests, or results. The DevTool then displays that information in a dedicated interface attached to your Make.com developer workspace.

At a high level, the process is:

  1. Your custom app includes the DevTool client code.
  2. The code sends messages with data structures to the DevTool.
  3. The DevTool displays the information in an organized panel.
  4. You review, debug, and adjust your Make.com app accordingly.

Install the Make.com DevTool

Before you can use the DevTool, you must install the browser extension provided on the official Make.com documentation site. This extension lets the Make DevTool connect securely to your app running in the browser.

Step 1: Open the official Make.com DevTool page

Go to the official documentation for the DevTool at Make DevTool documentation. This page contains the latest version of the DevTool, usage details, and technical requirements.

Step 2: Download or install the extension

On the documentation page, follow the instructions for your browser. Typically, you will:

  • Click the provided extension link for your browser.
  • Approve the installation prompt.
  • Confirm that the extension is enabled in your browser settings.

After installation, you should see the DevTool icon or a confirmation that the Make.com DevTool is active.

Enable the Make.com DevTool in your environment

Once the extension is installed, you must connect it to your Make.com developer workspace. The DevTool will listen only when the workspace and the DevTool are both active.

Step 3: Open your Make.com developer workspace

Sign in to your account and open the area where you build custom apps. Make sure you are in the correct organization and project where you want to debug data structures.

Step 4: Launch the Make DevTool panel

Depending on the current implementation described on the documentation page, you will either:

  • Open a dedicated DevTool tab from the Make.com interface, or
  • Open a DevTool panel attached to your browser’s developer tools.

Follow the on-screen prompts so the DevTool panel connects to your current project and is ready to receive messages.

Integrate the Make.com DevTool into your custom app

To make the DevTool useful, your custom app must explicitly send data to it. The documentation page provides a script and example for connecting your code to the Make DevTool.

Step 5: Add the DevTool client snippet

Copy the client snippet or initialization code from the official DevTool guide and paste it into your custom app project. This is typically JavaScript that you import or require in the relevant module.

Place the snippet where your app has access to:

  • Current operation context.
  • Data structures or payloads you want to inspect.
  • Any error or debug messages you want to track.

Step 6: Send data to the Make.com DevTool

The DevTool client code provides a function or method to send messages. Use this method whenever you want to inspect a particular structure or operation. Common examples include:

  • Before sending a request from your custom app to a third-party API.
  • After receiving and parsing a response.
  • When validating fields in a data structure.

Each message will contain the data you choose, such as:

  • Input parameters.
  • Raw responses.
  • Transformed objects.
  • Error messages and status codes.

View and debug data in the Make.com DevTool

With your custom app sending messages, the Make.com DevTool becomes your main inspection interface. It will organize messages based on the structure and metadata defined in the DevTool client code.

Step 7: Inspect messages in the DevTool panel

In the DevTool panel you will see entries for each message your app sends. For each entry, you can typically:

  • Expand the message to view nested fields.
  • Check the exact payload structure.
  • Compare expected versus actual values.
  • Identify missing or malformed fields.

This helps you verify that your custom app is sending data in the format required by Make.com custom app specifications.

Step 8: Refine and retest your Make.com app

When you find an issue, adjust your code, refresh your app or rerun the operation, and watch the new data appear in the DevTool. Repeat this cycle until:

  • All required fields are present.
  • Data types match the definitions in your Make.com app.
  • Responses are correctly parsed and transformed.

Using this iterative process reduces time spent guessing what data is flowing through your scenarios.

Best practices for using the Make.com DevTool

To get the most value from the DevTool, keep the following practices in mind:

  • Log key stages only: Focus on logging input, output, and major transformation steps to avoid unnecessary noise.
  • Use clear labels: Name your messages so it is obvious which module or operation they come from in the Make.com environment.
  • Remove or limit sensitive data: Avoid sending secrets or credentials; use masking or test values where appropriate.
  • Keep the DevTool updated: Always follow the latest guidance on the official DevTool documentation page.

Troubleshooting common Make.com DevTool issues

If data is not appearing in the Make.com DevTool, go through these checks:

  1. Extension is active: Verify the DevTool extension is installed and enabled in your browser.
  2. Panel is open: Confirm the DevTool panel is open and attached to the correct Make.com project.
  3. Client code is loaded: Ensure the DevTool client snippet is imported and executed in your custom app.
  4. No console errors: Check the browser console for script errors that may prevent messages from being sent.
  5. Environment matches: Make sure you are testing in the same environment defined in your Make.com developer workspace.

If problems persist, return to the official DevTool documentation at the Make DevTool help page for updated instructions and examples.

Next steps for optimizing your Make.com integrations

After you master the DevTool, you can focus on improving performance, reliability, and maintainability of your custom apps and integrations. The DevTool gives you the visibility needed to safely refactor, introduce new features, and extend scenarios across different services connected to Make.com.

For broader integration strategy, automation design, and Make.com implementation consulting, you can explore additional resources and expert services at Consultevo.

By combining the Make.com DevTool with clear logging practices and a structured testing workflow, you gain a reliable way to build, verify, and maintain custom apps that behave exactly as expected inside your automation projects.

Need Help With Make.com?

If you want expert help building, automating, or scaling your Make scenarios, work with ConsultEvo — certified workflow and automation specialists.

Get Help

Leave a Comment

Your email address will not be published. Required fields are marked *