How to Debug a Shopify Custom Embedded App?

Technical Q&A
,
1

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.

Ekk0_0-1719987717767.png
Ekk0_0-1719987717767.png1852×962 127 KB

Ekk0_1-1719987743030.png
Ekk0_1-1719987743030.png1851×957 47.6 KB

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