Search
🐞

Debugging with Browser

디버깅을 μ•Œμ•„μ•Ό ν•˜λŠ” 이유

μ—λŸ¬κ°€ λ°œμƒν–ˆμ„ λ•Œ λ©˜νƒˆμ„ λΆ€μ—¬μž‘κ³  λΉ λ₯΄κ²Œ ν•΄κ²°ν•˜κ³  μ‹Άλ‹€λ©΄ μ£Όλ¨Ή κ΅¬κ΅¬μ‹μœΌλ‘œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° λ³΄λ‹€λŠ”, 체계적인 ν”„λ‘œμ„ΈμŠ€λ₯Ό λ§Œλ“€κ³  μ‹Άλ‹€λ©΄

이 λ¬Έμ„œλ₯Ό 보고 λ‚˜λ©΄

디버깅 ν•˜λŠ” 단계λ₯Ό 슀슀둜 μ •ν•  수 μžˆλ‹€.
λΈŒλΌμš°μ €μ—μ„œ 디버깅을 ν•  수 μžˆλ‹€.

디버깅

디버깅(debugging)은 슀크립트 λ‚΄ μ—λŸ¬λ₯Ό κ²€μΆœν•΄ μ œκ±°ν•˜λŠ” 일련의 과정을 μ˜λ―Έν•©λ‹ˆλ‹€. λͺ¨λ˜ λΈŒλΌμš°μ €μ™€ 호슀트 ν™˜κ²½ λŒ€λΆ€λΆ„μ€ 개발자 도ꡬ μ•ˆμ— UI ν˜•νƒœλ‘œ 디버깅 툴이 μžˆμŠ΅λ‹ˆλ‹€. 이 디버깅 νˆ΄μ„ μ‚¬μš©ν•˜λ©΄ μ½”λ“œ μ‹€ν–‰ λ‹¨κ³„λ§ˆλ‹€ μ–΄λ–€ 일이 μΌμ–΄λ‚˜λŠ”μ§€λ₯Ό μ½”λ“œ λ‹¨μœ„λ‘œ 좔적할 수 μžˆμŠ΅λ‹ˆλ‹€. 주둜 많이 μ‚¬μš©ν•˜λŠ” λ„κ΅¬λŠ” Chrome λΈŒλΌμš°μ €μ—μ„œ μ œκ³΅ν•˜λŠ” 디버깅 νˆ΄μž…λ‹ˆλ‹€. κΈ°λŠ₯이 λ‹€μ–‘ν•˜κ³ , Chrome에 μ΅μˆ™ν•΄μ§€λ©΄ λ‹€λ₯Έ λΈŒλΌμš°μ €μ—μ„œ μ§€μ›ν•˜λŠ” 디버깅 νˆ΄μ€ μ‰½κ²Œ 읡힐 수 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

λ””λ²„κΉ…μ˜ 단계

1.
정상 μ‹œμŠ€ν…œμ˜ λ™μž‘, κ·ΈλŸ¬λ‹ˆκΉŒ κΈ°λŒ€ν•˜λŠ” λ™μž‘μ„ μ •μ˜ν•œλ‹€.
2.
원인을 μ„£λΆˆλ¦¬ μΆ”μΈ‘ν•˜μ§€ μ•Šκ³ , 일단은 "λͺ¨λ₯Έλ‹€"κ³  μƒκ°ν•˜κ³  μΆœλ°œν•œλ‹€.
3.
근본적인 원인을 μ•Œ λ•ŒκΉŒμ§€ μ΅œλŒ€ν•œ λ§Žμ€ 데이터λ₯Ό λͺ¨μœΌλ©° ν˜„μƒμ„ κ΄€μ°°ν•œλ‹€.
4.
증상이 μ•„λ‹Œ 원인을 μˆ˜μ •ν•œλ‹€.
이걸 ν”„λ‘ νŠΈμ—”λ“œ 개발의 κ΄€μ μ—μ„œ 버그λ₯Ό μ •μ˜ν•  λ•ŒλŠ” 크게 세가지가 ν•„μš”ν•©λ‹ˆλ‹€.

1. μž¬ν˜„ κ³Όμ •

