How to Debug a Shopify Custom Embedded App?

Retired Boards Appdev Extensions
, ,

Topic summary

A developer is struggling to debug a custom embedded Shopify app in VS Code. The main issue is that console.log statements and button click events are not working when the app runs in the Shopify admin interface.

Key Problem:

  • Form submission and button clicks work correctly in CodeSandbox but fail in the Shopify admin
  • Console output is not visible in the browser’s developer console
  • The app displays as an iframe in the browser, which may be affecting debugging

Attempted Solutions:

  • Another user suggested using event.preventDefault() in the form submission handler and checking the VS Code terminal for console output
  • The original poster tried this approach, which triggered some UI prompts but still didn’t show console logs or trigger the cancel button event

Current Status:
The issue remains unresolved. The developer needs guidance on proper debugging techniques for embedded Shopify apps, particularly regarding how to access console output and troubleshoot event handlers within the iframe context.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
3

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.

Ekk0_0-1720080362316.png
Ekk0_0-1720080362316.png1071×377 9.04 KB

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

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