How to Debug a Shopify Custom Embedded App?

[Ekk0]

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);
        alert(123)
    }

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

[SomeUsernameHe]

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(
        (event) => setTagsValue(event.target.value),
        [],
    );

    const handleSubmit = (event) => {
        event.preventDefault(); // Prevent default form submission behavior
        console.log('Submitted tagsValue:', tagsValue);
        // Implement submission logic here
    }

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

This should work. Also, if you are using VS Code and running your app there, you should see something in the terminal inside VS Code. 

[Ekk0]

I tried the code you posted. After clicking the save button, some prompts appear, but the printed information still does not show up anywhere. The cancel button's event is also not triggered.

I added a console event to the cancel button as well, but it is still not being triggered.

// 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);
//         alert(123)
//     }

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

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(
        (event) => setTagsValue(event.target.value),
        [],
    );

    const handleSubmit = (event) => {
        event.preventDefault(); // Prevent default form submission behavior
        console.log('Submitted tagsValue:', tagsValue);
        // Implement submission logic here
    }
    const cancel = useCallback(
        () => setTagsValue(""),
        [],
    );
    return (
        <Page>
            <Form onSubmit={handleSubmit}>
                <FormLayout>
                    <TextField label="tags_04" onChange={handleChange} value={tagsValue} autoComplete="off" />
                </FormLayout>
                <ButtonGroup>
                    <Button onClick={cancel}>Cancel</Button>
                    <Button primary submit>Save</Button>
                </ButtonGroup>
            </Form>
        </Page>
    );
}