보톡 λ°±μ—”λ“œμ˜ 경우 μ–΄λ–€ 데이터가 μž…λ ₯되고, 좜λ ₯이 λ˜μ—ˆλŠ”μ§€ 둜그λ₯Ό 보면 λ©λ‹ˆλ‹€. ν•˜μ§€λ§Œ ν”„λ‘ νŠΈμ—”λ“œμ˜ 경우 μ‚¬μš©μžμ˜ 행동이 μžˆμ–΄μ•Ό λ°œμƒν•˜λŠ” 버그가 λŒ€λΆ€λΆ„μ΄κ³ , 버그가 λ°œμƒν•˜λŠ” κ²½μš°κ°€ μ‚¬μš©μžμ˜ ν™˜κ²½μ— 따라 λ‹¬λΌμ§‘λ‹ˆλ‹€. κ·ΈλŸ¬ν•œ ν™˜κ²½μ— λ”°λ₯Έ 버그듀을 ν•΄κ²°ν•˜λ €λ©΄ ꡬ체적인 μž¬ν˜„ 과정이 ν•„μš”ν•œλ°μš”. κ·Έλž˜μ„œ μžμ„Έν•œ μž¬ν˜„ 과정을 기둝해두고 ν•΄κ²°ν•΄ λ‚˜κ°€λŠ” 과정이 ν•„μš”ν•©λ‹ˆλ‹€.

2. κΈ°λŒ€ λ™μž‘

μ–΄λ–€ 경우 κΈ°μˆ μ μœΌλ‘œλŠ” 정상 λ™μž‘μ΄μ§€λ§Œ, μ‚¬μš©μž κ²½ν—˜μ— μžˆμ–΄μ„œλŠ” μ—λŸ¬λΌκ³  ν‘œν˜„ν•  수 μžˆλŠ” 것듀도 μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ μˆ˜κ°•μ‹ μ²­ λ²„νŠΌμ„ ν΄λ¦­ν–ˆλŠ”λ° μˆ˜κ°• 신청이 잘 λ˜μ—ˆλ‹€λŠ” νŽ˜μ΄μ§€κ°€ λœ¨κΈ°κΉŒμ§€ 5μ΄ˆκ°€ κ±Έλ Έλ‹€κ³  ν•΄λ΄…μ‹œλ‹€. 이건 μ—λŸ¬μΌμˆ˜λ„ 아닐 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. μ—λŸ¬κ°€ 되렀면 'μˆ˜κ°• 신청은 μ΅œλŒ€ 3μ΄ˆμ•ˆμ— μ™„λ£Œλ˜μ–΄μ•Ό ν•œλ‹€'와 같은 κΈ°λŒ€λ™μž‘μ΄ μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€. .

3. μ—λŸ¬ λ©”μ‹œμ§€

