LogoSkills

inspector:form

Form state and validation runtime debugging

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/inspector:form
Categorykobic-development
Complexitysimple
MCP Serversflutter-inspector

/inspector:form โ€” ์ž…๋ ฅ ํผ์ด ์•ˆ ๋  ๋•Œ ๋“ค์—ฌ๋‹ค๋ณด๋Š” ๋„๊ตฌ#

ํ•œ๋งˆ๋””๋กœ#

ํšŒ์›๊ฐ€์ž…ยท๋กœ๊ทธ์ธ ๊ฐ™์€ ์ž…๋ ฅ ํ™”๋ฉด์ด ์™œ ์•ˆ ๋„˜์–ด๊ฐ€๋Š”์ง€ ๊ทธ ์ž๋ฆฌ์—์„œ ์—ด์–ด๋ณด๋Š” ์ง„๋‹จ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์„œ๋ฅ˜๊ฐ€ ๋ฐ˜๋ ค๋์„ ๋•Œ, ์–ด๋А ์นธ์„ ์ž˜๋ชป ์ผ๋Š”์ง€ ๋นจ๊ฐ„ ์ค„์„ ์ฐพ์•„์ฃผ๋Š” ๊ฒ€ํ†  ๋‹ด๋‹น์ž๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋ˆ„๊ฐ€ยท์–ธ์ œ ์“ฐ๋‚˜์š”#

  • ์‹คํ–‰ ์ค‘์ธ Flutter ์•ฑ์—์„œ ์ž…๋ ฅ ํผ์ด ์ œ์ถœ๋˜์ง€ ์•Š์„ ๋•Œ
  • ์ž…๋ ฅ๊ฐ’ ๊ฒ€์ฆ(์ด๋ฉ”์ผ ํ˜•์‹, ํ•„์ˆ˜ ํ•ญ๋ชฉ ๋“ฑ)์ด ์ด์ƒํ•˜๊ฒŒ ๋™์ž‘ํ•  ๋•Œ
  • ๊ฐ ์ž…๋ ฅ ์นธ์ด ์ง€๊ธˆ ์–ด๋–ค ์ƒํƒœ์ธ์ง€(์˜ฌ๋ฐ”๋ฅธ์ง€, ๋น„์—ˆ๋Š”์ง€) ํ™•์ธํ•˜๊ณ  ์‹ถ์„ ๋•Œ

๋ฌด์—‡์„ ํ•ด์ฃผ๋‚˜์š”#

  • ํ™”๋ฉด์— ์žˆ๋Š” ํผ ๋ชฉ๋ก๊ณผ ๊ฐ ํผ์˜ ์ž…๋ ฅ ์นธ ๊ฐœ์ˆ˜ยท์œ ํšจ ์—ฌ๋ถ€๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค
  • ํŠน์ • ํผ์˜ ์ƒ์„ธ ์ƒํƒœ(์นธ๋ณ„ ์ž…๋ ฅ๊ฐ’, ํ†ต๊ณผ/์‹คํŒจ, ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€)๋ฅผ ์•Œ๋ ค์ค๋‹ˆ๋‹ค
  • ํผ์˜ ๋ชจ๋“  ์˜ค๋ฅ˜๋ฅผ ํ•œ ๋ฒˆ์— ๋ชจ์•„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค
  • ๊ฒ€์ฆ์„ ์ˆ˜๋™์œผ๋กœ ํ•œ ๋ฒˆ ๋Œ๋ ค์„œ ์–ด๋””๊ฐ€ ๊ฑธ๋ฆฌ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค

์–ด๋–ป๊ฒŒ ์“ฐ๋‚˜์š”#

# ํ™”๋ฉด์˜ ํผ ๋ชฉ๋ก ๋ณด๊ธฐ
/inspector/form list

# ํŠน์ • ํผ(loginForm)์˜ ์ƒ์„ธ ์ƒํƒœ ๋ณด๊ธฐ
/inspector/form state loginForm

# ํผ์˜ ์˜ค๋ฅ˜ ๋ชจ์•„๋ณด๊ธฐ
/inspector/form errors

# ํผ ๊ฒ€์ฆ์„ ์ˆ˜๋™์œผ๋กœ ์‹คํ–‰
/inspector/form validate loginForm

loginForm ์ž๋ฆฌ์—๋Š” ํ™•์ธํ•˜๋ ค๋Š” ํผ์˜ ์ด๋ฆ„(ํ‚ค)์„ ๋„ฃ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์–ด๋–ค ํผ์ด ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๋ฉด ๋จผ์ € list๋กœ ๋ชฉ๋ก์„ ํ™•์ธํ•˜์„ธ์š”.

