How to Debug a Shopify Custom Embedded App?

How to Debug a Shopify Custom Embedded App?

Shopify Partner
7 0 0

I want to develop a custom app for my store, which is embedded. During the initialization process, I realized that I don't know how to debug it. For example, now in VS Code, I want to submit a form and print the form data to the console before submitting it to check if the data is correct. However, I can't see anything in the browser's console, and clicking the two buttons doesn't have any effect.


I noticed that the embedded app is displayed in the browser as an iframe. Can someone tell me how to debug it? I would greatly appreciate it.


In CodeSandbox, the button click functionality in this code works correctly, but in the Shopify admin, it doesn't have any effect.





Here is my code:


import { Page, Form, FormLayout, TextField, ButtonGroup, Button } from '@shopify/polaris';
import React, { useState, useCallback } from 'react';

export default function Settings() {
    const [tagsValue, setTagsValue] = useState('');

    const handleChange = useCallback(
        newValue => setTagsValue(newValue),

    const handleSubmit = () => {
        console.log('Submitted tagsValue:', tagsValue);

    return (
            <Form onSubmit={handleSubmit}>
                    <TextField label="tags_01" onChange={handleChange} value={tagsValue} autoComplete="off" />
                    <Button onClick={() => setTagsValue('')}>Cancel</Button>
                    <Button primary onClick={handleSubmit}>Save</Button>


Replies 0 (0)