[TIL] Developer tools

link717Β·2020λ…„ 9μ›” 17일
0

TIL

λͺ©λ‘ 보기
1/53
post-thumbnail

πŸŽ‰ Developer tools

λ³„λ„μ˜ editor tool을 μ‚¬μš©ν•˜μ§€ μ•Šκ³  web page μƒμ—μ„œ HTML/css/Javascript λ“±μ˜ μ½”λ“œλ₯Ό ν™•μΈν•˜κ³  testλ₯Ό ν•  수 μžˆλŠ” λ„κ΅¬λ‘œ 개발자의 생산성 ν–₯상에 도움을 μ€€λ‹€.

.Element: HTML μ½”λ“œ 정보가 보이고 각 νƒœκ·Έλ³„ λ‚΄μš©μ„ 확인할 수 μžˆλŠ” 탭이닀. ν•΄λ‹Ή νƒ­μ—μ„œλŠ” HTML/css μ½”λ“œ μˆ˜μ • 및 디버깅을 ν•  수 μžˆλ‹€. element νƒ­μ—μ„œ style μš”μ†ŒλŠ” html μ½”λ“œμ— 적용된 css μ½”λ“œλ₯Ό displayν•˜λŠ”λ° style의 μˆœμ„œλŠ” css 적용 μˆœμ„œ(μƒμœ„ β€Ί ν•˜μœ„)에 따라 μ •λ ¬λ˜μ–΄ μžˆλ‹€.

μœ„μ˜ 이미지λ₯Ό 보면 user agent stylesheetλΌλŠ”κ²Œ 있고 ν•΄λ‹Ή μ½”λ“œλŠ” 선택이 λ˜μ§€ μ•ŠλŠ” 것을 확인할 수 μžˆλ‹€. 그것은 μ‚¬μš©μžκ°€ λ³„λ„λ‘œ μ§€μ •ν•˜μ§€ μ•Šμ•˜μ§€λ§Œ λΈŒλΌμš°μ €μ—μ„œ μž„μ˜λ‘œ μ§€μ •λœ μ½”λ“œμ΄λ‹€. 이것은 κ°œλ°œμžκ°€ μž„μ˜ 지정 μ½”λ“œλ₯Ό μ‹€μ œ μ½”λ“œμ— μ›ν•˜λŠ” 값을 μž…λ ₯ν•΄μ£ΌλŠ” κ²ƒμœΌλ‘œ κ°„λ‹¨νžˆ ν•΄κ²°ν•  수 μžˆλ‹€. 좜처 : )


.Console: JavaScript κ°œλ°œμ„ μœ„ν•œ νƒ­μœΌλ‘œ js μ½”λ“œλ₯Ό λΈŒλΌμš°μ €λ₯Ό 톡해 μ¦‰μ‹œ μ‹€ν–‰ν•΄ λ³Ό 수 μžˆλ‹€. 단좕기 escλ₯Ό μ‚¬μš©ν•˜λ©΄ λͺ¨λ“  νƒ­μ—μ„œ μ‰½κ²Œ console 창을 뢈러올 수 μžˆλ‹€. console에 μž…λ ₯된 μ½”λ“œλŠ” enter keyλ₯Ό λˆ„λ₯΄λ©΄ λ°”λ‘œ 싀행이 λ˜λ―€λ‘œ shift+enterλ₯Ό 톡해 μ€„λ°”κΏˆμ„ ν•˜μ—¬ μ½”λ“œλ₯Ό μž‘μ„±ν•΄μ•Όν•˜λ©° 기쑴에 μž‘μ„±λœ μ½”λ“œλŠ” μ΄ν›„μ˜ μ½”λ“œμ— 영ν–₯을 λ―ΈμΉ˜λ―€λ‘œ μƒˆλ‘œμš΄ 창이 ν•„μš”ν•  κ²½μš°μ—λŠ” refreshλ₯Ό λˆŒλŸ¬μ•Ό ν•œλ‹€.

λ§Œμ•½, μž‘μ„±ν•œ μ½”λ“œλ₯Ό κΈ°μ–΅ν•œ μƒνƒœλ‘œ 이 ν›„μ˜ μž‘μ—…μ„ ν•˜κ³  μ‹Άλ‹€λ©΄ setting 창의 μ˜΅μ…˜(Preserve log upon navigation) μ„ νƒμœΌλ‘œ μ†μ‰½κ²Œ 적용 ν•  수 μžˆλ‹€. setting 창은 개발자 도ꡬ ν™”λ©΄μ—μ„œ ν†±λ‹ˆλ°”ν€΄ μ•„μ΄μ½˜μ„ λˆ„λ₯΄κ±°λ‚˜ F1을 λˆ„λ₯΄λ©΄ μ ‘κ·Ό κ°€λŠ₯ν•˜λ‹€.

🎁 tip λ‹¨μˆœνžˆ ν™”λ©΄μ˜ μ½”λ“œλ₯Ό μ§€μš°κ³  μ‹Άλ‹€λ©΄ clear();λ₯Ό μž…λ ₯ν•˜κ±°λ‚˜ ctrl+l을 λˆ„λ₯΄λ©΄λœλ‹€. 단, preserve log μƒνƒœμ—μ„œλŠ” clear();λŠ” μ μš©λ˜μ§€ μ•Šκ³  λ‹¨μΆ•κΈ°λŠ” ctrl+l만 μ μš©λœλ‹€.


.Network: http 톡신과정을 λ“€μ—¬λ‹€ λ³Ό 수 μžˆλŠ” νƒ­μœΌλ‘œ μ„œλ²„λ‘œλΆ€ν„° μžμ›λ“€μ΄ μ–΄λŠμ •λ„μ˜ 크기둜 μ–Όλ§ˆμ˜ μ‹œκ°„μ„ 가지고 λ‚΄λ €λ°›μ•„μ§€λŠ”μ§€ μžμ„Ένžˆ 확인할 수 μžˆλ‹€. λΈŒλΌμš°μ €μ™€ μ„œλ²„μ˜ 톡신과정 쀑에 μ–΄λ–€ λ¬Έμ œκ°€ μžˆλŠ”μ§€ ν™•μΈν•˜κ³  ν΄λΌμ΄μ–ΈνŠΈμ˜ μ„±λŠ₯ κ°œμ„  지점을 μ°Ύκ³  λΆ„μ„ν•˜λŠ”λ° λ‹€μ–‘ν•˜κ²Œ ν™œμš©ν•  수 μžˆλ‹€.


.application: ν˜„μž¬ λ‘œλ”©λœ μ›Ή νŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©λœ λ¦¬μ†ŒμŠ€(이미지, 슀크립트, 데이터 λ“±)λ₯Ό μ—΄λžŒν•  수 μžˆλŠ” 탭이닀. μ›Ή SQL λ°μ΄ν„°λ² μ΄μŠ€, 둜컬 및 μ„Έμ…˜ μŠ€ν† λ¦¬μ§€, μΏ ν‚€, μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œ, 이미지, 폰트, μŠ€νƒ€μΌμ‹œνŠΈλ₯Ό ν¬ν•¨ν•œ λ‘œλ”©λœ λͺ¨λ“  λ¦¬μ†ŒμŠ€λ₯Ό κ²€μ‚¬ν•œλ‹€.

profile
Turtle Never stop

0개의 λŒ“κΈ€