์•ˆ์—์„œ ๋ฌด์Šจ ์ผ์ด ๋ฒŒ์–ด์ง€๋‚˜์š”#

์ฆ์ƒ๋ณ„๋กœ ์ •ํ•ด์ง„ ์ ๊ฒ€ ์ˆœ์„œ๋ฅผ ๋”ฐ๋ผ๊ฐ‘๋‹ˆ๋‹ค.

  • ์ œ์ถœ์ด ์•ˆ ๋  ๋•Œ: ํผ์˜ ํ˜„์žฌ ์ƒํƒœ๋ฅผ ํ™•์ธํ•˜๊ณ , ์œ ํšจํ•˜์ง€ ์•Š์œผ๋ฉด ์˜ค๋ฅ˜๋ฅผ ๋ชจ์•„๋ณธ ๋’ค ๊ฒ€์ฆ ๋กœ์ง์„ ์ ๊ฒ€ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฒ€์ฆ์ด ์•ˆ ๋จนํž ๋•Œ: ๊ฒ€์ฆ์„ ์ˆ˜๋™์œผ๋กœ ๋Œ๋ ค๋ณด๊ณ  ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€์™€ ๊ฒ€์ฆ ํ•จ์ˆ˜ ๋กœ์ง์„ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.
  • ์ž…๋ ฅ๊ฐ’์ด ์ž๊พธ ์‚ฌ๋ผ์งˆ ๋•Œ: ์นธ๋ณ„ ์ž…๋ ฅ๊ฐ’์„ ํ™•์ธํ•˜๊ณ  ์ž…๋ ฅ ์ปจํŠธ๋กค๋Ÿฌ ์—ฐ๊ฒฐ๊ณผ ์ƒํƒœ ๋ณต์› ๋กœ์ง์„ ์ ๊ฒ€ํ•ฉ๋‹ˆ๋‹ค.
  • ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๊ฐ€ ์•ˆ ๋ณด์ผ ๋•Œ: ์˜ค๋ฅ˜๊ฐ€ ์‹ค์ œ๋กœ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ณ , ์˜ค๋ฅ˜ ํ‘œ์‹œ ์œ„์ ฏ๊ณผ ์ž๋™ ๊ฒ€์ฆ ์„ค์ •์„ ์ ๊ฒ€ํ•ฉ๋‹ˆ๋‹ค.

โš™๏ธ ์ƒ์„ธ ์˜ต์…˜ยท์‹คํ–‰ ๋ช…์„ธ (๊ฐœ๋ฐœ์ž / AI ์—์ด์ „ํŠธ์šฉ)

Triggers#

  • Form submission failure
  • Validation issues
  • Field state check

MCP Tools#

form_list#

Lists all forms on the current screen.

Response example:

{
   " forms " : [
    {
       " key " :  " loginForm " ,
       " fieldCount " : 3,
       " isValid " : false,
       " fields " : [ " email " ,  " password " ,  " rememberMe " ]
    }
  ]
}

form_get_state#

Returns the detailed state of a specific form.

Parameters:

  • formKey: Form key (required)

Response example:

{
   " formKey " :  " loginForm " ,
   " state " : {
     " isValid " : false,
     " fields " : {
       " email " : {
         " value " :  " user@example " ,
         " isValid " : false,
         " error " :  " Invalid email format " 
       },
       " password " : {
         " value " :  " *** " ,
         " isValid " : true,
         " error " : null
      }
    }
  }
}

form_get_errors#

Returns all errors for a form.

form_validate#

Manually validates a form.

Common Diagnostics#

Form not submitting#

1. form_get_state - >   Check current state
2. If isValid: false, check errors
3. form_get_errors - >   Query all errors
4. Review validation logic

Validation not working#

1. form_validate - >   Run manual validation
2. Check error messages
3. Review validator function logic

Field values not persisting#

1. form_get_state - >   Check field values
2. Verify TextEditingController connection
3. Review form state restoration logic

Error messages not showing#

1. form_get_errors - >   Confirm errors exist
2. Check ErrorText widget rendering
3. Check AutovalidateMode settings

Examples#

Check form list#

/inspector/form list

Check form state#

/inspector/form state loginForm

Check form errors#

/inspector/form errors

Manual validation#

/inspector/form validate loginForm

References#

  • Detailed implementation: .claude/agents/flutter-inspector-form.md
  • Master inspector: .claude/commands/inspector.md
  • UI inspector: .claude/commands/inspector/ui.md