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>
    );
}