๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์›น์‚ฌ์ดํŠธ ํ…์ŠคํŠธ ๋ณต์‚ฌ ์•ˆ ๋  ๋•Œ? F12๋กœ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•!

๋งˆํฌ_ 2025. 3. 1.

๐Ÿ’ก ๋ธ”๋กœ๊ทธ์—์„œ ํ…์ŠคํŠธ ๋ณต์‚ฌ๊ฐ€ ๋ง‰ํ˜€ ์žˆ๋‹ค๋ฉด?
๋ณต์‚ฌ ๋ฐฉ์ง€๋œ ์‚ฌ์ดํŠธ์—์„œ๋„ F12 ๊ฐœ๋ฐœ์ž ๋„๊ตฌ(DevTools)๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์†์‰ฝ๊ฒŒ ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์–ด์š”! ๐Ÿ˜Ž

 

โ— ๋‹จ, ์ €์ž‘๊ถŒ์ด ์žˆ๋Š” ์ฝ˜ํ…์ธ ๋Š” ํ—ˆ๋ฝ ์—†์ด ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ ๋ผ์š”!
โ— ๊ฐœ์ธ์ ์ธ ์šฉ๋„๋กœ๋งŒ ํ™œ์šฉํ•˜์„ธ์š”!


โœ… 1. F12 ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ ํ…์ŠคํŠธ ๋ณต์‚ฌํ•˜๋Š” ๋ฒ•

๐Ÿ“Œ ๋ฐฉ๋ฒ• 1: ๊ฐœ๋ฐœ์ž ๋„๊ตฌ(DevTools)์—์„œ ์ง์ ‘ ๋ณต์‚ฌ

โœ” ๋‹จ์ˆœํ•œ ๋ณต์‚ฌ ๋ฐฉ์ง€(์šฐํด๋ฆญ ์ฐจ๋‹จ)๋ผ๋ฉด?
๐Ÿ‘‰ F12(๋˜๋Š” Ctrl + Shift + I)๋ฅผ ๋ˆ„๋ฅด๋ฉด ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๊ฐ€ ์—ด๋ฆฝ๋‹ˆ๋‹ค!

 

๐Ÿ”น ๋ณต์‚ฌ ๋ฐฉ๋ฒ•
1๏ธโƒฃ ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ F12๋ฅผ ๋ˆ„๋ฅด๊ฑฐ๋‚˜, Ctrl + Shift + I(์œˆ๋„์šฐ), Cmd + Option + I(๋งฅ)์„ ๋ˆŒ๋Ÿฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์—ฝ๋‹ˆ๋‹ค.
2๏ธโƒฃ "Elements" (์š”์†Œ) ํƒญ์—์„œ ์›ํ•˜๋Š” ํ…์ŠคํŠธ๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.
3๏ธโƒฃ ํ•ด๋‹น ๋ถ€๋ถ„์„ ๋งˆ์šฐ์Šค ์šฐํด๋ฆญ ํ›„ "Edit as HTML" ์„ ํƒ
4๏ธโƒฃ ์•ˆ์— ์žˆ๋Š” ํ…์ŠคํŠธ๋ฅผ ๋ณต์‚ฌํ•˜๋ฉด ๋!


๐Ÿ“Œ ๋ฐฉ๋ฒ• 2: ์„ธํŒ… ๋ณ€๊ฒฝํ•ด์„œ ํ…์ŠคํŠธ ์ถ”์ถœ

โœ” ๋” ๊ฐ•๋ ฅํ•œ ๋ณต์‚ฌ ๋ฐฉ์ง€(๋“œ๋ž˜๊ทธ ์ฐจ๋‹จ, ์„ ํƒ ๋ฐฉ์ง€)๊ฐ€ ์žˆ๋‹ค๋ฉด?

๐Ÿ”น ๋ณต์‚ฌ ๋ฐฉ๋ฒ•
1๏ธโƒฃ F12 → ์„ค์ • ํƒญ ํด๋ฆญ
2๏ธโƒฃ Debugger disable javascript ์ฒดํฌ

3๏ธโƒฃ ์‚ฌ์ดํŠธ์—์„œ ๋ฐ”๋กœ ์›ํ•˜๋Š” ๋‚ด์šฉ ๋ณต์‚ฌ ํ›„ ๋ฉ”๋ชจ์žฅ์ด๋‚˜ ์›Œ๋“œ์— ๋ถ™์—ฌ๋„ฃ๊ธฐ!

 

 

 


๐Ÿšจ ์ฃผ์˜์‚ฌํ•ญ & ๋ฒ•์  ๋ฌธ์ œ

โœ… ๊ฐœ์ธ์ ์ธ ์šฉ๋„๋กœ๋งŒ ์‚ฌ์šฉํ•˜์„ธ์š”!
โœ… ์ €์ž‘๊ถŒ์ด ์žˆ๋Š” ์ฝ˜ํ…์ธ ๋Š” ํ—ˆ๋ฝ ์—†์ด ํผ๊ฐ€๋ฉด ์•ˆ ๋ผ์š”!
โœ… ์ถœ์ฒ˜๋ฅผ ๋ช…ํ™•ํžˆ ๋ฐํžˆ๊ณ , ์ƒ์—…์ ์œผ๋กœ ์ด์šฉํ•˜์ง€ ๋งˆ์„ธ์š”.


๐ŸŽฏ ๐Ÿ’ฌ ๊ฒฐ๋ก : ๋ธ”๋กœ๊ทธ ๋ณต์‚ฌ ๋ฐฉ์ง€? ๊ฑฑ์ • NO! F12 ํ•˜๋‚˜๋ฉด ํ•ด๊ฒฐ!

โœ” F12(๊ฐœ๋ฐœ์ž ๋„๊ตฌ)๋กœ ์†์‰ฝ๊ฒŒ ํ…์ŠคํŠธ ์ถ”์ถœ ๊ฐ€๋Šฅ!
โœ” ๋‹จ, ์ €์ž‘๊ถŒ์„ ์ค€์ˆ˜ํ•˜๋ฉฐ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ ํ•จ!

 

๐Ÿ“Œ ๐Ÿ’ก ์œ ์šฉํ–ˆ๋‹ค๋ฉด ๊ณต์œ  & ๋Œ“๊ธ€ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค! ๐Ÿš€

๋Œ“๊ธ€