λΈŒλΌμš°μ € μ½˜μ†”μ— μ—λŸ¬ λ©”μ‹œμ§€κ°€ λ‚˜νƒ€λ‚˜λŠ” λ²„κ·ΈλŠ” μƒλŒ€μ μœΌλ‘œ 원인을 λ°œκ²¬ν•˜κΈ° μ‰¬μš΄ νŽΈμž…λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ—λŸ¬κ°€ λ‚˜νƒ€λ‚˜λŠ” 버그 쀑 λ§Žμ€ 뢀뢄듀이 μ˜€νƒ€. λ³€μˆ˜λ‚˜ ν•¨μˆ˜ 이름을 잘λͺ» μ“°λŠ” κ²½μš°λ“€μž…λ‹ˆλ‹€. μ»΄νŒŒμΌμ„ ν•˜μ§€ μ•ŠλŠ” JSλŠ” 싀행해보기 μ „μ—λŠ” μ—λŸ¬λ₯Ό μ•Œ 수 μ—†λŠ” μ–Έμ–΄λΌμ„œ 이런 μ—λŸ¬λ₯Ό ν”ν•˜κ²Œ λ§Œλ‚˜κ²Œ λ§Œλ‚˜κ²Œ λ©λ‹ˆλ‹€.
μš”μ¦˜ λΈŒλΌμš°μ €λ‚˜ ν”„λ ˆμž„μ›Œν¬λŠ” μ—λŸ¬ λ©”μ‹œμ§€λ₯Ό ꡉμž₯히 μΉœμ ˆν•˜κ²Œ λ³΄μ—¬μ£ΌλŠ” 편이고 이걸둜 κ²€μƒ‰ν•˜λ©΄ μ–΄μ§€κ°„ν•œ λ¬Έμ œλŠ” λ‹€ 확인할 수 있 μžˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ λ‹¨μˆœνžˆ λ™μž‘μ΄ μ•ˆλœλ‹€λΌκ³  μƒκ°ν•˜κΈ° λ³΄λ‹€λŠ” μ—λŸ¬ 메세지λ₯Ό 꼼꼼히 μ½λŠ” μŠ΅κ΄€μ„ λ“€μ—¬μ£Όμ„Έμš”.
그런데 μ—λŸ¬ λ©”μ‹œμ§€κ°€ λ‚˜νƒ€λ‚˜μ§€ μ•ŠλŠ” 문제라면 쑰금 더 λ³΅μž‘ν•΄μ§‘λ‹ˆλ‹€. λ°±μ—”λ“œμ™€ λ‹€λ₯΄κ²Œ ν”„λ‘ νŠΈμ—”λ“œμ—λŠ” 보톡 개발용 둜그λ₯Ό μˆ˜μ§‘ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μˆ˜λ§Žμ€ μ‚¬μš©μžμ˜ 둜그λ₯Ό λ‹€ λ³΄κ΄€ν•˜λŠ” 게 사싀상 λΆˆκ°€λŠ₯ν•  λΏλ”λŸ¬ λΉ„νš¨μœ¨μ μ΄κ³  μžμΉ«ν•˜λ©΄ ν”„λΌμ΄λ²„μ‹œ κ΄€λ ¨ν•΄μ„œ 법적인 λ¬Έμ œκ°€ 될 μˆ˜λ„ 있기 λ•Œλ¬ΈμΈλ°μš”. 이럴 λ•ŒλŠ” κ²°κ΅­ μ—­μˆœμœΌλ‘œ μ°Ύμ•„κ°€λŠ” 수 밖에 μ—†μŠ΅λ‹ˆλ‹€. λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ μ•ˆλ‚΄ λ©”μ‹œμ§€κ°€ λ‚˜νƒ€λ‚¬μ–΄μ•Ό ν•˜λŠ”λ° λ‚˜νƒ€λ‚˜μ§€ μ•ŠλŠ”λ‹€λ©΄ λ²„νŠΌμ„ ν΄λ¦­ν•˜λŠ” μˆœκ°„λΆ€ν„° μ•ˆλ‚΄ λ©”μ‹œμ§€λ₯Ό ν‘œμ‹œν•˜λŠ” μˆœκ°„κΉŒμ§€ μ‘΄μž¬ν•˜λŠ” λͺ¨λ“  과정을 λ‹€ 점검해봐야 ν•©λ‹ˆλ‹€. κ·Έλž˜λ„ λ‹€ν–‰νžˆ 이런 과정은 κΈ°λ‘ν•˜κ³  λ‚¨κΈ°λŠ”κ±Έ Cypress와 같은 도ꡬ듀을 톡해 보닀 νŽΈλ¦¬ν•˜κ²Œ 체크할 수 μžˆμœΌλ‹ˆ ν…ŒμŠ€νŠΈ 도ꡬ와 더 μΉœν•΄μ§€λ©΄ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.

λΈŒλΌμš°μ €μ—μ„œμ˜ 디버깅

μ‚¬μš©μžκ°€ 직접 λ§Œλ‚˜κ³  보게 λ˜λŠ” λΈŒλΌμš°μ €μ— ν™˜κ²½μ—μ„œ μš°λ¦¬λŠ” 디버깅을 ν•  수 μžˆμ–΄μ•Ό μ—λŸ¬λ₯Ό 보닀 빨리 ν•΄κ²°ν•  수 μžˆλŠ”λ°μš”. λΈŒλΌμš°μ €μ— μžˆλŠ” 개발자 λ„κ΅¬λ“€μ—μ„œ ν…ŒμŠ€νŠΈν•΄λ³Ό 수 μžˆλŠ” κΈ°λŠ₯듀에 λŒ€ν•œ μ˜μƒμ„ 톡해 ν•¨κ»˜ ν™•μΈν•΄λ³Όκ²Œμš”! μ΄λ²ˆμ— λ‹€ μ•Œμ§€ λͺ»ν•˜λ”라도 이런 도ꡬ듀이 μžˆκ΅¬λ‚˜ μ •λ„λ‘œ μ•Œμ•„μ£Όμ‹œλ©΄ 쒋을 것 κ°™μ•„μš”!

vscodeμ—μ„œμ˜ chrome Debuggingκ³Ό Debugger μ•„ν‚€ν…μ²˜

vscodeμ—μ„œλ„ νŽΈλ¦¬ν•˜κΈ° 크둬 디버거λ₯Ό μ‚¬μš©ν•  수 μžˆλŠ”λ°μš”. vscodeμ—μ„œ 크둬 디버거에 μ§μ ‘μ μœΌλ‘œ μ‚¬μš©κ°€λŠ₯ν•œ μ΄μœ λŠ” λ¬΄μ—‡μΌκΉŒμš”? λ””λ²„κ±°μ˜ μ•„ν‚€ν…μ²˜κ°€ κΆκΈˆν•˜λ‹€λ©΄ μ•„λž˜ μ˜μƒμ„ 톡해 μΆ”κ°€ κΆκΈˆμ¦μ„ ν•΄κ²°ν•΄λ³΄μ„Έμš”!

참고 링크